@tenphi/tasty 0.0.0-snapshot.1c5dff6 → 0.0.0-snapshot.1f1c00a

package/docs/styles.md

@@ -1,6 +1,6 @@
 # Style Properties Reference
 
-All standard CSS properties are supported in Tasty and benefit from its syntax sugar: design tokens (`$name`, `#name`), custom units (`2x`, `1r`, `1bw`), color opacity (`#purple.5`), auto-calc (`(100% - 2x)`), and custom functions. Values are parsed through the Tasty engine automatically.
+All standard CSS properties are supported in Tasty and benefit from its syntax sugar: design tokens (`$name`, `#name`), custom units (`2x`, `1r`, `1bw`), color opacity (`#purple.5`), auto-calc (`(100% - 2x)`), and [custom functions](dsl.md#functions-function) (`$$negative(10px)`). Values are parsed through the Tasty engine automatically.
 
 The properties documented below have **custom handlers** with enhanced syntax. They should be **preferred** over their raw CSS equivalents because they:
 
@@ -20,9 +20,10 @@ Use these instead of their raw CSS counterparts:
 |-----|------------|
 | `fill` | `backgroundColor`, `background` |
 | `image` | `backgroundImage` |
-| `padding` (with direction modifiers) | `paddingTop`, `paddingRight`, `paddingBottom`, `paddingLeft` |
-| `margin` (with direction modifiers) | `marginTop`, `marginRight`, `marginBottom`, `marginLeft` |
-| `width` (with `min`/`max` modifiers) | `minWidth`, `maxWidth` |
+| `padding` (with physical direction modifiers) | `paddingTop`, `paddingRight`, `paddingBottom`, `paddingLeft` |
+| `margin` (with physical direction modifiers) | `marginTop`, `marginRight`, `marginBottom`, `marginLeft` |
+| Logical block/inline category styles (with `start`/`end` modifiers) | Native logical axis/edge declarations |
+| `width` / `blockSize` / `inlineSize` (with `min`/`max` modifiers) | Their separate min/max declarations when one state map is sufficient |
 | `height` (with `min`/`max` modifiers) | `minHeight`, `maxHeight` |
 | `border` | `borderColor`, `borderWidth`, `borderStyle` |
 | `radius` | `borderRadius` |
@@ -36,6 +37,24 @@ Use these instead of their raw CSS counterparts:
 
 ## Layout
 
+### `overscrollBehavior`
+
+The native `overscrollBehavior` shorthand and its `overscrollBehaviorBlock`,
+`overscrollBehaviorInline`, `overscrollBehaviorX`, and `overscrollBehaviorY`
+longhands support `auto`, `contain`, `none`, and `chain`. The shorthand can set
+separate X and Y values, for example `overscrollBehavior: 'chain contain'`.
+
+`chain` allows scroll chaining to another scrollable area while suppressing
+boundary effects such as bounce. It requires browser support; use a feature
+query and a fallback floor when targeting browsers without it:
+
+```jsx
+overscrollBehaviorBlock: {
+  _: 'auto',
+  '@supports(overscroll-behavior-block: chain)': 'chain',
+}
+```
+
 ### `display`
 
 Standard CSS display values. Handled together with `hide`, `textOverflow`, `overflow`, and `whiteSpace` for priority resolution.
@@ -100,83 +119,94 @@ For flex/grid layouts, outputs native `gap`. For block layouts, emulates gap usi
 
 Element padding with directional modifiers and multi-group support. Use **comma-separated groups** to set a base value and then override specific directions.
 
-**Syntax:** `[value]` | `[top right]` | `[top right bottom left]` | `[value directions...]` — comma-separated for multiple groups
+**Syntax:** `[value]` | `[block inline]` | `[top right bottom left]` | `[value direction...]` — comma-separated for multiple groups
 
 **Direction modifiers:** `top`, `right`, `bottom`, `left`
 
+**Output modifier:** `longhand` — forces output as individual CSS longhand properties (`padding-top`, `padding-right`, `padding-bottom`, `padding-left`) instead of the `padding` shorthand. Useful when children need to selectively inherit individual directions.
+
+**One value per directional group.** A group that names direction modifiers takes **exactly one** value, applied to every direction it names. For different values per side, use comma-separated groups: `padding: '2x top, 4x right'`. Writing `padding: '2x 4x top right'` ignores `4x` and warns in development — the parser keeps values and modifiers in separate buckets, so their interleaving in the source is not recoverable and `'2x 4x top right'`, `'2x top 4x right'` and `'top 2x right 4x'` are all the same input.
+
+A group that names *no* direction keeps plain CSS shorthand order, which is unambiguous and unchanged.
+
 | Value | Effect |
 |-------|--------|
 | `"2x"` | All sides `2x` |
 | `"2x 1x"` | Top/bottom `2x`, left/right `1x` |
 | `"2x top"` | Top `2x`, right/bottom/left `0` |
 | `"1x left right"` | Left and right `1x`, top/bottom `0` |
+| `"2x top, 4x right"` | Top `2x`, right `4x`, bottom/left `0` |
 | `"1x, 2x top"` | All sides `1x`, then top overridden to `2x` |
 | `"1x, 2x top bottom"` | Left/right `1x`, top/bottom `2x` |
+| `"2x longhand"` | All sides `2x`, output as 4 individual `padding-*` properties |
 | `true` | All sides `1x` |
 | Number | Converted to `px` |
 
 Later comma-separated groups override earlier groups for conflicting directions.
 
-Individual props `paddingTop`, `paddingRight`, `paddingBottom`, `paddingLeft`, `paddingBlock`, `paddingInline` are supported but `padding` with modifiers is recommended.
-
-**Priority:** `padding` < `paddingBlock`/`paddingInline` < `paddingTop`/`paddingRight`/`paddingBottom`/`paddingLeft`
+Individual physical props `paddingTop`, `paddingRight`, `paddingBottom`, and `paddingLeft` are supported, but `padding` with modifiers is recommended. Use `blockPadding` or `inlinePadding` for an enhanced logical-axis shorthand; native declarations such as `paddingInlineStart` remain ordinary CSS properties. See [Logical properties](#logical-properties).
 
 ### `margin`
 
 Element margin. Same syntax, modifiers, and multi-group support as `padding`.
 
-**Syntax:** `[value]` | `[top right]` | `[top right bottom left]` | `[value directions...]` — comma-separated for multiple groups
+**Syntax:** `[value]` | `[block inline]` | `[top right bottom left]` | `[value direction...]` — comma-separated for multiple groups
 
 **Direction modifiers:** `top`, `right`, `bottom`, `left`
 
+**Output modifier:** `longhand` — forces output as individual CSS longhand properties (`margin-top`, etc.) instead of the `margin` shorthand.
+
+The [one-value-per-directional-group rule](#padding) from `padding` applies here too.
+
 | Value | Effect |
 |-------|--------|
 | `"2x"` | All sides `2x` |
 | `"2x 1x"` | Top/bottom `2x`, left/right `1x` |
 | `"2x top"` | Top `2x`, right/bottom/left `0` |
+| `"2x top, 4x right"` | Top `2x`, right `4x`, bottom/left `0` |
 | `"auto left right, 1x top bottom"` | Left/right `auto`, top/bottom `1x` |
 | `true` | All sides `1x` |
 | Number | Converted to `px` |
 
 Later comma-separated groups override earlier groups for conflicting directions.
 
-Individual props `marginTop`, `marginRight`, `marginBottom`, `marginLeft`, `marginBlock`, `marginInline` are supported but `margin` with modifiers is recommended.
-
-**Priority:** `margin` < `marginBlock`/`marginInline` < `marginTop`/`marginRight`/`marginBottom`/`marginLeft`
+Individual physical props `marginTop`, `marginRight`, `marginBottom`, and `marginLeft` are supported, but `margin` with modifiers is recommended. Use `blockMargin` or `inlineMargin` for an enhanced logical-axis shorthand; native declarations such as `marginInlineStart` remain ordinary CSS properties. See [Logical properties](#logical-properties).
 
 ### `width`
 
-Element width with min/max control.
+Element width with min/max control. One, two, or three values set `min-width`, `width`, and `max-width` together.
 
-**Syntax:** `[value]` | `[min max]` | `[min value max]` | `[modifier value]`
+**Positional syntax:**
 
-**Modifiers:** `min`, `max`, `fixed`
+| Value | min-width | width | max-width |
+|-------|-----------|-------|-----------|
+| `"10x"` | initial | `10x` | initial |
+| `"1x 10x"` | `1x` | auto | `10x` |
+| `"1x 5x 10x"` | `1x` | `5x` | `10x` |
+| `"0 100% 800px"` | `0` | `100%` | `800px` |
+| `"initial 100% 1400px"` | initial | `100%` | `1400px` |
+
+**Modifier syntax:**
+
+| Value | min-width | width | max-width |
+|-------|-----------|-------|-----------|
+| `"min 2x"` | `2x` | auto | initial |
+| `"max 100%"` | initial | auto | `100%` |
+| `"fixed 200px"` | `200px` | `200px` | `200px` |
 
 **Keywords:** `stretch`, `max-content`, `min-content`, `fit-content`
 
 | Value | Effect |
 |-------|--------|
-| `"10x"` | Width `10x`, min `initial`, max `initial` |
-| `"1x 10x"` | Width `auto`, min `1x`, max `10x` |
-| `"1x 5x 10x"` | Min `1x`, width `5x`, max `10x` |
-| `"min 2x"` | Min-width `2x`, width `auto`, max `initial` |
-| `"max 100%"` | Max-width `100%`, width `auto`, min `initial` |
-| `"fixed 200px"` | Min, width, and max all set to `200px` |
 | `"stretch"` | Fill available space (cross-browser) |
-| `true` | Width `auto`, min `initial`, max `initial` |
+| `true` | Reset to `auto` / `initial` / `initial` |
 | Number | Converted to `px` |
 
 Separate `minWidth` and `maxWidth` props are supported and override values from the `width` syntax.
 
 ### `height`
 
-Element height. Same syntax and modifiers as `width`.
-
-**Syntax:** `[value]` | `[min max]` | `[min value max]` | `[modifier value]`
-
-**Modifiers:** `min`, `max`, `fixed`
-
-**Keywords:** `max-content`, `min-content`, `fit-content`
+Element height. Same syntax, modifiers, and positional patterns as `width`.
 
 Separate `minHeight` and `maxHeight` props are supported and override values from the `height` syntax.
 
@@ -184,23 +214,79 @@ Separate `minHeight` and `maxHeight` props are supported and override values fro
 
 Positioning offsets with directional modifiers and multi-group support. Same directional syntax as `padding`.
 
-**Syntax:** `[value]` | `[top right]` | `[top right bottom left]` | `[value directions...]` — comma-separated for multiple groups
+**Syntax:** `[value]` | `[block inline]` | `[top right bottom left]` | `[value direction...]` — comma-separated for multiple groups
 
 **Direction modifiers:** `top`, `right`, `bottom`, `left`
 
+The [one-value-per-directional-group rule](#padding) from `padding` applies here too, with `dock`
+as the single exception.
+
+**`dock` modifier:** pins the named edge and spans its full length, by also applying the value
+to the two perpendicular sides. `inset: 'bottom dock'` gives `inset: auto 0 0 0` — anchored to
+the bottom, full width. Without a direction, `dock` fills every side.
+
+`dock` is the one place a directional group takes **two** values: the first insets the named
+edge, the second the sides it spans. `inset: '2x 4x bottom dock'` pins the bottom at `2x` and
+insets the sides by `4x`. A third value, or a second value without `dock`, is ignored and warns
+in development. With several directions the first value applies to each named edge and the
+second to every side they span.
+
+**Output modifier:** `longhand` — forces output as individual CSS properties (`top`, `right`, `bottom`, `left`) instead of the `inset` shorthand.
+
 | Value | Effect |
 |-------|--------|
 | `"0"` | All sides `0` |
 | `"2x top"` | Top `2x`, right/bottom/left `auto` |
 | `"1x left right"` | Left and right `1x`, top/bottom `auto` |
 | `"0, 2x top"` | All sides `0`, then top overridden to `2x` |
+| `"0 longhand"` | All sides `0`, output as individual `top`/`right`/`bottom`/`left` |
 | `true` | All sides `0` |
+| `"bottom dock"` | Bottom/left/right `0`, top `auto` — bottom-anchored, full width |
+| `"right dock"` | Right/top/bottom `0`, left `auto` — right-anchored, full height |
+| `"2x bottom dock"` | Bottom/left/right `2x`, top `auto` |
+| `"2x 4x bottom dock"` | Bottom `2x`, left/right `4x`, top `auto` |
+| `"dock"` | All sides `0` |
 
 Later comma-separated groups override earlier groups for conflicting directions.
 
-Individual props `top`, `right`, `bottom`, `left`, `insetBlock`, `insetInline` are supported. When only individual direction props are used (without `inset`), individual CSS properties are output for correct cascade behavior with state overrides.
+Individual physical props `top`, `right`, `bottom`, and `left` are supported. When only those props are used (without `inset`), individual CSS properties are output for correct cascade behavior with state overrides. Use `blockInset` or `inlineInset` for logical axes; native declarations such as `insetInlineStart` remain ordinary CSS properties.
+
+### Logical properties
 
-**Priority:** `inset` < `insetBlock`/`insetInline` < `top`/`right`/`bottom`/`left`
+Tasty provides one enhanced handler for each logical axis/category pair. Each handler emits native logical CSS instead of converting values to `top`, `right`, `bottom`, `left`, `width`, or `height`. The browser therefore resolves `block`, `inline`, `start`, and `end` from the element's `writingMode` and `direction`.
+
+```jsx
+styles: {
+  direction: 'rtl',
+  inlinePadding: '1x start, 2x end',
+  inlineBorder: '1bw solid #accent start',
+  blockInset: '0 end',
+}
+```
+
+An axis handler accepts one value for both edges or two values in logical **start/end** order. Use `start` and `end` modifiers, with comma-separated groups for different edge values. Unspecified padding, margin, and scroll edges reset to `0`; unspecified inset edges reset to `auto`. The `longhand` modifier emits the two native start/end declarations.
+
+| Category | Block axis | Inline axis |
+|----------|------------|-------------|
+| Size | `blockSize` | `inlineSize` |
+| Padding | `blockPadding` | `inlinePadding` |
+| Margin | `blockMargin` | `inlineMargin` |
+| Inset | `blockInset` | `inlineInset` |
+| Scroll margin | `blockScrollMargin` | `inlineScrollMargin` |
+| Scroll padding | `blockScrollPadding` | `inlineScrollPadding` |
+| Border | `blockBorder` | `inlineBorder` |
+
+`blockSize` and `inlineSize` use the same enhanced one/two/three-value and `min`/`max`/`fixed` syntax as `width`. Separate `minBlockSize`, `maxBlockSize`, `minInlineSize`, and `maxInlineSize` declarations override constraints produced by that shorthand.
+
+`blockBorder` and `inlineBorder` use the same width/style/color parsing and defaults as `border`, including `1bw`, color tokens, and `true`. Logical padding, margin, scroll margin, and scroll padding default to `1x` for `true`; logical inset defaults to `0`.
+
+Native logical CSS names—such as `paddingInlineStart`, `borderBlockColor`, and `borderStartStartRadius`—remain available as ordinary CSS properties. They support Tasty tokens and units through the normal value parser, but do not get category defaults or directional shorthand behavior.
+
+The physical `scrollMargin` and `scrollPadding` shorthands support the same values and physical direction modifiers as `padding`. Their logical counterparts stay in separate axis handlers.
+
+`writingMode`, `direction`, and `textOrientation` are standard CSS control properties. They use Tasty's normal value parser and need no special handler.
+
+Avoid setting physical and logical declarations that resolve to the same edge in one style block. Tasty keeps them separate and lets the native CSS cascade resolve the overlap, whose result also depends on writing mode and direction.
 
 ---
 
@@ -218,6 +304,7 @@ Background color with design token support. Preferred over `backgroundColor` and
 | `"#purple.10"` | Token color at 10% opacity |
 | `"#surface #primary.10"` | Background `#surface` with `#primary.10` overlay (two colors enable smooth transitions between both) |
 | `"rgb(255 128 0)"` | CSS color value |
+| `"color-mix(in oklab, #primary 50%, #surface)"` | CSS color function — see [CSS Color Functions](dsl.md#css-color-functions) |
 | `true` | Default fill color |
 
 When two colors are provided, the first sets the background color and the second is applied as an overlay gradient layer. This enables independent CSS transitions on each color. The overlay is only applied when no explicit `image` or `backgroundImage` is set.
@@ -250,9 +337,17 @@ Text color with design token support.
 | `"#current"` | Current inherited color |
 | `"#current.5"` | Current inherited color at 50% opacity |
 | `"(#primary, #secondary)"` | Fallback: use `#primary`, fall back to `#secondary` |
+| `"light-dark(#dark, #light)"` | CSS color function — see [CSS Color Functions](dsl.md#css-color-functions) |
 | `true` | `currentColor` |
 
-When set to a named color token, also sets `$current-color` and `$current-color-rgb` custom properties for downstream use.
+Also sets `$current-color` to the same color, for anything that needs the
+inherited color as a color rather than as the `currentcolor` keyword. Every color
+publishes it, not just a named token, so a reader below always takes the nearest
+`color` rather than the nearest *token* color. A value that already reads the
+inherited color — `#current` itself, a `#current` fade, a bare `currentColor` —
+is not republished: resolving it a second time one level down would fade it
+twice, and the variable into itself is a self-reference. `#current` does not go
+through it; it is the keyword.
 
 ### `svgFill`
 
@@ -260,7 +355,7 @@ SVG fill color. Same color token syntax as `fill` and `color`. Outputs the nativ
 
 ```jsx
 svgFill="#purple.10"
-svgFill="currentColor"
+svgFill="#current"
 ```
 
 ---
@@ -279,12 +374,15 @@ Border shorthand with directional and multi-group support. Use **comma-separated
 
 **Direction modifiers:** `top`, `right`, `bottom`, `left`
 
+**Output modifier:** `longhand` — forces output as individual CSS properties (`border-top`, `border-right`, `border-bottom`, `border-left`) instead of the `border` shorthand. Useful when children need to selectively inherit individual sides.
+
 | Value | Effect |
 |-------|--------|
 | `true` | Default border (`1bw solid #border`) on all sides |
 | `"2bw dashed #purple"` | All sides: 2bw dashed purple |
 | `"2bw top"` | Top only: 2bw solid `#border`, others: 0 |
 | `"dotted #danger left right"` | Left/right: 1bw dotted `#danger`, others: 0 |
+| `"1bw longhand"` | All sides: 1bw solid `#border`, output as 4 individual `border-*` properties |
 | `"1bw #red, 2bw #blue top"` | All sides: 1bw solid `#red`, top overridden to 2bw solid `#blue` |
 | `"1bw, dashed top bottom, #purple left right"` | Base: 1bw solid `#border`, top/bottom: 1bw dashed `#border`, left/right: 1bw solid `#purple` |
 
@@ -304,8 +402,15 @@ Border radius with shape presets and directional modifiers.
 | `"ellipse"` | Circular (`50%`) |
 | `"leaf"` | Asymmetric: sharp, round, sharp, round |
 | `"backleaf"` | Asymmetric: round, sharp, round, sharp |
+| `"inherit"` | Inherit border-radius from parent |
+
+**Edge modifiers:** `top`, `right`, `bottom`, `left` — rounds the *pair* of corners along that edge.
 
-**Direction modifiers:** `top`, `right`, `bottom`, `left` — rounds only the specified corners.
+**Corner modifiers:** `top-left`, `top-right`, `bottom-right`, `bottom-left` — rounds a single corner.
+Use these when an edge modifier would round one corner too many. Edge and corner modifiers combine
+(`radius: 'top bottom-right'`).
+
+**Output modifier:** `longhand` — forces output as individual CSS longhand properties (`border-top-left-radius`, `border-top-right-radius`, `border-bottom-right-radius`, `border-bottom-left-radius`) instead of the `border-radius` shorthand. Useful when children need to selectively inherit individual corners via `radius: 'inherit left'`.
 
 | Value | Effect |
 |-------|--------|
@@ -315,6 +420,12 @@ Border radius with shape presets and directional modifiers.
 | `"1r top"` | Top-left and top-right `1r`, bottom-left and bottom-right `0` |
 | `"leaf"` | Alternating sharp/round corners (top-left `0`, top-right `1r`, bottom-right `0`, bottom-left `1r`) |
 | `"backleaf"` | Inverse leaf (top-left `1r`, top-right `0`, bottom-right `1r`, bottom-left `0`) |
+| `"1r longhand"` | All corners `1r`, output as 4 individual `border-*-radius` properties |
+| `"inherit"` | All corners inherit from parent (`border-radius: inherit`) |
+| `"inherit right"` | Right corners inherit from parent (uses longhand properties) |
+| `"top-right"` | Top-right corner `1r`, every other corner `0` |
+| `"4px top-left"` | Top-left corner `4px`, every other corner `0` |
+| `"top bottom-right"` | Both top corners and bottom-right `1r`, bottom-left `0` |
 
 ### `outline`
 
@@ -344,7 +455,7 @@ Box shadow. Supports multiple shadows comma-separated.
 
 | Value | Effect |
 |-------|--------|
-| `true` | Default shadow (from `$shadow` token) |
+| `true` | Default shadow (uses `var(--shadow)` — define a `$shadow` token in your design system) |
 | `"1x .5x .5x #dark.50"` | Custom shadow with Tasty units/colors |
 | `"0 1x 2x #dark.20"` | Standard shadow |
 | `"inset 0 1x 2x #dark.10"` | Inset shadow |
@@ -359,24 +470,29 @@ Multiple shadows: `shadow="1x 1x 2x #dark.20, inset 0 0 4x #dark.10"`
 
 Typography preset that sets font-size, line-height, letter-spacing, font-weight, font-style, and text-transform from named design tokens.
 
-**Syntax:** `[name] [modifiers...]`
+**Syntax:** `name`, `name / modifier...`, or `modifier...` (shorthand)
 
 Preset names are project-specific (e.g. `h1`–`h6`, `t1`–`t4`, `p1`–`p4`). Register them for autocomplete by augmenting `TastyPresetNames`.
 
+Use `/` to separate the preset name from one or more space-separated modifiers. When modifiers are used alone (without a name), the preset name defaults to `inherit`. Modifiers can be combined freely because they target different properties.
+
 **Modifiers:**
 
 | Modifier | Effect |
 |----------|--------|
-| `strong` | Sets `font-weight` to bold (from `$bold-font-weight` token) |
+| `strong` (or `bold`) | Sets `font-weight` to bold (from `$bold-font-weight` token) |
 | `italic` | Sets `font-style: italic` |
 | `icon` | Sets font-size and line-height to icon size |
 | `tight` | Sets line-height equal to font-size |
 
 ```jsx
-preset="h1"           // heading 1
-preset="h2 strong"    // bold heading 2
-preset="t3 italic"    // italic text 3
-preset="t2 tight"     // text 2 with tight line-height
+preset="h1"                    // heading 1
+preset="h2 / strong"           // bold heading 2
+preset="h2 / strong italic"    // bold + italic heading 2
+preset="t3 / italic"           // italic text 3
+preset="t2 / strong tight"     // bold text 2 with tight line-height
+preset="bold"                  // inherit preset with bold (shorthand)
+preset="bold italic"           // inherit preset with bold + italic (shorthand)
 ```
 
 Individual typography props (`fontSize`, `lineHeight`, `letterSpacing`, `fontWeight`, `fontStyle`, `textTransform`) can be used alongside `preset` to override specific values, but using `preset` alone is recommended.
@@ -468,15 +584,17 @@ When easing is provided without a duration, the default timing variable is used
 | `zIndex` | `z-index` |
 | `inset` | `inset`, `top`, `right`, `bottom`, `left` |
 
-Default timing: `$transition` (or `${name}-transition` with `$transition` fallback per semantic name).
+When two entries cover the same property, an entry that names that one property wins over a group such as `theme`, in either order: `opacity 120ms ease-in-out, theme` keeps the opacity timing. Otherwise the later entry wins, as in CSS.
+
+Default timing: `$transition` (or `${name}-transition` with `$transition` fallback per semantic name). Prefer omitting the duration or using a duration token instead of repeating raw time values across components. Explicit zero can disable motion.
 
 ```jsx
-transition="theme 0.3s"
-transition="fill 0.2s, radius 0.3s"
-transition="fade 0.15s ease-in"
+transition="theme"
+transition="fill, radius"
+transition="fade $transition ease-in"
 transition="fill ease-in"           // easing without duration (uses default timing)
 transition="radius ease-in-out"     // easing keyword only
-transition="$$custom-prop 0.3s"     // custom property transition
+transition="$$custom-prop"          // custom property transition
 ```
 
 **Recognized easing keywords:** `ease`, `ease-in`, `ease-out`, `ease-in-out`, `linear`, `step-start`, `step-end`. CSS easing functions (`cubic-bezier(...)`, `steps(...)`, `linear(...)`) are also recognized.
@@ -485,51 +603,81 @@ If the name is not a semantic name, it is used as a literal CSS property name.
 
 ---
 
+### `animation`
+
+`animation` is the native CSS shorthand. Tasty parses tokens in its value and
+tracks local `@keyframes` names referenced by it, so it needs no custom style
+handler. Define a complete animation with the shorthand, using a configured
+duration token where appropriate (for example,
+`animation: 'pulse $animation-duration ease-in infinite'`).
+
+Use `animationDuration`, `animationTimeline`, `animationRange`, and other CSS
+longhands when changing just one part of an existing animation in a state or
+component extension. Setting `animation` resets omitted parts, including its
+timeline and range. The same principle applies to `transitionDuration` and
+other transition longhands when a base `transition` is already defined.
+`transitionBehavior` remains a separate CSS longhand; Tasty's semantic
+`transition` syntax covers name, timing, easing, and delay.
+
+---
+
 ## Scrollbar & Overflow
 
 ### `scrollbar`
 
-Standards-based scrollbar styling using `scrollbar-width`, `scrollbar-color`, and `scrollbar-gutter`.
+Scrollbar styling using CSS standard properties (`scrollbar-width`, `scrollbar-color`, `scrollbar-gutter`).
 
-**Syntax:** `[modifiers...] [thumb-color] [track-color]`
+**Syntax:** `[width] [modifiers...] [thumb-color] [track-color]`
 
-**Modifiers:**
+**Width values** (controls `scrollbar-width`, default is `thin`):
+
+| Value | Effect |
+|-------|--------|
+| `thin` | Thin scrollbar (default) |
+| `auto` | Browser-default scrollbar width |
+| `none` | Hide scrollbar (still scrollable, no colors applied) |
+
+**Modifiers** (controls gutter and overflow behavior):
 
 | Modifier | Effect |
 |----------|--------|
-| `thin` | Thin scrollbar (`scrollbar-width: thin`) |
-| `none` | Hide scrollbar (content remains scrollable) |
-| `auto` | Browser-default scrollbar width (`scrollbar-width: auto`) |
 | `stable` | Reserve space for scrollbar (`scrollbar-gutter: stable`) |
 | `both-edges` | Reserve space on both sides (`scrollbar-gutter: stable both-edges`) |
-| `always` | Keep scrollbar visible when content overflows (`overflow: auto` + `scrollbar-gutter: stable`) |
+| `always` | Force scrollbars visible (`overflow: scroll` + `scrollbar-gutter: stable`) |
+
+**Colors:** Up to 2 color values for thumb and track (optional), applied via `scrollbar-color`.
 
-**Colors:** Up to 2 color values for thumb and track (optional).
+**Defaults:** When no colors are specified, the thumb color comes from `var(--scrollbar-thumb-color)` and the track color from `var(--scrollbar-track-color, transparent)`. These are not built-in — your design system should define `#scrollbar-thumb` and `#scrollbar-track` tokens (e.g. `'#text.5'` and `'#dark-bg'`). If neither token is defined, the track falls back to `transparent` via a CSS fallback, while the thumb has no CSS-level fallback — the browser treats the entire `scrollbar-color` declaration as invalid and reverts to the platform-default scrollbar appearance.
 
-**Defaults:** thumb = `$scrollbar-thumb-color`, track = `$scrollbar-track-color` (falls back to `transparent`)
+**Note:** `none` takes precedence over all other modifiers and colors. Combining `none` with other tokens (e.g., `"none always #red"`) produces a warning, and only `scrollbar-width: none` is applied.
 
 | Value | Effect |
 |-------|--------|
 | `true` | Thin scrollbar with default thumb/track colors |
-| `"none"` | Hidden scrollbar (content remains scrollable) |
-| `"thin #purple.40 #dark.04"` | Thin, thumb `#purple.40`, track `#dark.04` |
-| `"always #primary.50 #white.02"` | Always visible with stable gutter, thumb `#primary.50`, track `#white.02` |
-| `"thin stable"` | Thin scrollbar with reserved gutter space |
-| `"thin both-edges"` | Thin scrollbar with gutter space on both sides |
+| `"none"` | Hidden scrollbar (still scrollable) |
+| `"thin #purple.40 #dark.04"` | Thin scrollbar with custom colors |
+| `"auto #red #blue"` | Browser-default width with custom colors |
+| `"always #primary.50 #white.02"` | Always visible with custom colors |
+| `"thin stable #red #blue"` | Thin, gutter reserved, custom colors |
 
 ### `fade`
 
 Gradient-based edge fading using CSS masks. Use **comma-separated groups** to set different widths and colors per direction.
 
-**Syntax:** `[width] [directions...] [#from-color] [#to-color]` — comma-separated for multiple groups
+**Syntax:** `[width] [direction...] [#from-color] [#to-color]` — comma-separated for multiple groups
 
 **Direction modifiers:** `top`, `right`, `bottom`, `left`
 
+A group that names edges takes a **single** width, applied to every edge it names — different
+widths per edge come from comma groups. A group that names no edge covers all four and keeps
+plain CSS shorthand order, like `padding`. See the [`padding` rule](#padding).
+
 | Value | Effect |
 |-------|--------|
 | `"top"` | Fade top edge, default width (`2x`), all other edges unfaded |
 | `"2x left right"` | Fade left and right edges with `2x` width, top/bottom unfaded |
-| `"3x 1x top bottom"` | Fade top with `3x` width, bottom with `1x` width |
+| `"3x 1x"` | All edges faded — top/bottom `3x`, left/right `1x` (CSS shorthand order) |
+| `"3x top, 1x bottom"` | Fade top with `3x` width, bottom with `1x` width |
 | `"2x #transparent #dark"` | All edges faded with `2x` width, from `#transparent` to `#dark` |
 | `"top #a #b, bottom #c #d"` | Top fades from `#a` to `#b`, bottom fades from `#c` to `#d` |