@bookklik/senangstart-css 0.2.9 → 0.2.12

package/docs/public/llms.txt

@@ -458,9 +458,9 @@ export default {
 * `separate`: Separate borders (`border-collapse: separate;`)
 
 ## border-radius
-> Set border radius
+> Set border radius for all corners or specific corners
 
-**Syntax:** `visual="rounded:[value]"`
+**Syntax:** `visual="rounded:[value]" | visual="rounded-{t|b|l|r|tl|tr|bl|br}:[value]"`
 
 * `none`: No rounding (`border-radius: var(--r-none);`)
 * `small`: Small radius (`border-radius: var(--r-small);`)
@@ -548,6 +548,19 @@ export default {
 * `1-12`: N columns (`columns: {n};`)
 * `auto`: Auto columns (`columns: auto;`)
 
+## contain
+> Isolate element rendering for performance
+
+**Syntax:** `visual="contain:[value]"`
+
+* `none`: No containment (`contain: none;`)
+* `strict`: Full containment (`contain: strict;`)
+* `content`: Content containment (`contain: content;`)
+* `size`: Size containment (`contain: size;`)
+* `layout`: Layout containment (`contain: layout;`)
+* `style`: Style containment (`contain: style;`)
+* `paint`: Paint containment (`contain: paint;`)
+
 ## container
 > Create a centered container with max-width
 
@@ -555,6 +568,15 @@ export default {
 
 * `container`: Centered container
 
+## content-visibility
+> Optimize rendering by skipping off-screen content
+
+**Syntax:** `visual="content-visibility:[value]"`
+
+* `visible`: Render all content (`content-visibility: visible;`)
+* `auto`: Skip when off-screen (`content-visibility: auto;`)
+* `hidden`: Never render off-screen (`content-visibility: hidden;`)
+
 ## cursor
 > Set cursor style
 
@@ -1225,28 +1247,28 @@ export default {
 **Syntax:** `visual="ring:[size]"`
 
 * `none`: No ring (`box-shadow: 0 0 0 0 transparent;`)
-* `thin`: Thin ring (1px) (`box-shadow: 0 0 0 1px var(--ring-color);`)
-* `regular`: Regular ring (2px) (`box-shadow: 0 0 0 2px var(--ring-color);`)
-* `small`: Small ring (4px) (`box-shadow: 0 0 0 4px var(--ring-color);`)
-* `medium`: Medium ring (6px) (`box-shadow: 0 0 0 6px var(--ring-color);`)
-* `big`: Big ring (8px) (`box-shadow: 0 0 0 8px var(--ring-color);`)
+* `thin`: Thin ring (1px)
+* `regular`: Regular ring (2px)
+* `small`: Small ring (4px)
+* `medium`: Medium ring (6px)
+* `big`: Big ring (8px)
 
 ## ring-color
 > Set ring color
 
 **Syntax:** `visual="ring-color:[color]"`
 
-* `primary`: Primary ring color (`--ring-color: var(--c-primary);`)
-* `blue-500`: Blue ring color (`--ring-color: var(--c-blue-500);`)
+* `primary`: Primary ring color (`--ss-ring-color: var(--c-primary);`)
+* `blue-500`: Blue ring color (`--ss-ring-color: var(--c-blue-500);`)
 
 ## ring-offset
 > Add gap between ring and element
 
 **Syntax:** `visual="ring-offset:[size]"`
 
-* `0`: No offset (`--ring-offset: 0px;`)
-* `2`: 2px offset (`--ring-offset: 2px;`)
-* `4`: 4px offset (`--ring-offset: 4px;`)
+* `0`: No offset (`--ss-ring-offset-width: 0px;`)
+* `2`: 2px offset (`--ss-ring-offset-width: 2px;`)
+* `4`: 4px offset (`--ss-ring-offset-width: 4px;`)
 
 ## scroll-behavior
 > Set scroll behavior
@@ -1772,6 +1794,17 @@ export default {
 * `break-all`: Break all (`word-break: break-all;`)
 * `break-keep`: Keep all (`word-break: keep-all;`)
 
+## writing-mode
+> Set writing direction for RTL/vertical text
+
+**Syntax:** `visual="writing-mode:[value]"`
+
+* `horizontal-tb`: Left to right (`writing-mode: horizontal-tb;`)
+* `vertical-rl`: Top to bottom RTL (`writing-mode: vertical-rl;`)
+* `vertical-lr`: Top to bottom LTR (`writing-mode: vertical-lr;`)
+* `sideways-rl`: Sideways RTL (`writing-mode: sideways-rl;`)
+* `sideways-lr`: Sideways LTR (`writing-mode: sideways-lr;`)
+
 ## z-index
 > Control stacking order
 

package/docs/reference/breakpoints.md

@@ -11,6 +11,7 @@ Complete reference for responsive breakpoints.
 | `tab:` | 768px | Tablet |
 | `lap:` | 1024px | Laptop |
 | `desk:` | 1280px | Desktop |
+| `print:` | print | Print media |
 
 ## Tailwind Compatibility
 
@@ -44,6 +45,7 @@ SenangStart supports Tailwind CSS default breakpoints using the `tw-` prefix.
 @media (min-width: 768px) { /* tab: */ }
 @media (min-width: 1024px) { /* lap: */ }
 @media (min-width: 1280px) { /* desk: */ }
+@media print { /* print: */ }
 ```
 
 ## Usage
@@ -76,6 +78,18 @@ SenangStart supports Tailwind CSS default breakpoints using the `tw-` prefix.
 </h1>
 ```
 
+### Print Styles
+
+```html
+<div space="hidden print:block p:medium bg:white">
+  Printed only content
+</div>
+
+<button visual="hidden print:inline border:w-thin border:dark">
+  Print this page
+</button>
+```
+
 ## Mobile-First Approach
 
 SenangStart uses mobile-first responsive design:

package/docs/reference/visual/border-radius.md

@@ -1,10 +1,10 @@
 # Border Radius
 
-Set border radius
+Set border radius for all corners or specific corners
 
 ## Syntax
 ```
-visual="rounded:[value]"
+visual="rounded:[value]" | visual="rounded-{t|b|l|r|tl|tr|bl|br}:[value]"
 ```
 
 ## Values
@@ -22,6 +22,8 @@ visual="rounded:[value]"
 ```html
 <div visual="rounded:medium">Rounded corners</div>
 <div visual="rounded:round">Pill shape</div>
+<div visual="rounded-t:medium">Top rounded</div>
+<div visual="rounded-tl:big rounded-br:big">Opposite corners</div>
 ```
 
 ## Preview
@@ -33,10 +35,10 @@ visual="rounded:[value]"
 <div layout="flex col" space="g:medium">
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="rounded:medium"</code> - Round element corners from subtle to pill-shaped</p>
 <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>
 </div>
 
@@ -45,10 +47,10 @@ visual="rounded:[value]"
 
 ```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>
 ```
 
@@ -56,6 +58,44 @@ visual="rounded:[value]"
 
 </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">
+
+### Directional Border Radius
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="rounded-t:medium"</code> - Round specific corners for unique shapes</p>
+<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>
+</div>
+
+<details>
+<summary>View Code</summary>
+
+```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>
+```
+
+</details>
+
+</div>
+
+## Arbitrary Values
+
+Supports custom values using bracket syntax:
+
+```html
+<div visual="border:[custom-value]">Custom</div>
+```
+
 ## Notes
 
 > [!TIP]

package/docs/reference/visual/contain.md

@@ -0,0 +1,57 @@
+# Contain
+
+Isolate element rendering for performance
+
+## Syntax
+```
+visual="contain:[value]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `none` | `contain: none` | No containment |
+| `strict` | `contain: strict` | Full containment |
+| `content` | `contain: content` | Content containment |
+| `size` | `contain: size` | Size containment |
+| `layout` | `contain: layout` | Layout containment |
+| `style` | `contain: style` | Style containment |
+| `paint` | `contain: paint` | Paint containment |
+
+## Examples
+
+```html
+<div visual="contain:strict">Isolated rendering</div>
+<div visual="contain:content">Content isolation</div>
+```
+
+## 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">
+
+### Contain
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="contain:strict"</code> - Isolate element from rest of page for performance</p>
+<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>
+</div>
+
+<details>
+<summary>View Code</summary>
+
+```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>
+```
+
+</details>
+
+</div>

package/docs/reference/visual/content-visibility.md

@@ -0,0 +1,53 @@
+# Content Visibility
+
+Optimize rendering by skipping off-screen content
+
+## Syntax
+```
+visual="content-visibility:[value]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `visible` | `content-visibility: visible` | Render all content |
+| `auto` | `content-visibility: auto` | Skip when off-screen |
+| `hidden` | `content-visibility: hidden` | Never render off-screen |
+
+## Examples
+
+```html
+<section visual="content-visibility:auto">Large list</section>
+<div visual="content-visibility:hidden">Hidden until needed</div>
+```
+
+## 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">
+
+### Content Visibility
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="content-visibility:auto"</code> - Performance optimization for off-screen content</p>
+<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>
+</div>
+
+<details>
+<summary>View Code</summary>
+
+```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>
+```
+
+</details>
+
+</div>

package/docs/reference/visual/placeholder-color.md

@@ -0,0 +1,92 @@
+# Placeholder Color
+
+Set the color of placeholder text in form inputs
+
+## Syntax
+
+Placeholder color is configured via theme customization in `senangstart.config.js`:
+
+```javascript
+theme: {
+  placeholder: '#9ca3af'  // Default gray color
+}
+```
+
+## Theme Configuration
+
+Set a custom placeholder color:
+
+```javascript
+// senangstart.config.js
+export default {
+  theme: {
+    placeholder: '#94a3b8'  // Custom slate gray
+  }
+}
+```
+
+## Examples
+
+```html
+<input type="text" placeholder="Enter your name">
+<input type="email" placeholder="you@example.com">
+<textarea placeholder="Your message..."></textarea>
+```
+
+## 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">
+
+### Placeholder Color
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm">Placeholder text color is automatically applied via Preflight</p>
+<div layout="flex col" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <input type="text" placeholder="Enter your name" space="p:small border:neutral-300 border-w:thin rounded:small">
+  <input type="email" placeholder="you@example.com" space="p:small border:neutral-300 border-w:thin rounded:small">
+  <textarea placeholder="Your message..." space="p:small border:neutral-300 border-w:thin rounded:small"></textarea>
+</div>
+</div>
+
+<details>
+<summary>View Code</summary>
+
+```html
+<div layout="flex col" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <input type="text" placeholder="Enter your name" space="p:small border:neutral-300 border-w:thin rounded:small">
+  <input type="email" placeholder="you@example.com" space="p:small border:neutral-300 border-w:thin rounded:small">
+  <textarea placeholder="Your message..." space="p:small border:neutral-300 border-w:thin rounded:small"></textarea>
+</div>
+```
+
+</details>
+
+</div>
+
+## Dark Mode Support
+
+Placeholder color automatically adapts to dark mode:
+
+```javascript
+theme: {
+  placeholder: '#9ca3af',  // Light mode
+  colors: {
+    'neutral-400': '#9ca3af'  // Used in dark mode
+  }
+}
+```
+
+## Browser Support
+
+The `::placeholder` pseudo-element is supported in:
+- Chrome 57+
+- Firefox 51+
+- Safari 10.1+
+- Edge 12+
+
+## Notes
+
+- Placeholder color is applied globally via Preflight CSS
+- You can customize the color in your theme configuration
+- Use neutral tones for better readability
+- Avoid using white or black for contrast issues

package/docs/reference/visual/ring-color.md

@@ -11,8 +11,8 @@ visual="ring-color:[color]"
 
 | Value | CSS Output | Description |
 |-------|------------|-------------|
-| `primary` | `--ring-color: var(--c-primary)` | Primary ring color |
-| `blue-500` | `--ring-color: var(--c-blue-500)` | Blue ring color |
+| `primary` | `--ss-ring-color: var(--c-primary)` | Primary ring color |
+| `blue-500` | `--ss-ring-color: var(--c-blue-500)` | Blue ring color |
 
 ## Examples
 

package/docs/reference/visual/ring-offset.md

@@ -11,9 +11,9 @@ visual="ring-offset:[size]"
 
 | Value | CSS Output | Description |
 |-------|------------|-------------|
-| `0` | `--ring-offset: 0px` | No offset |
-| `2` | `--ring-offset: 2px` | 2px offset |
-| `4` | `--ring-offset: 4px` | 4px offset |
+| `0` | `--ss-ring-offset-width: 0px` | No offset |
+| `2` | `--ss-ring-offset-width: 2px` | 2px offset |
+| `4` | `--ss-ring-offset-width: 4px` | 4px offset |
 
 ## Examples
 

package/docs/reference/visual/ring.md

@@ -12,11 +12,11 @@ visual="ring:[size]"
 | Value | CSS Output | Description |
 |-------|------------|-------------|
 | `none` | `box-shadow: 0 0 0 0 transparent` | No ring |
-| `thin` | `box-shadow: 0 0 0 1px var(--ring-color)` | Thin ring (1px) |
-| `regular` | `box-shadow: 0 0 0 2px var(--ring-color)` | Regular ring (2px) |
-| `small` | `box-shadow: 0 0 0 4px var(--ring-color)` | Small ring (4px) |
-| `medium` | `box-shadow: 0 0 0 6px var(--ring-color)` | Medium ring (6px) |
-| `big` | `box-shadow: 0 0 0 8px var(--ring-color)` | Big ring (8px) |
+| `thin` | `box-shadow: var(--ring-inset) 0 0 0 1px var(--ss-ring-color)` | Thin ring (1px) |
+| `regular` | `box-shadow: var(--ring-inset) 0 0 0 2px var(--ss-ring-color)` | Regular ring (2px) |
+| `small` | `box-shadow: var(--ring-inset) 0 0 0 4px var(--ss-ring-color)` | Small ring (4px) |
+| `medium` | `box-shadow: var(--ring-inset) 0 0 0 6px var(--ss-ring-color)` | Medium ring (6px) |
+| `big` | `box-shadow: var(--ring-inset) 0 0 0 8px var(--ss-ring-color)` | Big ring (8px) |
 
 ## Examples
 

package/docs/reference/visual/writing-mode.md

@@ -0,0 +1,53 @@
+# Writing Mode
+
+Set writing direction for RTL/vertical text
+
+## Syntax
+```
+visual="writing-mode:[value]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `horizontal-tb` | `writing-mode: horizontal-tb` | Left to right |
+| `vertical-rl` | `writing-mode: vertical-rl` | Top to bottom RTL |
+| `vertical-lr` | `writing-mode: vertical-lr` | Top to bottom LTR |
+| `sideways-rl` | `writing-mode: sideways-rl` | Sideways RTL |
+| `sideways-lr` | `writing-mode: sideways-lr` | Sideways LTR |
+
+## Examples
+
+```html
+<div visual="writing-mode:vertical-rl">Vertical text</div>
+<div visual="writing-mode:horizontal-tb">Horizontal text</div>
+```
+
+## 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">
+
+### Writing Mode
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="writing-mode:vertical-rl"</code> - Control text direction and orientation</p>
+<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>
+</div>
+
+<details>
+<summary>View Code</summary>
+
+```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>
+```
+
+</details>
+
+</div>

package/docs/reference/visual.md

@@ -131,6 +131,7 @@ The `visual` attribute controls colors, textures, typography, and appearance.
 - [Color Scheme](./visual/color-scheme) - `color-scheme:light`, `color-scheme:dark`
 - [Cursor](./visual/cursor) - `cursor:pointer`, `cursor:wait`, `cursor:grab`
 - [Field Sizing](./visual/field-sizing) - `field-sizing:content`
+- [Placeholder Color](./visual/placeholder-color) - Theme-configured placeholder text color
 - [Pointer Events](./visual/pointer-events) - `pointer-events:none`, `pointer-events:auto`
 - [Resize](./visual/resize) - `resize`, `resize:none`, `resize-x`, `resize-y`
 - [Scroll Behavior](./visual/scroll-behavior) - `scroll:smooth`, `scroll:auto`
@@ -154,6 +155,12 @@ The `visual` attribute controls colors, textures, typography, and appearance.
 
 - [Forced Color Adjust](./visual/forced-color-adjust) - `forced-color-adjust:none`, `forced-color-adjust:auto`
 
+## Performance
+
+- [Content Visibility](./visual/content-visibility) - `content-visibility:auto`, `content-visibility:hidden`
+- [Contain](./visual/contain) - `contain:strict`, `contain:content`, `contain:size`
+- [Writing Mode](./visual/writing-mode) - `writing-mode:horizontal-tb`, `writing-mode:vertical-rl`
+
 ## Quick Example
 
 ```html