@bookklik/senangstart-css 0.2.4 → 0.2.6

package/docs/reference/visual/filter-sepia.md

@@ -31,8 +31,8 @@ visual="sepia:[value]"
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="sepia:full"</code> - Apply vintage sepia tone</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" style="filter: sepia(50%);">partial</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="filter: sepia(100%);">full</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small sepia:partial">partial</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small sepia:full">full</div>
 </div>
 </div>
 
@@ -42,8 +42,8 @@ visual="sepia:[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:small">none</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="filter: sepia(50%);">partial</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="filter: sepia(100%);">full</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small sepia:partial">partial</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small sepia:full">full</div>
 </div>
 ```
 

package/docs/reference/visual/font-family.md

@@ -29,7 +29,7 @@ visual="font:[family]"
 
 <div layout="flex col" space="g:medium">
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="font:sans"</code> - Choose between sans, serif, or mono</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="font:sans">Sans-serif font</span>
   <span visual="font:serif">Serif font</span>
   <span visual="font:mono">Monospace font</span>
@@ -40,7 +40,7 @@ visual="font:[family]"
 <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="font:sans">Sans-serif font</span>
   <span visual="font:serif">Serif font</span>
   <span visual="font:mono">Monospace font</span>

package/docs/reference/visual/gradient-from.md

@@ -1,57 +1,57 @@
-# Gradient From
-
-Set gradient start color
-
-## Syntax
-```
-visual="from:[color]"
-```
-
-## Values
-
-| Value | CSS Output | Description |
-|-------|------------|-------------|
-| `primary` | `--tw-gradient-from: var(--c-primary); --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)` | Start from primary |
-| `blue-500` | `--tw-gradient-from: var(--c-blue-500); --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)` | Start from blue |
-
-## Examples
-
-```html
-<div visual="bg-image:gradient-to-r from:blue-500 to:purple-500">Gradient</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">
-
-### Gradient From
-
-<div layout="flex col" space="g:medium">
-  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="from:blue-500"</code> - Set the starting color of a gradient</p>
-<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div space="p:medium" visual="bg-image:gradient-to-r from:blue-500 to:purple-500 text:white rounded:small">from:blue-500 to:purple-500</div>
-  <div space="p:medium" visual="bg-image:gradient-to-r from:emerald-500 to:blue-500 text:white rounded:small">from:emerald-500 to:blue-500</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:medium" visual="bg-image:gradient-to-r from:blue-500 to:purple-500 text:white rounded:small">from:blue-500 to:purple-500</div>
-  <div space="p:medium" visual="bg-image:gradient-to-r from:emerald-500 to:blue-500 text:white rounded:small">from:emerald-500 to:blue-500</div>
-</div>
-```
-
-</details>
-
-</div>
-
-## Arbitrary Values
-
-Supports custom values using bracket syntax:
-
-```html
-<div visual="gradient:[custom-value]">Custom</div>
-```
+# Gradient From
+
+Set gradient start color
+
+## Syntax
+```
+visual="from:[color]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `primary` | `--tw-gradient-from: var(--c-primary); --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)` | Start from primary |
+| `blue-500` | `--tw-gradient-from: var(--c-blue-500); --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)` | Start from blue |
+
+## Examples
+
+```html
+<div visual="bg-image:gradient-to-r from:blue-500 to:purple-500">Gradient</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">
+
+### Gradient From
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="from:blue-500"</code> - Set the starting color of a gradient</p>
+<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:medium" visual="bg-image:gradient-to-r from:blue-500 to:purple-500 text:white rounded:small">from:blue-500 to:purple-500</div>
+  <div space="p:medium" visual="bg-image:gradient-to-r from:emerald-500 to:blue-500 text:white rounded:small">from:emerald-500 to:blue-500</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:medium" visual="bg-image:gradient-to-r from:blue-500 to:purple-500 text:white rounded:small">from:blue-500 to:purple-500</div>
+  <div space="p:medium" visual="bg-image:gradient-to-r from:emerald-500 to:blue-500 text:white rounded:small">from:emerald-500 to:blue-500</div>
+</div>
+```
+
+</details>
+
+</div>
+
+## Arbitrary Values
+
+Supports custom values using bracket syntax:
+
+```html
+<div visual="gradient:[custom-value]">Custom</div>
+```

package/docs/reference/visual/gradient-to.md

