# @bookklik/senangstart-css
> Fluent Style Utilities for Humans and AI

## Docs
- [Documentation](https://bookklik-technologies.github.io/senangstart-css/guide)

## Source
- [Repository](https://github.com/bookklik-technologies/senangstart-css)


# Documentation Guides

# Framework Overview

SenangStart CSS is a utility-first framework that uses **Natural Adjectives** instead of abstract numbers.

## Core Philosophy
- **Natural Scale**: Sizes map to physical mental models (e.g., `tiny` = pebble/4px, `medium` = smartphone/16px, `giant` = door/64px).
- **Intent-First**: Describe *what* you want ("give it air" -> scale up), not pixels.
- **Tri-Attribute Syntax**: Separation of concerns into three attributes:
    1. `layout`: Structure & position (flex, grid, block, sticky).
    2. `space`: Sizing, padding, margin, gap.
    3. `visual`: Colors, typography, borders, shadows, effects.

## Syntax Reference

### 1. Layout Attribute
Controls internal flow and external positioning.
- **Flex**: `layout="flex col center"` (Flexbox, column direction, centered).
- **Grid**: `layout="grid"`
- **Position**: `layout="absolute z:top"`

### 2. Space Attribute
Controls dimensions and spacing using the Natural Scale.
- **Syntax**: `[breakpoint]:[property]:[scale]`
- **Properties**: `p` (padding), `m` (margin), `g` (gap), `w` (width), `h` (height).
- **Values**: 
    - `none` (0px)
    - `thin` (1px), `regular` (2px), `thick` (3px)
    - `tiny` (4px), `tiny-2x` (6px)
    - `small` (8px), `small-2x` (10px), `small-3x` (12px), `small-4x` (14px)
    - `medium` (16px), `medium-2x` (20px), `medium-3x` (24px), `medium-4x` (28px)
    - `large` (32px), `large-2x` (36px), `large-3x` (40px), `large-4x` (44px)
    - `big` (48px), `big-2x` (56px), `big-3x` (64px), `big-4x` (80px)
    - `giant` (96px), `giant-2x` (112px), `giant-3x` (128px), `giant-4x` (144px)
    - `vast` (160px), `vast-2x` (176px), `vast-3x` (192px), `vast-4x` (208px)
    - `vast-5x` (224px), `vast-6x` (240px), `vast-7x` (256px), `vast-8x` (288px)
    - `vast-9x` (320px), `vast-10x` (384px)
    - **Negative**: `space="m:-small m-x:-tw-4"` (Negative scale values).
    - **Arbitrary**: `space="w:[350px] m:[-10px]"`

### 3. Visual Attribute
Controls appearance.
- **Colors**: `bg:primary`, `text:white`, `border:grey`.
- **Typography**: `font:bold`, `text-size:big`.
- **Effects**: `rounded:medium`, `shadow:big`, `opacity:[0.5]`.

## Modifiers

### Responsive Prefixes
Mobile-first breakpoints:
- (default): 0px+
- `mob:`: 480px+ ("Large Mobile")
- `tab:`: 768px+ ("Tablet")
- `lap:`: 1024px+ ("Laptop")
- `desk:`: 1280px+ ("Desktop")

Example: `space="p:small tab:p:medium lap:p:big"`

### State Prefixes
- `hover:`: `visual="bg:primary hover:bg:primary-dark"`
- `focus:`: `visual="border:grey focus:border:brand"`
- `active:`, `disabled:`, `group-hover:`
- `dark:`: `visual="bg:white dark:bg:slate-900"`

## State Capabilities & Interaction

React to parent ("Group") or sibling ("Peer") states across all attributes.

### 1. Group Capabilities
Add these to the `layout` attribute of a parent element:
- `hoverable`: Adds `:hover` support.
- `focusable`: Adds `:focus-within` support.
- `pressable`: Adds `:active` support.
- `expandable`: Reacts to `[aria-expanded="true"]`.
- `selectable`: Reacts to `[aria-selected="true"]`.

**Example:**
```html
<div layout="flex hoverable" visual="bg:white">
  <p visual="text:grey hover:text:primary">Hover parent to change me</p>
</div>
```

### 2. Peer Interactions
Use `interact="[id]"` on the trigger and `listens="[id]"` on the receiver.

**Example:**
```html
<button layout="hoverable" interact="my-menu">Trigger</button>
<div layout="hidden hover:block" listens="my-menu">Target</div>
```

## Configuration
Use `senangstart.config.js` to override defaults.
```js
export default {
  theme: {
    colors: { brand: '#8B5CF6' },
    spacing: { huge: '256px' }
  }
}
```

# Utility Definitions

## accent-color
> Set accent color for form controls

**Syntax:** `visual="accent:[color]"`


## align-content
> Align content rows in multi-line flex container

**Syntax:** `layout="content:[value]"`

* `start`: Align to start (`align-content: flex-start;`)
* `end`: Align to end (`align-content: flex-end;`)
* `center`: Center content (`align-content: center;`)
* `between`: Space between rows (`align-content: space-between;`)
* `around`: Space around rows (`align-content: space-around;`)
* `evenly`: Even spacing (`align-content: space-evenly;`)
* `stretch`: Stretch rows (`align-content: stretch;`)

## align-items
> Align items along the cross axis

**Syntax:** `layout="items:[value]"`

* `start`: Align to start (`align-items: flex-start;`)
* `end`: Align to end (`align-items: flex-end;`)
* `center`: Center items (`align-items: center;`)
* `baseline`: Align to baseline (`align-items: baseline;`)
* `stretch`: Stretch items (`align-items: stretch;`)

## align-self
> Override alignment for a single item

**Syntax:** `layout="self:[value]"`

* `auto`: Use parent alignment (`align-self: auto;`)
* `start`: Align to start (`align-self: flex-start;`)
* `end`: Align to end (`align-self: flex-end;`)
* `center`: Center item (`align-self: center;`)
* `baseline`: Align to baseline (`align-self: baseline;`)
* `stretch`: Stretch item (`align-self: stretch;`)

## animation-builtin
> Apply built-in animations

**Syntax:** `visual="animate:[value]"`

* `none`: No animation (`animation: none;`)
* `spin`: Spinning (`animation: spin 1s linear infinite;`)
* `ping`: Ping effect
* `pulse`: Pulsing
* `bounce`: Bouncing (`animation: bounce 1s infinite;`)

## animation-delay
> Set animation delay

**Syntax:** `visual="animation-delay:[value]"`

* `instant`: 75ms delay (`animation-delay: 75ms;`)
* `quick`: 100ms delay (`animation-delay: 100ms;`)
* `fast`: 150ms delay (`animation-delay: 150ms;`)
* `normal`: 200ms delay (`animation-delay: 200ms;`)
* `slow`: 300ms delay (`animation-delay: 300ms;`)

## animation-direction
> Set animation direction

**Syntax:** `visual="animation-direction:[value]"`

* `normal`: Normal direction (`animation-direction: normal;`)
* `reverse`: Reverse direction (`animation-direction: reverse;`)
* `alternate`: Alternate direction (`animation-direction: alternate;`)
* `alternate-reverse`: Alternate reverse (`animation-direction: alternate-reverse;`)

## animation-duration
> Set animation duration

**Syntax:** `visual="animation-duration:[value]"`

* `instant`: 75ms (`animation-duration: 75ms;`)
* `quick`: 100ms (`animation-duration: 100ms;`)
* `fast`: 150ms (`animation-duration: 150ms;`)
* `normal`: 200ms (`animation-duration: 200ms;`)
* `slow`: 300ms (`animation-duration: 300ms;`)
* `slower`: 500ms (`animation-duration: 500ms;`)
* `lazy`: 700ms (`animation-duration: 700ms;`)

## animation-fill
> Set animation fill mode

**Syntax:** `visual="animation-fill:[value]"`

* `none`: No fill (`animation-fill-mode: none;`)
* `forwards`: Keep end state (`animation-fill-mode: forwards;`)
* `backwards`: Apply start state (`animation-fill-mode: backwards;`)
* `both`: Both directions (`animation-fill-mode: both;`)

## animation-iteration
> Set animation iteration count

**Syntax:** `visual="animation-iteration:[value]"`

* `1`: Once (`animation-iteration-count: 1;`)
* `infinite`: Forever (`animation-iteration-count: infinite;`)

## animation-play
> Control animation play state

**Syntax:** `visual="animation-play:[value]"`

* `running`: Animation running (`animation-play-state: running;`)
* `paused`: Animation paused (`animation-play-state: paused;`)

## appearance
> Control native appearance

**Syntax:** `visual="appearance:[value]"`

* `none`: Remove native styling (`appearance: none;`)
* `auto`: Default appearance (`appearance: auto;`)

## aspect-ratio
> Set element aspect ratio

**Syntax:** `layout="aspect:[value]"`

* `auto`: Natural aspect ratio (`aspect-ratio: auto;`)
* `square`: 1:1 square (`aspect-ratio: 1 / 1;`)
* `video`: 16:9 video (`aspect-ratio: 16 / 9;`)

## backdrop-blur
> Blur backdrop

**Syntax:** `visual="backdrop-blur:[value]"`

* `none`: No blur (`backdrop-filter: blur(0);`)
* `tiny`: Tiny blur (`backdrop-filter: blur(2px);`)
* `small`: Small blur (`backdrop-filter: blur(4px);`)
* `medium`: Medium blur (`backdrop-filter: blur(8px);`)
* `big`: Large blur (`backdrop-filter: blur(12px);`)
* `giant`: Giant blur (`backdrop-filter: blur(24px);`)
* `vast`: Vast blur (`backdrop-filter: blur(48px);`)

## backdrop-brightness
> Adjust backdrop brightness

**Syntax:** `visual="backdrop-brightness:[value]"`

* `dim`: 50% brightness (`backdrop-filter: brightness(0.5);`)
* `dark`: 75% brightness (`backdrop-filter: brightness(0.75);`)
* `normal`: Normal brightness (`backdrop-filter: brightness(1);`)
* `bright`: 125% brightness (`backdrop-filter: brightness(1.25);`)
* `vivid`: 150% brightness (`backdrop-filter: brightness(1.5);`)

## backdrop-contrast
> Adjust backdrop contrast

**Syntax:** `visual="backdrop-contrast:[value]"`

* `low`: Low contrast (`backdrop-filter: contrast(0.5);`)
* `reduced`: Reduced contrast (`backdrop-filter: contrast(0.75);`)
* `normal`: Normal contrast (`backdrop-filter: contrast(1);`)
* `high`: High contrast (`backdrop-filter: contrast(1.25);`)
* `max`: Maximum contrast (`backdrop-filter: contrast(1.5);`)

## backdrop-grayscale
> Apply grayscale to backdrop

**Syntax:** `visual="backdrop-grayscale:[value]"`

* `none`: No grayscale (`backdrop-filter: grayscale(0%);`)
* `partial`: 50% grayscale (`backdrop-filter: grayscale(50%);`)
* `full`: Full grayscale (`backdrop-filter: grayscale(100%);`)

## backdrop-hue-rotate
> Rotate backdrop hue

**Syntax:** `visual="backdrop-hue-rotate:[degrees]"`

* `0`: No rotation (`backdrop-filter: hue-rotate(0deg);`)
* `90`: 90° rotation (`backdrop-filter: hue-rotate(90deg);`)
* `180`: 180° rotation (`backdrop-filter: hue-rotate(180deg);`)

## backdrop-invert
> Invert backdrop colors

**Syntax:** `visual="backdrop-invert:[value]"`

* `none`: No inversion (`backdrop-filter: invert(0%);`)
* `partial`: 50% inversion (`backdrop-filter: invert(50%);`)
* `full`: Full inversion (`backdrop-filter: invert(100%);`)

## backdrop-opacity
> Set backdrop opacity

**Syntax:** `visual="backdrop-opacity:[value]"`

* `0`: Transparent (`backdrop-filter: opacity(0);`)
* `50`: 50% opacity (`backdrop-filter: opacity(0.5);`)
* `100`: Fully opaque (`backdrop-filter: opacity(1);`)

## backdrop-saturate
> Adjust backdrop saturation

**Syntax:** `visual="backdrop-saturate:[value]"`

* `none`: Desaturated (`backdrop-filter: saturate(0);`)
* `low`: Low saturation (`backdrop-filter: saturate(0.5);`)
* `normal`: Normal saturation (`backdrop-filter: saturate(1);`)
* `high`: High saturation (`backdrop-filter: saturate(1.5);`)
* `vivid`: Very saturated (`backdrop-filter: saturate(2);`)

## backdrop-sepia
> Apply sepia to backdrop

**Syntax:** `visual="backdrop-sepia:[value]"`

* `none`: No sepia (`backdrop-filter: sepia(0%);`)
* `partial`: 50% sepia (`backdrop-filter: sepia(50%);`)
* `full`: Full sepia (`backdrop-filter: sepia(100%);`)

## background-attachment
> Set background attachment behavior

**Syntax:** `visual="bg-attachment:[value]"`

* `fixed`: Fixed background (`background-attachment: fixed;`)
* `local`: Local scroll (`background-attachment: local;`)
* `scroll`: Scroll with page (`background-attachment: scroll;`)

## background-blend-mode
> Set background blend mode

**Syntax:** `visual="bg-blend:[value]"`

* `normal`: Normal blend (`background-blend-mode: normal;`)
* `multiply`: Multiply blend (`background-blend-mode: multiply;`)
* `screen`: Screen blend (`background-blend-mode: screen;`)
* `overlay`: Overlay blend (`background-blend-mode: overlay;`)
* `darken`: Darken blend (`background-blend-mode: darken;`)
* `lighten`: Lighten blend (`background-blend-mode: lighten;`)

## background-clip
> Set background clipping area

**Syntax:** `visual="bg-clip:[value]"`

* `border`: Clip to border (`background-clip: border-box;`)
* `padding`: Clip to padding (`background-clip: padding-box;`)
* `content`: Clip to content (`background-clip: content-box;`)
* `text`: Clip to text

## background-color
> Set background color

**Syntax:** `visual="bg:[color]"`


## background-image
> Set background image or gradient

**Syntax:** `visual="bg-image:[value]"`

* `none`: No background image (`background-image: none;`)
* `gradient-to-t`: Gradient to top
* `gradient-to-b`: Gradient to bottom
* `gradient-to-l`: Gradient to left
* `gradient-to-r`: Gradient to right

## background-origin
> Set background positioning origin

**Syntax:** `visual="bg-origin:[value]"`

* `border`: Origin at border (`background-origin: border-box;`)
* `padding`: Origin at padding (`background-origin: padding-box;`)
* `content`: Origin at content (`background-origin: content-box;`)

## background-position
> Set background position

**Syntax:** `visual="bg-pos:[value]"`

* `center`: Center position (`background-position: center;`)
* `top`: Top position (`background-position: top;`)
* `bottom`: Bottom position (`background-position: bottom;`)
* `left`: Left position (`background-position: left;`)
* `right`: Right position (`background-position: right;`)
* `top-left`: Top left (`background-position: top left;`)
* `top-right`: Top right (`background-position: top right;`)
* `bottom-left`: Bottom left (`background-position: bottom left;`)
* `bottom-right`: Bottom right (`background-position: bottom right;`)

## background-repeat
> Set background repeat behavior

**Syntax:** `visual="bg-repeat:[value]"`

* `repeat`: Repeat both axes (`background-repeat: repeat;`)
* `no-repeat`: No repeat (`background-repeat: no-repeat;`)
* `repeat-x`: Repeat horizontally (`background-repeat: repeat-x;`)
* `repeat-y`: Repeat vertically (`background-repeat: repeat-y;`)
* `round`: Round repeat (`background-repeat: round;`)
* `space`: Spaced repeat (`background-repeat: space;`)

## background-size
> Set background size

**Syntax:** `visual="bg-size:[value]"`

* `auto`: Original size (`background-size: auto;`)
* `cover`: Cover container (`background-size: cover;`)
* `contain`: Contain in container (`background-size: contain;`)

## blend-modes
> Set mix blend mode

**Syntax:** `visual="mix-blend:[value]"`

* `normal`: Normal blend (`mix-blend-mode: normal;`)
* `multiply`: Multiply blend (`mix-blend-mode: multiply;`)
* `screen`: Screen blend (`mix-blend-mode: screen;`)
* `overlay`: Overlay blend (`mix-blend-mode: overlay;`)
* `darken`: Darken blend (`mix-blend-mode: darken;`)
* `lighten`: Lighten blend (`mix-blend-mode: lighten;`)

## border
> Set border color for all sides or specific sides

**Syntax:** `visual="border:[color]" | visual="border-{t|b|l|r|x|y}:[color]"`

* `primary`: Primary color border
* `gray-300`: Light gray border
* `danger`: Danger/error border

## border-collapse
> Control table border collapse

**Syntax:** `layout="border:[value]"`

* `collapse`: Collapse borders (`border-collapse: collapse;`)
* `separate`: Separate borders (`border-collapse: separate;`)

## border-radius
> Set border radius for all corners or specific corners

**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);`)
* `medium`: Medium radius (`border-radius: var(--r-medium);`)
* `big`: Large radius (`border-radius: var(--r-big);`)
* `round`: Fully round (`border-radius: var(--r-round);`)

## border-spacing
> Control spacing between table borders

**Syntax:** `layout="border-spacing:[value]"`

* `border-spacing`: All spacing (`border-spacing: {value};`)
* `border-spacing-x`: Horizontal spacing (`border-spacing: {value} 0;`)
* `border-spacing-y`: Vertical spacing (`border-spacing: 0 {value};`)

## border-style
> Set border style

**Syntax:** `visual="border-style:[value]"`

* `solid`: Solid border (`border-style: solid;`)
* `dashed`: Dashed border (`border-style: dashed;`)
* `dotted`: Dotted border (`border-style: dotted;`)
* `double`: Double border (`border-style: double;`)
* `none`: No border (`border-style: none;`)

## border-width
> Set border width for all sides or specific sides

**Syntax:** `visual="border-w:[value]" | visual="border-{t|b|l|r|x|y}-w:[value]"`

* `none`: No border (0px) (`border-width: var(--s-none);`)
* `thin`: Thin border (1px) (`border-width: var(--s-thin);`)
* `regular`: Standard border (2px) (`border-width: var(--s-regular);`)
* `thick`: Thick border (3px) (`border-width: var(--s-thick);`)

## box-shadow
> Add box shadow

**Syntax:** `visual="shadow:[value]"`

* `none`: No shadow (`box-shadow: var(--shadow-none);`)
* `small`: Small shadow (`box-shadow: var(--shadow-small);`)
* `medium`: Medium shadow (`box-shadow: var(--shadow-medium);`)
* `big`: Large shadow (`box-shadow: var(--shadow-big);`)
* `giant`: Giant shadow (`box-shadow: var(--shadow-giant);`)

## box-sizing
> Control how width and height are calculated

**Syntax:** `layout="box:[value]"`

* `border`: Include padding and border in size (`box-sizing: border-box;`)
* `content`: Exclude padding and border (`box-sizing: content-box;`)

## caption-side
> Control table caption position

**Syntax:** `layout="caption:[value]"`

* `top`: Caption on top (`caption-side: top;`)
* `bottom`: Caption on bottom (`caption-side: bottom;`)

## caret-color
> Set text input caret color

**Syntax:** `visual="caret:[color]"`


## color-scheme
> Set preferred color scheme

**Syntax:** `visual="color-scheme:[value]"`

* `light`: Light mode (`color-scheme: light;`)
* `dark`: Dark mode (`color-scheme: dark;`)
* `normal`: System default (`color-scheme: normal;`)

## columns
> Create multi-column layouts

**Syntax:** `layout="cols:[value]"`

* `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

**Syntax:** `layout="container"`

* `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

**Syntax:** `visual="cursor:[value]"`

* `auto`: Auto cursor (`cursor: auto;`)
* `default`: Default cursor (`cursor: default;`)
* `pointer`: Pointer cursor (`cursor: pointer;`)
* `wait`: Wait cursor (`cursor: wait;`)
* `text`: Text cursor (`cursor: text;`)
* `move`: Move cursor (`cursor: move;`)
* `not-allowed`: Not allowed (`cursor: not-allowed;`)
* `grab`: Grab cursor (`cursor: grab;`)
* `grabbing`: Grabbing cursor (`cursor: grabbing;`)

## display
> Control the display type of elements

**Syntax:** `layout="[display-value]"`

* `flex`: Flexbox container (`display: flex;`)
* `inline-flex`: Inline flexbox container (`display: inline-flex;`)
* `grid`: Grid container (`display: grid;`)
* `inline-grid`: Inline grid container (`display: inline-grid;`)
* `block`: Block element (`display: block;`)
* `inline`: Inline block element (`display: inline-block;`)
* `hidden`: Hidden element (`display: none;`)

## divide
> Add borders between child elements

**Syntax:** `visual="divide:[color]" | visual="divide-{x|y}:[color]" | visual="divide-{x|y}:reverse"`

* `primary`: Primary color divider
* `gray-300`: Light gray divider
* `danger`: Danger/error divider

## divide-reverse
> Reverse border side for flex-reverse

**Syntax:** `visual="divide-{x|y}:reverse"`

* `divide-x:reverse`: Reverse X-axis divider (`--ss-divide-x-reverse: 1;`)
* `divide-y:reverse`: Reverse Y-axis divider (`--ss-divide-y-reverse: 1;`)

## divide-style
> Set divider style

**Syntax:** `visual="divide-style:[value]"`

* `solid`: Solid divider (`border-style: solid;`)
* `dashed`: Dashed divider (`border-style: dashed;`)
* `dotted`: Dotted divider (`border-style: dotted;`)
* `double`: Double divider (`border-style: double;`)
* `none`: No divider (`border-style: none;`)

## divide-width
> Set divider width

**Syntax:** `visual="divide-w:[value]" | visual="divide-{x|y}-w:[value]"`

* `none`: No divider (0px) (`border-width: var(--s-none);`)
* `thin`: Thin divider (1px) (`border-width: var(--s-thin);`)
* `regular`: Standard divider (2px) (`border-width: var(--s-regular);`)
* `thick`: Thick divider (3px) (`border-width: var(--s-thick);`)

## field-sizing
> Control form field sizing

**Syntax:** `visual="field-sizing:[value]"`

* `fixed`: Fixed size (`field-sizing: fixed;`)
* `content`: Size to content (`field-sizing: content;`)

## fill
> Set SVG fill color

**Syntax:** `visual="fill:[color]"`

* `none`: No fill (`fill: none;`)
* `current`: Current color (`fill: currentColor;`)

## filter-blur
> Apply blur filter

**Syntax:** `visual="blur:[value]"`

* `none`: No blur (`filter: blur(0);`)
* `tiny`: Tiny blur (`filter: blur(2px);`)
* `small`: Small blur (`filter: blur(4px);`)
* `medium`: Medium blur (`filter: blur(8px);`)
* `big`: Large blur (`filter: blur(12px);`)
* `giant`: Giant blur (`filter: blur(24px);`)
* `vast`: Vast blur (`filter: blur(48px);`)

## filter-brightness
> Adjust brightness

**Syntax:** `visual="brightness:[value]"`

* `dim`: 50% brightness (`filter: brightness(0.5);`)
* `dark`: 75% brightness (`filter: brightness(0.75);`)
* `normal`: Normal brightness (`filter: brightness(1);`)
* `bright`: 125% brightness (`filter: brightness(1.25);`)
* `vivid`: 150% brightness (`filter: brightness(1.5);`)

## filter-contrast
> Adjust contrast

**Syntax:** `visual="contrast:[value]"`

* `low`: Low contrast (`filter: contrast(0.5);`)
* `reduced`: Reduced contrast (`filter: contrast(0.75);`)
* `normal`: Normal contrast (`filter: contrast(1);`)
* `high`: High contrast (`filter: contrast(1.25);`)
* `max`: Maximum contrast (`filter: contrast(1.5);`)

## filter-drop-shadow
> Add drop shadow

**Syntax:** `visual="drop-shadow:[value]"`

* `none`: No shadow (`filter: drop-shadow(none);`)
* `tiny`: Tiny shadow (`filter: drop-shadow(0 1px 1px rgba(0,0,0,0.05));`)
* `small`: Small shadow (`filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));`)
* `medium`: Medium shadow (`filter: drop-shadow(0 4px 3px rgba(0,0,0,0.07));`)
* `big`: Large shadow (`filter: drop-shadow(0 10px 8px rgba(0,0,0,0.04));`)
* `giant`: Giant shadow

## filter-grayscale
> Apply grayscale filter

**Syntax:** `visual="grayscale:[value]"`

* `none`: No grayscale (`filter: grayscale(0%);`)
* `partial`: 50% grayscale (`filter: grayscale(50%);`)
* `full`: Full grayscale (`filter: grayscale(100%);`)

## filter-hue-rotate
> Rotate hue colors

**Syntax:** `visual="hue-rotate:[degrees]"`

* `0`: No rotation (`filter: hue-rotate(0deg);`)
* `90`: 90° rotation (`filter: hue-rotate(90deg);`)
* `180`: 180° rotation (`filter: hue-rotate(180deg);`)

## filter-invert
> Invert colors

**Syntax:** `visual="invert:[value]"`

* `none`: No inversion (`filter: invert(0%);`)
* `partial`: 50% inversion (`filter: invert(50%);`)
* `full`: Full inversion (`filter: invert(100%);`)

## filter-saturate
> Adjust saturation

**Syntax:** `visual="saturate:[value]"`

* `none`: Desaturated (`filter: saturate(0);`)
* `low`: Low saturation (`filter: saturate(0.5);`)
* `normal`: Normal saturation (`filter: saturate(1);`)
* `high`: High saturation (`filter: saturate(1.5);`)
* `vivid`: Very saturated (`filter: saturate(2);`)

## filter-sepia
> Apply sepia filter

**Syntax:** `visual="sepia:[value]"`

* `none`: No sepia (`filter: sepia(0%);`)
* `partial`: 50% sepia (`filter: sepia(50%);`)
* `full`: Full sepia (`filter: sepia(100%);`)

## flex
> Flex shorthand property

**Syntax:** `layout="flex:[value]"`

* `1`: Flex 1 (`flex: 1 1 0%;`)
* `auto`: Flex auto (`flex: 1 1 auto;`)
* `initial`: Initial flex (`flex: 0 1 auto;`)
* `none`: No flex (`flex: none;`)

## flex-basis
> Set initial size of flex item

**Syntax:** `layout="basis:[value]"`

* `auto`: Auto basis (`flex-basis: auto;`)
* `0`: Zero basis (`flex-basis: 0;`)

## flex-direction
> Set the direction of flex items

**Syntax:** `layout="[direction]"`

* `row`: Horizontal (default) (`flex-direction: row;`)
* `col`: Vertical (`flex-direction: column;`)
* `row-reverse`: Horizontal reversed (`flex-direction: row-reverse;`)
* `col-reverse`: Vertical reversed (`flex-direction: column-reverse;`)

## flex-items
> Control flex grow and shrink behavior

**Syntax:** `layout="[flex-item-value]"`

* `grow`: Allow item to grow (`flex-grow: 1;`)
* `grow-0`: Prevent growing (`flex-grow: 0;`)
* `shrink`: Allow item to shrink (`flex-shrink: 1;`)
* `shrink-0`: Prevent shrinking (`flex-shrink: 0;`)

## flex-wrap
> Control how flex items wrap

**Syntax:** `layout="[wrap-value]"`

* `wrap`: Allow wrapping (`flex-wrap: wrap;`)
* `nowrap`: Prevent wrapping (`flex-wrap: nowrap;`)
* `wrap-reverse`: Wrap in reverse (`flex-wrap: wrap-reverse;`)

## float-clear
> Control element floating and clearing

**Syntax:** `layout="float:[value]" or layout="clear:[value]"`

* `left`: Float left (`float: left;`)
* `right`: Float right (`float: right;`)
* `none`: No float (`float: none;`)

## font-family
> Set font family

**Syntax:** `visual="font:[family]"`

* `sans`: Sans-serif
* `serif`: Serif (`font-family: ui-serif, Georgia, serif;`)
* `mono`: Monospace (`font-family: ui-monospace, monospace;`)

## font-smoothing
> Control font smoothing

**Syntax:** `visual="[smoothing-value]"`

* `antialiased`: Antialiased
* `subpixel-antialiased`: Subpixel antialiased

## font-style
> Set font style

**Syntax:** `visual="[style-value]"`

* `italic`: Italic text (`font-style: italic;`)
* `not-italic`: Normal style (`font-style: normal;`)

## font-variant-numeric
> Control numeric font variants

**Syntax:** `visual="[variant-value]"`

* `normal-nums`: Normal numbers (`font-variant-numeric: normal;`)
* `ordinal`: Ordinal markers (`font-variant-numeric: ordinal;`)
* `slashed-zero`: Slashed zero (`font-variant-numeric: slashed-zero;`)
* `lining-nums`: Lining numbers (`font-variant-numeric: lining-nums;`)
* `oldstyle-nums`: Oldstyle numbers (`font-variant-numeric: oldstyle-nums;`)
* `proportional-nums`: Proportional numbers (`font-variant-numeric: proportional-nums;`)
* `tabular-nums`: Tabular numbers (`font-variant-numeric: tabular-nums;`)

## font-weight
> Set font weight

**Syntax:** `visual="font:[weight]"`

* `normal`: Normal weight (`font-weight: var(--fw-normal);`)
* `medium`: Medium weight (`font-weight: var(--fw-medium);`)
* `bold`: Bold weight (`font-weight: var(--fw-bold);`)

## forced-color-adjust
> Control forced colors mode behavior

**Syntax:** `visual="forced-color:[value]"`

* `auto`: Auto adjust (`forced-color-adjust: auto;`)
* `none`: No adjustment (`forced-color-adjust: none;`)

## gap
> Add gap between flex/grid items

**Syntax:** `space="g:[value]" or space="g-{axis}:[value]"`

* `undefined`: All gaps (`gap: var(--s-{value});`)
* `undefined`: Column gap (`column-gap: var(--s-{value});`)
* `undefined`: Row gap (`row-gap: var(--s-{value});`)

## gradient-from
> Set gradient start color

**Syntax:** `visual="from:[color]"`

* `primary`: Start from primary
* `blue-500`: Start from blue

## gradient-to
> Set gradient end color

**Syntax:** `visual="to:[color]"`

* `purple-500`: End at purple (`--tw-gradient-to: var(--c-purple-500);`)
* `pink-500`: End at pink (`--tw-gradient-to: var(--c-pink-500);`)

## gradient-via
> Set gradient middle color

**Syntax:** `visual="via:[color]"`

* `purple-500`: Via purple

## grid-auto-flow
> Control how auto-placed items flow in grid

**Syntax:** `layout="grid-flow:[value]"`

* `row`: Place by row (`grid-auto-flow: row;`)
* `col`: Place by column (`grid-auto-flow: column;`)
* `dense`: Dense packing (`grid-auto-flow: dense;`)
* `row-dense`: Row with dense (`grid-auto-flow: row dense;`)
* `col-dense`: Column with dense (`grid-auto-flow: column dense;`)

## grid-auto-sizing
> Control size of auto-generated grid tracks

**Syntax:** `layout="auto-cols:[value]" or layout="auto-rows:[value]"`

* `auto`: Auto size (`auto`)
* `min`: Minimum content (`min-content`)
* `max`: Maximum content (`max-content`)
* `fr`: Fractional unit (`minmax(0, 1fr)`)

## grid-column-span
> Span across grid columns

**Syntax:** `layout="col-span:[value]"`

* `1-12`: Span N columns (`grid-column: span {n} / span {n};`)
* `full`: Span all columns (`grid-column: 1 / -1;`)

## grid-columns
> Define grid template columns

**Syntax:** `layout="grid-cols:[value]"`

* `1-12`: N equal columns
* `none`: No columns defined (`grid-template-columns: none;`)
* `subgrid`: Use parent grid (`grid-template-columns: subgrid;`)

## grid-row-span
> Span across grid rows

**Syntax:** `layout="row-span:[value]"`

* `1-12`: Span N rows (`grid-row: span {n} / span {n};`)
* `full`: Span all rows (`grid-row: 1 / -1;`)

## grid-rows
> Define grid template rows

**Syntax:** `layout="grid-rows:[value]"`

* `1-12`: N equal rows (`grid-template-rows: repeat({n}, minmax(0, 1fr));`)
* `none`: No rows defined (`grid-template-rows: none;`)
* `subgrid`: Use parent grid (`grid-template-rows: subgrid;`)

## height
> Set element height

**Syntax:** `space="h:[value]"`

* `undefined`: Height (`height: var(--s-{value});`)
* `undefined`: Minimum height (`min-height: var(--s-{value});`)
* `undefined`: Maximum height (`max-height: var(--s-{value});`)

## hyphens
> Control hyphenation

**Syntax:** `visual="hyphens:[value]"`

* `none`: No hyphens (`hyphens: none;`)
* `manual`: Manual hyphens (`hyphens: manual;`)
* `auto`: Auto hyphens (`hyphens: auto;`)

## inset
> Control positioning offsets

**Syntax:** `layout="inset:[value]" or layout="top:[value]"`

* `inset`: All sides (`inset: {value};`)
* `inset-x`: Left and right (`left: {value}; right: {value};`)
* `inset-y`: Top and bottom (`top: {value}; bottom: {value};`)
* `top`: Top offset (`top: {value};`)
* `right`: Right offset (`right: {value};`)
* `bottom`: Bottom offset (`bottom: {value};`)
* `left`: Left offset (`left: {value};`)

## isolation
> Create new stacking context

**Syntax:** `layout="isolation:[value]"`

* `isolate`: Create stacking context (`isolation: isolate;`)
* `auto`: Auto isolation (`isolation: auto;`)

## justify-content
> Align items along the main axis

**Syntax:** `layout="justify:[value]"`

* `start`: Align to start (`justify-content: flex-start;`)
* `end`: Align to end (`justify-content: flex-end;`)
* `center`: Center items (`justify-content: center;`)
* `between`: Space between items (`justify-content: space-between;`)
* `around`: Space around items (`justify-content: space-around;`)
* `evenly`: Even spacing (`justify-content: space-evenly;`)
* `stretch`: Stretch items (`justify-content: stretch;`)

## justify-items
> Align grid items on inline axis

**Syntax:** `layout="justify-items:[value]"`

* `start`: Start alignment (`justify-items: start;`)
* `end`: End alignment (`justify-items: end;`)
* `center`: Center alignment (`justify-items: center;`)
* `stretch`: Stretch items (`justify-items: stretch;`)

## justify-self
> Align single grid item on inline axis

**Syntax:** `layout="justify-self:[value]"`

* `auto`: Auto alignment (`justify-self: auto;`)
* `start`: Start alignment (`justify-self: start;`)
* `end`: End alignment (`justify-self: end;`)
* `center`: Center alignment (`justify-self: center;`)
* `stretch`: Stretch item (`justify-self: stretch;`)

## letter-spacing
> Set letter spacing

**Syntax:** `visual="tracking:[value]"`

* `tighter`: Tighter spacing (`letter-spacing: -0.05em;`)
* `tight`: Tight spacing (`letter-spacing: -0.025em;`)
* `normal`: Normal spacing (`letter-spacing: 0;`)
* `wide`: Wide spacing (`letter-spacing: 0.025em;`)
* `wider`: Wider spacing (`letter-spacing: 0.05em;`)
* `widest`: Widest spacing (`letter-spacing: 0.1em;`)

## line-clamp
> Limit text to specific lines

**Syntax:** `visual="line-clamp:[value]"`

* `1`: Single line
* `2`: Two lines
* `3`: Three lines
* `none`: No clamp

## line-height
> Set line height

**Syntax:** `visual="leading:[value]"`

* `none`: No extra height (`line-height: 1;`)
* `tight`: Tight leading (`line-height: 1.25;`)
* `snug`: Snug leading (`line-height: 1.375;`)
* `normal`: Normal leading (`line-height: 1.5;`)
* `relaxed`: Relaxed leading (`line-height: 1.625;`)
* `loose`: Loose leading (`line-height: 2;`)

## list-style
> Set list style

**Syntax:** `visual="list:[value]"`

* `none`: No bullets (`list-style-type: none;`)
* `disc`: Disc bullets (`list-style-type: disc;`)
* `decimal`: Numbers (`list-style-type: decimal;`)
* `square`: Square bullets (`list-style-type: square;`)
* `inside`: Inside position (`list-style-position: inside;`)
* `outside`: Outside position (`list-style-position: outside;`)

## margin
> Add margin to elements

**Syntax:** `space="m:[value]" or space="m-{side}:[value]"`

* `undefined`: All sides (`margin: var(--s-{value});`)
* `undefined`: Top (`margin-top: var(--s-{value});`)
* `undefined`: Right (`margin-right: var(--s-{value});`)
* `undefined`: Bottom (`margin-bottom: var(--s-{value});`)
* `undefined`: Left (`margin-left: var(--s-{value});`)
* `undefined`: Horizontal
* `undefined`: Vertical

## mask
> Apply mask to element

**Syntax:** `visual="mask:[value]"`

* `none`: No mask (`mask-image: none;`)
* `fade-y`: Vertical fade
* `fade-x`: Horizontal fade

## object-fit
> Control how media content fits its container

**Syntax:** `layout="object:[value]"`

* `contain`: Scale to fit, preserve ratio (`object-fit: contain;`)
* `cover`: Cover container, may crop (`object-fit: cover;`)
* `fill`: Stretch to fill (`object-fit: fill;`)
* `none`: No scaling (`object-fit: none;`)
* `scale-down`: Smaller of none or contain (`object-fit: scale-down;`)

## object-position
> Position replaced element content within container

**Syntax:** `layout="object-pos:[value]"`

* `center`: Center position (`object-position: center;`)
* `top`: Top position (`object-position: top;`)
* `bottom`: Bottom position (`object-position: bottom;`)
* `left`: Left position (`object-position: left;`)
* `right`: Right position (`object-position: right;`)
* `top-left`: Top left (`object-position: top left;`)
* `top-right`: Top right (`object-position: top right;`)
* `bottom-left`: Bottom left (`object-position: bottom left;`)
* `bottom-right`: Bottom right (`object-position: bottom right;`)

## opacity
> Set element opacity (0-100)

**Syntax:** `visual="opacity:[value]"`

* `0`: Invisible (`opacity: 0;`)
* `25`: 25% visible (`opacity: 0.25;`)
* `50`: 50% visible (`opacity: 0.5;`)
* `75`: 75% visible (`opacity: 0.75;`)
* `100`: Fully visible (`opacity: 1;`)

## order
> Control flex/grid item order

**Syntax:** `layout="order:[value]"`

* `first`: Move to first (`order: -9999;`)
* `last`: Move to last (`order: 9999;`)
* `none`: Default order (`order: 0;`)
* `1-12`: Specific order (`order: {n};`)

## outline
> Set outline color

**Syntax:** `visual="outline:[color]"`


## overflow
> Control content overflow behavior

**Syntax:** `layout="overflow:[value]"`

* `auto`: Scrollbar when needed (`overflow: auto;`)
* `hidden`: Hide overflow (`overflow: hidden;`)
* `visible`: Show overflow (`overflow: visible;`)
* `scroll`: Always show scrollbar (`overflow: scroll;`)
* `clip`: Clip overflow (`overflow: clip;`)

## overscroll
> Control scroll chaining behavior

**Syntax:** `layout="overscroll:[value]"`

* `auto`: Default behavior (`overscroll-behavior: auto;`)
* `contain`: Contain scroll (`overscroll-behavior: contain;`)
* `none`: No scroll chaining (`overscroll-behavior: none;`)

## padding
> Add padding to elements

**Syntax:** `space="p:[value]" or space="p-{side}:[value]"`

* `undefined`: All sides (`padding: var(--s-{value});`)
* `undefined`: Top (`padding-top: var(--s-{value});`)
* `undefined`: Right (`padding-right: var(--s-{value});`)
* `undefined`: Bottom (`padding-bottom: var(--s-{value});`)
* `undefined`: Left (`padding-left: var(--s-{value});`)
* `undefined`: Horizontal
* `undefined`: Vertical

## place-content
> Shorthand for align-content and justify-content

**Syntax:** `layout="place-content:[value]"`

* `start`: Start alignment (`place-content: start;`)
* `end`: End alignment (`place-content: end;`)
* `center`: Center alignment (`place-content: center;`)
* `between`: Space between (`place-content: space-between;`)
* `around`: Space around (`place-content: space-around;`)
* `evenly`: Even spacing (`place-content: space-evenly;`)
* `stretch`: Stretch content (`place-content: stretch;`)

## place-items
> Shorthand for align-items and justify-items

**Syntax:** `layout="place-items:[value]"`

* `start`: Start alignment (`place-items: start;`)
* `end`: End alignment (`place-items: end;`)
* `center`: Center alignment (`place-items: center;`)
* `stretch`: Stretch items (`place-items: stretch;`)

## place-self
> Shorthand for align-self and justify-self

**Syntax:** `layout="place-self:[value]"`

* `auto`: Auto alignment (`place-self: auto;`)
* `start`: Start alignment (`place-self: start;`)
* `end`: End alignment (`place-self: end;`)
* `center`: Center alignment (`place-self: center;`)
* `stretch`: Stretch item (`place-self: stretch;`)

## pointer-events
> Control pointer events

**Syntax:** `visual="pointer-events:[value]"`

* `none`: Ignore pointer events (`pointer-events: none;`)
* `auto`: Normal pointer events (`pointer-events: auto;`)

## position
> Set the positioning method

**Syntax:** `layout="[position-value]"`

* `static`: Default positioning (`position: static;`)
* `relative`: Relative to normal position (`position: relative;`)
* `absolute`: Absolute within container (`position: absolute;`)
* `fixed`: Fixed to viewport (`position: fixed;`)
* `sticky`: Sticky positioning (`position: sticky;`)

## resize
> Control element resizing

**Syntax:** `visual="resize:[value]"`

* `none`: No resize (`resize: none;`)
* `both`: Resize both (`resize: both;`)
* `x`: Resize horizontal (`resize: horizontal;`)
* `y`: Resize vertical (`resize: vertical;`)

## ring
> Add focus ring around element using box-shadow

**Syntax:** `visual="ring:[size]"`

* `none`: No ring (`box-shadow: 0 0 0 0 transparent;`)
* `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 (`--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 (`--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

**Syntax:** `visual="scroll-behavior:[value]"`

* `auto`: Instant scroll (`scroll-behavior: auto;`)
* `smooth`: Smooth scroll (`scroll-behavior: smooth;`)

## scroll-margin
> Set scroll margin for snap

**Syntax:** `visual="scroll-m:[value]"`

* `scroll-m`: All sides (`scroll-margin: {value};`)
* `scroll-m-t`: Top margin (`scroll-margin-top: {value};`)
* `scroll-m-r`: Right margin (`scroll-margin-right: {value};`)
* `scroll-m-b`: Bottom margin (`scroll-margin-bottom: {value};`)
* `scroll-m-l`: Left margin (`scroll-margin-left: {value};`)

## scroll-padding
> Set scroll padding for snap

**Syntax:** `visual="scroll-p:[value]"`

* `scroll-p`: All sides (`scroll-padding: {value};`)
* `scroll-p-t`: Top padding (`scroll-padding-top: {value};`)
* `scroll-p-r`: Right padding (`scroll-padding-right: {value};`)
* `scroll-p-b`: Bottom padding (`scroll-padding-bottom: {value};`)
* `scroll-p-l`: Left padding (`scroll-padding-left: {value};`)

## scroll-snap-align
> Set scroll snap alignment

**Syntax:** `visual="snap-align:[value]"`

* `start`: Snap to start (`scroll-snap-align: start;`)
* `end`: Snap to end (`scroll-snap-align: end;`)
* `center`: Snap to center (`scroll-snap-align: center;`)
* `none`: No snap (`scroll-snap-align: none;`)

## scroll-snap-stop
> Control scroll snap stop behavior

**Syntax:** `visual="snap-stop:[value]"`

* `normal`: Normal stop (`scroll-snap-stop: normal;`)
* `always`: Always stop (`scroll-snap-stop: always;`)

## scroll-snap-type
> Set scroll snap type

**Syntax:** `visual="snap-type:[value]"`

* `none`: No snapping (`scroll-snap-type: none;`)
* `x`: Horizontal snap (`scroll-snap-type: x mandatory;`)
* `y`: Vertical snap (`scroll-snap-type: y mandatory;`)
* `both`: Both axes (`scroll-snap-type: both mandatory;`)
* `x-proximity`: Horizontal proximity (`scroll-snap-type: x proximity;`)
* `y-proximity`: Vertical proximity (`scroll-snap-type: y proximity;`)

## shorthand-alignment
> Quick alignment shortcuts

**Syntax:** `layout="[alignment]"`

* `center`: Center both axes (`justify-content: center; align-items: center;`)
* `start`: Align to start
* `end`: Align to end (`justify-content: flex-end; align-items: flex-end;`)
* `between`: Space between (`justify-content: space-between;`)
* `around`: Space around (`justify-content: space-around;`)
* `evenly`: Even spacing (`justify-content: space-evenly;`)

## state-prefixes
> Apply styles on specific states

**Syntax:** `visual="hover:... focus:... active:..."`

* `hover:`: On hover (`:hover`)
* `focus:`: On focus (`:focus`)
* `active:`: On active (`:active`)
* `disabled:`: When disabled (`:disabled`)
* `visited:`: When visited (`:visited`)
* `first:`: First child (`:first-child`)
* `last:`: Last child (`:last-child`)
* `odd:`: Odd children (`:nth-child(odd)`)
* `even:`: Even children (`:nth-child(even)`)

## stroke
> Set SVG stroke color

**Syntax:** `visual="stroke:[color]"`

* `none`: No stroke (`stroke: none;`)
* `current`: Current color (`stroke: currentColor;`)

## stroke-width
> Set SVG stroke width

**Syntax:** `visual="stroke-w:[value]"`

* `0`: No stroke (`stroke-width: 0;`)
* `1`: 1px stroke (`stroke-width: 1px;`)
* `2`: 2px stroke (`stroke-width: 2px;`)

## table-layout
> Control table layout algorithm

**Syntax:** `layout="table:[value]"`

* `auto`: Auto layout (`table-layout: auto;`)
* `fixed`: Fixed layout (`table-layout: fixed;`)

## text-alignment
> Set text alignment

**Syntax:** `visual="text:[alignment]"`

* `left`: Left align (`text-align: left;`)
* `center`: Center align (`text-align: center;`)
* `right`: Right align (`text-align: right;`)
* `justify`: Justify (`text-align: justify;`)

## text-color
> Set text color

**Syntax:** `visual="text:[color]"`

* `left`: Align left (`text-align: left;`)
* `center`: Align center (`text-align: center;`)
* `right`: Align right (`text-align: right;`)
* `justify`: Justify text (`text-align: justify;`)

## text-decoration
> Set text decoration

**Syntax:** `visual="[decoration-value]"`

* `underline`: Underline (`text-decoration-line: underline;`)
* `overline`: Overline (`text-decoration-line: overline;`)
* `line-through`: Strikethrough (`text-decoration-line: line-through;`)
* `no-underline`: No decoration (`text-decoration-line: none;`)

## text-indent
> Set text indentation

**Syntax:** `visual="indent:[value]"`

* `0`: No indent (`text-indent: 0;`)

## text-overflow
> Handle text overflow

**Syntax:** `visual="[overflow-value]"`

* `truncate`: Truncate with ellipsis
* `text-ellipsis`: Ellipsis overflow (`text-overflow: ellipsis;`)
* `text-clip`: Clip overflow (`text-overflow: clip;`)

## text-shadow
> Add text shadow

**Syntax:** `visual="text-shadow:[value]"`

* `none`: No shadow (`text-shadow: none;`)
* `small`: Small shadow (`text-shadow: 0 1px 2px rgba(0,0,0,0.1);`)
* `medium`: Medium shadow (`text-shadow: 0 2px 4px rgba(0,0,0,0.1);`)
* `big`: Large shadow (`text-shadow: 0 4px 8px rgba(0,0,0,0.1);`)

## text-size
> Set font size

**Syntax:** `visual="text-size:[value]"`

* `mini`: Mini size (0.75rem / 1rem)
* `small`: Small size (0.875rem / 1.25rem)
* `base`: Base size (1rem / 1.5rem)
* `large`: Large size (1.125rem / 1.75rem)
* `big`: Big size (1.25rem / 1.75rem)
* `huge`: Huge size (1.5rem / 2rem)
* `grand`: Grand size (1.875rem / 2.25rem)
* `giant`: Giant size (2.25rem / 2.5rem)
* `mount`: Mount size (3rem / 1)
* `mega`: Mega size (3.75rem / 1)
* `giga`: Giga size (4.5rem / 1)
* `tera`: Tera size (6rem / 1)
* `hero`: Hero size (8rem / 1)

## text-transform
> Transform text case

**Syntax:** `visual="[transform-value]"`

* `uppercase`: All uppercase (`text-transform: uppercase;`)
* `lowercase`: All lowercase (`text-transform: lowercase;`)
* `capitalize`: Capitalize words (`text-transform: capitalize;`)
* `normal-case`: Normal case (`text-transform: none;`)

## text-wrap
> Control text wrapping

**Syntax:** `visual="[wrap-value]"`

* `text-wrap`: Wrap text (`text-wrap: wrap;`)
* `text-nowrap`: No wrap (`text-wrap: nowrap;`)
* `text-balance`: Balanced wrap (`text-wrap: balance;`)
* `text-pretty`: Pretty wrap (`text-wrap: pretty;`)

## touch-action
> Control touch interactions

**Syntax:** `visual="touch:[value]"`

* `auto`: Default touch (`touch-action: auto;`)
* `none`: Disable touch (`touch-action: none;`)
* `pan-x`: Pan horizontally (`touch-action: pan-x;`)
* `pan-y`: Pan vertically (`touch-action: pan-y;`)
* `pan-left`: Pan left (`touch-action: pan-left;`)
* `pan-right`: Pan right (`touch-action: pan-right;`)
* `pinch-zoom`: Pinch to zoom (`touch-action: pinch-zoom;`)
* `manipulation`: Pan and pinch only (`touch-action: manipulation;`)

## transform-backface
> Control visibility of element back side when rotated in 3D

**Syntax:** `visual="backface:[value]"`

* `visible`: Backface visible (`backface-visibility: visible;`)
* `hidden`: Backface hidden (`backface-visibility: hidden;`)

## transform-origin
> Set transform origin point

**Syntax:** `visual="origin:[value]"`

* `center`: Center origin (`transform-origin: center;`)
* `top`: Top origin (`transform-origin: top;`)
* `top-right`: Top right (`transform-origin: top right;`)
* `right`: Right origin (`transform-origin: right;`)
* `bottom-right`: Bottom right (`transform-origin: bottom right;`)
* `bottom`: Bottom origin (`transform-origin: bottom;`)
* `bottom-left`: Bottom left (`transform-origin: bottom left;`)
* `left`: Left origin (`transform-origin: left;`)
* `top-left`: Top left (`transform-origin: top left;`)

## transform-perspective
> Set 3D perspective on container (apply to parent of transformed elements)

**Syntax:** `visual="perspective:[value]"`

* `none`: No perspective (`perspective: none;`)
* `dramatic`: Dramatic perspective (`perspective: 100px;`)
* `near`: Near perspective (`perspective: 300px;`)
* `normal`: Normal perspective (`perspective: 500px;`)
* `midrange`: Midrange perspective (`perspective: 800px;`)
* `far`: Far perspective (`perspective: 1000px;`)
* `distant`: Distant perspective (`perspective: 1200px;`)

## transform-perspective-origin
> Set perspective vanishing point location

**Syntax:** `visual="perspective-origin:[value]"`

* `center`: Center origin (`perspective-origin: center;`)
* `top`: Top origin (`perspective-origin: top;`)
* `bottom`: Bottom origin (`perspective-origin: bottom;`)
* `left`: Left origin (`perspective-origin: left;`)
* `right`: Right origin (`perspective-origin: right;`)
* `top-left`: Top left (`perspective-origin: top left;`)
* `top-right`: Top right (`perspective-origin: top right;`)
* `bottom-left`: Bottom left (`perspective-origin: bottom left;`)
* `bottom-right`: Bottom right (`perspective-origin: bottom right;`)

## transform-rotate
> Rotate element

**Syntax:** `visual="rotate:[degrees]"`

* `0`: No rotation (`transform: rotate(0deg);`)
* `45`: 45° rotation (`transform: rotate(45deg);`)
* `90`: 90° rotation (`transform: rotate(90deg);`)
* `180`: 180° rotation (`transform: rotate(180deg);`)

## transform-rotate-3d
> Rotate element in 3D space along X, Y, or Z axis

**Syntax:** `visual="rotate-x:[degrees]" or visual="rotate-y:[degrees]" or visual="rotate-z:[degrees]"`

* `0`: No rotation (`transform: rotateX(0deg);`)
* `45`: 45° rotation (`transform: rotateX(45deg);`)
* `90`: 90° rotation (`transform: rotateX(90deg);`)
* `180`: 180° rotation (`transform: rotateX(180deg);`)

## transform-scale
> Scale element

**Syntax:** `visual="scale:[value]"`

* `0`: Scale to 0 (`transform: scale(0);`)
* `50`: Scale to 50% (`transform: scale(0.5);`)
* `75`: Scale to 75% (`transform: scale(0.75);`)
* `100`: Normal scale (`transform: scale(1);`)
* `110`: Scale to 110% (`transform: scale(1.1);`)
* `125`: Scale to 125% (`transform: scale(1.25);`)
* `150`: Scale to 150% (`transform: scale(1.5);`)

## transform-skew
> Skew element

**Syntax:** `visual="skew-x:[degrees]" or visual="skew-y:[degrees]"`

* `0`: No skew (`transform: skewX(0deg);`)
* `3`: 3° skew (`transform: skewX(3deg);`)
* `6`: 6° skew (`transform: skewX(6deg);`)
* `12`: 12° skew (`transform: skewX(12deg);`)

## transform-style
> Preserve 3D space for nested transformed elements

**Syntax:** `visual="transform-style:[value]"`

* `flat`: Flatten 3D children (`transform-style: flat;`)
* `preserve-3d`: Preserve 3D depth (`transform-style: preserve-3d;`)

## transform-translate
> Translate element position along X, Y, or Z axis

**Syntax:** `visual="translate-x:[value]" or visual="translate-y:[value]" or visual="translate-z:[value]"`

* `0`: No translation (`transform: translateX(0);`)
* `tiny`: Tiny offset (`transform: translateX(var(--sp-tiny));`)
* `small`: Small offset (`transform: translateX(var(--sp-small));`)
* `medium`: Medium offset (`transform: translateX(var(--sp-medium));`)
* `big`: Big offset (`transform: translateX(var(--sp-big));`)
* `full`: Full width/height (`transform: translateX(100%);`)
* `1/2`: Half width/height (`transform: translateX(50%);`)
* `-full`: Negative full (`transform: translateX(-100%);`)
* `-1/2`: Negative half (`transform: translateX(-50%);`)

## transform-translate-z
> Translate element along Z axis (depth) in 3D space

**Syntax:** `visual="translate-z:[value]"`

* `0`: No Z translation (`transform: translateZ(0);`)
* `near`: Move near (forward) (`transform: translateZ(50px);`)
* `far`: Move far (backward) (`transform: translateZ(-50px);`)

## transition-delay
> Set transition delay

**Syntax:** `visual="delay:[value]"`

* `instant`: 75ms delay (`transition-delay: 75ms;`)
* `quick`: 100ms delay (`transition-delay: 100ms;`)
* `fast`: 150ms delay (`transition-delay: 150ms;`)
* `normal`: 200ms delay (`transition-delay: 200ms;`)
* `slow`: 300ms delay (`transition-delay: 300ms;`)

## transition-duration
> Set transition duration

**Syntax:** `visual="duration:[value]"`

* `instant`: 75ms (`transition-duration: 75ms;`)
* `quick`: 100ms (`transition-duration: 100ms;`)
* `fast`: 150ms (`transition-duration: 150ms;`)
* `normal`: 200ms (`transition-duration: 200ms;`)
* `slow`: 300ms (`transition-duration: 300ms;`)
* `slower`: 500ms (`transition-duration: 500ms;`)
* `lazy`: 700ms (`transition-duration: 700ms;`)

## transition-property
> Set transition properties

**Syntax:** `visual="transition:[value]"`

* `none`: No transition (`transition-property: none;`)
* `all`: All properties
* `colors`: Color properties
* `opacity`: Opacity only
* `shadow`: Shadow only
* `transform`: Transform only

## transition-timing
> Set transition timing function

**Syntax:** `visual="ease:[value]"`

* `linear`: Linear timing (`transition-timing-function: linear;`)
* `in`: Ease in
* `out`: Ease out
* `in-out`: Ease in-out

## typography-keywords
> Typography utility keywords

**Syntax:** `visual="[keyword]"`

* `italic`: Italic text (`font-style: italic;`)
* `not-italic`: Normal style (`font-style: normal;`)
* `antialiased`: Antialiased text
* `subpixel-antialiased`: Subpixel antialiasing
* `uppercase`: Uppercase text (`text-transform: uppercase;`)
* `lowercase`: Lowercase text (`text-transform: lowercase;`)
* `capitalize`: Capitalize words (`text-transform: capitalize;`)
* `normal-case`: Normal case (`text-transform: none;`)
* `underline`: Underline text (`text-decoration-line: underline;`)
* `overline`: Overline text (`text-decoration-line: overline;`)
* `line-through`: Strikethrough (`text-decoration-line: line-through;`)
* `no-underline`: No decoration (`text-decoration-line: none;`)
* `decoration-solid`: Solid line (`text-decoration-style: solid;`)
* `decoration-double`: Double line (`text-decoration-style: double;`)
* `decoration-dotted`: Dotted line (`text-decoration-style: dotted;`)
* `decoration-dashed`: Dashed line (`text-decoration-style: dashed;`)
* `decoration-wavy`: Wavy line (`text-decoration-style: wavy;`)
* `truncate`: Truncate with ellipsis
* `text-ellipsis`: Ellipsis overflow (`text-overflow: ellipsis;`)
* `text-clip`: Clip overflow (`text-overflow: clip;`)
* `text-wrap`: Wrap text (`text-wrap: wrap;`)
* `text-nowrap`: No wrap (`text-wrap: nowrap;`)
* `text-balance`: Balanced wrapping (`text-wrap: balance;`)
* `text-pretty`: Pretty wrapping (`text-wrap: pretty;`)
* `whitespace-normal`: Normal whitespace (`white-space: normal;`)
* `whitespace-nowrap`: No wrap whitespace (`white-space: nowrap;`)
* `whitespace-pre`: Preserve whitespace (`white-space: pre;`)
* `whitespace-pre-line`: Pre-line whitespace (`white-space: pre-line;`)
* `whitespace-pre-wrap`: Pre-wrap whitespace (`white-space: pre-wrap;`)
* `whitespace-break-spaces`: Break spaces (`white-space: break-spaces;`)
* `break-normal`: Normal word break (`overflow-wrap: normal; word-break: normal;`)
* `break-words`: Break words (`overflow-wrap: break-word;`)
* `break-all`: Break all (`word-break: break-all;`)
* `break-keep`: Keep all (`word-break: keep-all;`)
* `hyphens-none`: No hyphens (`hyphens: none;`)
* `hyphens-manual`: Manual hyphens (`hyphens: manual;`)
* `hyphens-auto`: Auto hyphens (`hyphens: auto;`)
* `align-baseline`: Baseline align (`vertical-align: baseline;`)
* `align-top`: Top align (`vertical-align: top;`)
* `align-middle`: Middle align (`vertical-align: middle;`)
* `align-bottom`: Bottom align (`vertical-align: bottom;`)
* `align-text-top`: Text top align (`vertical-align: text-top;`)
* `align-text-bottom`: Text bottom align (`vertical-align: text-bottom;`)
* `align-sub`: Subscript align (`vertical-align: sub;`)
* `align-super`: Superscript align (`vertical-align: super;`)
* `list-none`: No list style (`list-style-type: none;`)
* `list-disc`: Disc bullets (`list-style-type: disc;`)
* `list-decimal`: Decimal numbers (`list-style-type: decimal;`)
* `list-square`: Square bullets (`list-style-type: square;`)
* `list-inside`: Inside position (`list-style-position: inside;`)
* `list-outside`: Outside position (`list-style-position: outside;`)

## user-select
> Control text selection

**Syntax:** `visual="select:[value]"`

* `none`: Prevent selection (`user-select: none;`)
* `text`: Allow text selection (`user-select: text;`)
* `all`: Select all on click (`user-select: all;`)
* `auto`: Default behavior (`user-select: auto;`)

## vertical-align
> Set vertical alignment

**Syntax:** `visual="align:[value]"`

* `baseline`: Baseline (`vertical-align: baseline;`)
* `top`: Top (`vertical-align: top;`)
* `middle`: Middle (`vertical-align: middle;`)
* `bottom`: Bottom (`vertical-align: bottom;`)
* `text-top`: Text top (`vertical-align: text-top;`)
* `text-bottom`: Text bottom (`vertical-align: text-bottom;`)
* `sub`: Subscript (`vertical-align: sub;`)
* `super`: Superscript (`vertical-align: super;`)

## visibility
> Control element visibility

**Syntax:** `layout="[visibility-value]"`

* `visible`: Element is visible (`visibility: visible;`)
* `invisible`: Element is invisible but takes space (`visibility: hidden;`)

## whitespace
> Control whitespace handling

**Syntax:** `visual="whitespace:[value]"`

* `normal`: Normal whitespace (`white-space: normal;`)
* `nowrap`: No wrap (`white-space: nowrap;`)
* `pre`: Preserve whitespace (`white-space: pre;`)
* `pre-line`: Pre-line (`white-space: pre-line;`)
* `pre-wrap`: Pre-wrap (`white-space: pre-wrap;`)
* `break-spaces`: Break spaces (`white-space: break-spaces;`)

## width
> Set element width

**Syntax:** `space="w:[value]"`

* `undefined`: Width (`width: var(--s-{value});`)
* `undefined`: Minimum width (`min-width: var(--s-{value});`)
* `undefined`: Maximum width (`max-width: var(--s-{value});`)

## will-change
> Hint browser about upcoming changes

**Syntax:** `visual="will-change:[value]"`

* `auto`: Auto optimization (`will-change: auto;`)
* `scroll`: Scroll changes (`will-change: scroll-position;`)
* `contents`: Content changes (`will-change: contents;`)
* `transform`: Transform changes (`will-change: transform;`)
* `opacity`: Opacity changes (`will-change: opacity;`)

## word-break
> Control word breaking

**Syntax:** `visual="[break-value]"`

* `break-normal`: Normal break (`overflow-wrap: normal; word-break: normal;`)
* `break-words`: Break words (`overflow-wrap: break-word;`)
* `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

**Syntax:** `layout="z:[value]"`

* `base`: Base layer (0) (`z-index: var(--z-base);`)
* `low`: Low layer (10) (`z-index: var(--z-low);`)
* `mid`: Middle layer (50) (`z-index: var(--z-mid);`)
* `high`: High layer (100) (`z-index: var(--z-high);`)
* `top`: Top layer (9999) (`z-index: var(--z-top);`)