@@ -1,57 +1,57 @@
-# Gradient To
-
-Set gradient end color
-
-## Syntax
-```
-visual="to:[color]"
-```
-
-## Values
-
-| Value | CSS Output | Description |
-|-------|------------|-------------|
-| `purple-500` | `--tw-gradient-to: var(--c-purple-500)` | End at purple |
-| `pink-500` | `--tw-gradient-to: var(--c-pink-500)` | End at pink |
-
-## Examples
-
-```html
-<div visual="bg-image:gradient-to-r from:blue-500 to:purple-500">Blue to purple</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">
-
-### Gradient To
-
-<div layout="flex col" space="g:medium">
-  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="to:purple-500"</code> - Set the ending color of a gradient</p>
-<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div space="p:medium" visual="bg-image:gradient-to-r from:blue-500 to:purple-500 text:white rounded:small">to:purple-500</div>
-  <div space="p:medium" visual="bg-image:gradient-to-r from:blue-500 to:pink-500 text:white rounded:small">to:pink-500</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:medium" visual="bg-image:gradient-to-r from:blue-500 to:purple-500 text:white rounded:small">to:purple-500</div>
-  <div space="p:medium" visual="bg-image:gradient-to-r from:blue-500 to:pink-500 text:white rounded:small">to:pink-500</div>
-</div>
-```
-
-</details>
-
-</div>
-
-## Arbitrary Values
-
-Supports custom values using bracket syntax:
-
-```html
-<div visual="gradient:[custom-value]">Custom</div>
-```
+# Gradient To
+
+Set gradient end color
+
+## Syntax
+```
+visual="to:[color]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `purple-500` | `--tw-gradient-to: var(--c-purple-500)` | End at purple |
+| `pink-500` | `--tw-gradient-to: var(--c-pink-500)` | End at pink |
+
+## Examples
+
+```html
+<div visual="bg-image:gradient-to-r from:blue-500 to:purple-500">Blue to purple</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">
+
+### Gradient To
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="to:purple-500"</code> - Set the ending color of a gradient</p>
+<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:medium" visual="bg-image:gradient-to-r from:blue-500 to:purple-500 text:white rounded:small">to:purple-500</div>
+  <div space="p:medium" visual="bg-image:gradient-to-r from:blue-500 to:pink-500 text:white rounded:small">to:pink-500</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:medium" visual="bg-image:gradient-to-r from:blue-500 to:purple-500 text:white rounded:small">to:purple-500</div>
+  <div space="p:medium" visual="bg-image:gradient-to-r from:blue-500 to:pink-500 text:white rounded:small">to:pink-500</div>
+</div>
+```
+
+</details>
+
+</div>
+
+## Arbitrary Values
+
+Supports custom values using bracket syntax:
+
+```html
+<div visual="gradient:[custom-value]">Custom</div>
+```

package/docs/reference/visual/gradient-via.md

@@ -1,54 +1,54 @@
-# Gradient Via
-
-Set gradient middle color
-
-## Syntax
-```
-visual="via:[color]"
-```
-
-## Values
-
-| Value | CSS Output | Description |
-|-------|------------|-------------|
-| `purple-500` | `--tw-gradient-via: var(--c-purple-500); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to)` | Via purple |
-
-## Examples
-
-```html
-<div visual="bg-image:gradient-to-r from:blue-500 via:purple-500 to:pink-500">Three-color gradient</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">
-
-### Gradient Via
-
-<div layout="flex col" space="g:medium">
-  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="via:purple-500"</code> - Add a middle color stop to gradients</p>
-<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div space="p:medium" visual="bg-image:gradient-to-r from:blue-500 via:purple-500 to:pink-500 text:white rounded:small">from:blue via:purple to:pink</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:medium" visual="bg-image:gradient-to-r from:blue-500 via:purple-500 to:pink-500 text:white rounded:small">from:blue via:purple to:pink</div>
-</div>
-```
-
-</details>
-
-</div>
-
-## Arbitrary Values
-
-Supports custom values using bracket syntax:
-
-```html
-<div visual="gradient:[custom-value]">Custom</div>
-```
+# Gradient Via
+
+Set gradient middle color
+
+## Syntax
+```
+visual="via:[color]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `purple-500` | `--tw-gradient-via: var(--c-purple-500); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to)` | Via purple |
+
+## Examples
+
+```html
+<div visual="bg-image:gradient-to-r from:blue-500 via:purple-500 to:pink-500">Three-color gradient</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">
+
+### Gradient Via
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="via:purple-500"</code> - Add a middle color stop to gradients</p>
+<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:medium" visual="bg-image:gradient-to-r from:blue-500 via:purple-500 to:pink-500 text:white rounded:small">from:blue via:purple to:pink</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:medium" visual="bg-image:gradient-to-r from:blue-500 via:purple-500 to:pink-500 text:white rounded:small">from:blue via:purple to:pink</div>
+</div>
+```
+
+</details>
+
+</div>
+
+## Arbitrary Values
+
+Supports custom values using bracket syntax:
+
+```html
+<div visual="gradient:[custom-value]">Custom</div>
+```

package/docs/reference/visual/letter-spacing.md

@@ -32,7 +32,7 @@ visual="tracking:[value]"
 
 <div layout="flex col" space="g:medium">
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="tracking:wide"</code> - Adjust spacing between characters</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="tracking:tighter">tighter spacing</span>
   <span visual="tracking:normal">normal spacing</span>
   <span visual="tracking:widest">widest spacing</span>
@@ -43,7 +43,7 @@ visual="tracking:[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="tracking:tighter">tighter spacing</span>
   <span visual="tracking:normal">normal spacing</span>
   <span visual="tracking:widest">widest spacing</span>

package/docs/reference/visual/line-clamp.md

@@ -30,7 +30,7 @@ visual="line-clamp:[value]"
 
 <div layout="flex col" space="g:medium">
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="line-clamp:2"</code> - Limit text to specific lines</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 line-clamp:1">This is a very long text that will be clamped to just one single line with ellipsis.</div>
   <div space="p:small w:[200px]" visual="bg:success text:white rounded:small line-clamp:2">This is a very long text that will be clamped to exactly two lines with ellipsis at the end.</div>
   <div space="p:small w:[200px]" visual="bg:warning text:black rounded:small line-clamp:3">This is a very long text that will be clamped to exactly three lines with ellipsis shown at the end of the third line.</div>
@@ -41,7 +41,7 @@ visual="line-clamp:[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 line-clamp:1">This is a very long text that will be clamped to just one single line with ellipsis.</div>
   <div space="p:small w:[200px]" visual="bg:success text:white rounded:small line-clamp:2">This is a very long text that will be clamped to exactly two lines with ellipsis at the end.</div>
   <div space="p:small w:[200px]" visual="bg:warning text:black rounded:small line-clamp:3">This is a very long text that will be clamped to exactly three lines with ellipsis shown at the end of the third line.</div>

package/docs/reference/visual/line-height.md

@@ -32,7 +32,7 @@ visual="leading:[value]"
 
 <div layout="flex col" space="g:medium">
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="leading:relaxed"</code> - Control vertical spacing between lines</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">
   <p space="m:0" visual="leading:tight">Tight leading<br>for headings</p>
   <p space="m:0" visual="leading:normal">Normal leading<br>for body text</p>
   <p space="m:0" visual="leading:loose">Loose leading<br>for readability</p>
@@ -43,7 +43,7 @@ visual="leading:[value]"
 <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">
   <p space="m:0" visual="leading:tight">Tight leading<br>for headings</p>
   <p space="m:0" visual="leading:normal">Normal leading<br>for body text</p>
   <p space="m:0" visual="leading:loose">Loose leading<br>for readability</p>

package/docs/reference/visual/outline.md

@@ -22,7 +22,7 @@ visual="outline:[color]"
 <div layout="flex col" space="g:medium">
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="outline:primary"</code> - Outline does not affect layout</p>
 <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <button space="p:small" visual="outline:primary bg:white dark:bg:neutral-800 rounded:small" style="outline-width: 2px; outline-style: solid;">outline:primary</button>
+  <button space="p:small" visual="outline:primary bg:white dark:bg:neutral-800 rounded:small">outline:primary</button>
 </div>
 </div>
 
@@ -31,7 +31,7 @@ visual="outline:[color]"
 
 ```html
 <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <button space="p:small" visual="outline:primary bg:white dark:bg:neutral-800 rounded:small" style="outline-width: 2px; outline-style: solid;">outline:primary</button>
+  <button space="p:small" visual="outline:primary bg:white dark:bg:neutral-800 rounded:small">outline:primary</button>
 </div>
 ```
 

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

@@ -0,0 +1,29 @@
+# Ring Color
+
+Set ring color
+
+## Syntax
+```
+visual="ring-color:[color]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `primary` | `--ring-color: var(--c-primary)` | Primary ring color |
+| `blue-500` | `--ring-color: var(--c-blue-500)` | Blue ring color |
+
+## Examples
+
+```html
+<button visual="ring:small ring-color:primary">Colored ring</button>
+```
+
+## Arbitrary Values
+
+Supports custom values using bracket syntax:
+
+```html
+<div visual="ring:[custom-value]">Custom</div>
+```

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

@@ -0,0 +1,30 @@
+# Ring Offset
+
+Add gap between ring and element
+
+## Syntax
+```
+visual="ring-offset:[size]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `0` | `--ring-offset: 0px` | No offset |
+| `2` | `--ring-offset: 2px` | 2px offset |
+| `4` | `--ring-offset: 4px` | 4px offset |
+
+## Examples
+
+```html
+<button visual="ring:small ring-offset:2 ring-color:primary">With offset</button>
+```
+
+## Arbitrary Values
+
+Supports custom values using bracket syntax:
+
+```html
+<div visual="ring:[custom-value]">Custom</div>
+```

package/docs/reference/visual/ring.md

@@ -0,0 +1,62 @@
+# Ring
+
+Add focus ring around element using box-shadow
+
+## Syntax
+```
+visual="ring:[size]"
+```
+
+## Values
+
+| 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) |
+
+## Examples
+
+```html
+<button visual="focus-visible:ring:small ring-color:primary">Focus me</button>
+<input visual="focus:ring:regular ring-color:blue-500">
+```
+
+## 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">
+
+### Focus Ring
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="focus-visible:ring:small"</code> - Ring appears on keyboard focus (try Tab key)</p>
+<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <button space="p:small p-x:medium" visual="bg:primary text:white rounded:small focus-visible:ring:small ring-color:blue-300">Tab to me</button>
+  <button space="p:small p-x:medium" visual="bg:white dark:bg:neutral-800 border:neutral-300 border-w:thin rounded:small focus-visible:ring:small ring-color:primary">Or me</button>
+</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">
+  <button space="p:small p-x:medium" visual="bg:primary text:white rounded:small focus-visible:ring:small ring-color:blue-300">Tab to me</button>
+  <button space="p:small p-x:medium" visual="bg:white dark:bg:neutral-800 border:neutral-300 border-w:thin rounded:small focus-visible:ring:small ring-color:primary">Or me</button>
+</div>
+```
+
+</details>
+
+</div>
+
+## Arbitrary Values
+
+Supports custom values using bracket syntax:
+
+```html
+<div visual="ring:[custom-value]">Custom</div>
+```

package/docs/reference/visual/stroke-width.md

@@ -30,9 +30,9 @@ visual="stroke-w:[value]"
 <div layout="flex col" space="g:medium">
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="stroke-w:2"</code> - Control SVG stroke thickness</p>
 <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <svg visual="stroke:primary fill:none" width="40" height="40" viewBox="0 0 24 24" style="stroke-width: 1px;"><circle cx="12" cy="12" r="10"/></svg>
-  <svg visual="stroke:primary fill:none" width="40" height="40" viewBox="0 0 24 24" style="stroke-width: 2px;"><circle cx="12" cy="12" r="10"/></svg>
-  <svg visual="stroke:primary fill:none" width="40" height="40" viewBox="0 0 24 24" style="stroke-width: 3px;"><circle cx="12" cy="12" r="10"/></svg>
+  <svg visual="stroke:primary fill:none stroke-w:1" width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>
+  <svg visual="stroke:primary fill:none stroke-w:2" width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>
+  <svg visual="stroke:primary fill:none stroke-w:3" width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>
 </div>
 </div>
 
@@ -41,9 +41,9 @@ visual="stroke-w:[value]"
 
 ```html
 <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <svg visual="stroke:primary fill:none" width="40" height="40" viewBox="0 0 24 24" style="stroke-width: 1px;"><circle cx="12" cy="12" r="10"/></svg>
-  <svg visual="stroke:primary fill:none" width="40" height="40" viewBox="0 0 24 24" style="stroke-width: 2px;"><circle cx="12" cy="12" r="10"/></svg>
-  <svg visual="stroke:primary fill:none" width="40" height="40" viewBox="0 0 24 24" style="stroke-width: 3px;"><circle cx="12" cy="12" r="10"/></svg>
+  <svg visual="stroke:primary fill:none stroke-w:1" width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>
+  <svg visual="stroke:primary fill:none stroke-w:2" width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>
+  <svg visual="stroke:primary fill:none stroke-w:3" width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>
 </div>
 ```
 

package/docs/reference/visual/stroke.md

@@ -29,8 +29,8 @@ visual="stroke:[color]"
 <div layout="flex col" space="g:medium">
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="stroke:primary"</code> - Stroke SVG elements with color</p>
 <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <svg visual="stroke:primary fill:none" width="40" height="40" viewBox="0 0 24 24" style="stroke-width: 2px;"><circle cx="12" cy="12" r="10"/></svg>
-  <svg visual="stroke:danger fill:none" width="40" height="40" viewBox="0 0 24 24" style="stroke-width: 2px;"><circle cx="12" cy="12" r="10"/></svg>
+  <svg visual="stroke:primary fill:none stroke-w:2" width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>
+  <svg visual="stroke:danger fill:none stroke-w:2" width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>
 </div>
 </div>
 
@@ -39,8 +39,8 @@ visual="stroke:[color]"
 
 ```html
 <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <svg visual="stroke:primary fill:none" width="40" height="40" viewBox="0 0 24 24" style="stroke-width: 2px;"><circle cx="12" cy="12" r="10"/></svg>
-  <svg visual="stroke:danger fill:none" width="40" height="40" viewBox="0 0 24 24" style="stroke-width: 2px;"><circle cx="12" cy="12" r="10"/></svg>
+  <svg visual="stroke:primary fill:none stroke-w:2" width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>
+  <svg visual="stroke:danger fill:none stroke-w:2" width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>
 </div>
 ```