@tenphi/tasty 0.0.0-snapshot.06c8a41 → 0.0.0-snapshot.07ea4a0

package/docs/dsl.md

@@ -6,6 +6,8 @@ The same value syntax, state maps, tokens, units, extension semantics, and speci
 
 For the React API (`tasty()`, style functions, component props), see [React API](react-api.md). For all enhanced style properties, see [Style Properties](styles.md). For global configuration, see [Configuration](configuration.md).
 
+To autocomplete your own token and preset names, see [TypeScript autocomplete](getting-started.md#typescript-autocomplete); to check state keys, tokens, units, and values at lint time, see [ESLint plugin](getting-started.md#eslint-plugin).
+
 ---
 
 ## Dictionary
@@ -18,6 +20,15 @@ Object where keys represent states and values are the styles to apply:
 fill: { '': '#white', hovered: '#gray.05', 'theme=danger': '#red' }
 ```
 
+Define an alias for one component by adding an `'@name': '<state expression>'` key to its styles. It works like a global alias from [`configure({ states })`](configuration.md#options), scoped to that component:
+
+```jsx
+styles: {
+  '@narrow': '@media(w < 600px)',
+  fill: { '': '#surface', '@narrow': '#surface-mobile' },
+}
+```
+
 #### State Key Types
 
 | Syntax             | Example                  | Generated CSS                                                            |
@@ -34,17 +45,20 @@ fill: { '': '#white', hovered: '#gray.05', 'theme=danger': '#red' }
 
 #### Automatic Native States
 
-`disabled` and `checked` are built-in automatic states. On a Tasty component, they track the corresponding native prop or attribute, so these pairs express the same component state:
+`disabled`, `checked`, and `hidden` are built-in automatic states. A Tasty component sets `data-disabled`, `data-checked`, and `data-hidden` from the native `disabled`, `checked`, and `hidden` props (or `isDisabled`, `isChecked`, `isHidden`), so each pair below expresses the same component state:
 
-| Concise Tasty state | Explicit attribute selector |
-| ------------------- | --------------------------- |
-| `disabled`          | `[disabled]`                |
-| `checked`           | `[checked]`                 |
+| Concise Tasty state | Compiles to       | Explicit attribute selector |
+| ------------------- | ----------------- | --------------------------- |
+| `disabled`          | `[data-disabled]` | `[disabled]`                |
+| `checked`           | `[data-checked]`  | `[checked]`                 |
+| `hidden`            | `[data-hidden]`   | `[hidden]`                  |
 
 Prefer the concise form when authoring Tasty component styles. Explicit attribute selectors remain valid and can be useful when targeting arbitrary attributes or when CSS-shaped syntax makes an introductory example easier to recognize.
 
 Operator precedence (highest to lowest): `!` (NOT) > `^` (XOR) > `|` (OR) > `&` (AND). Use parentheses to override: `hovered & (pressed ^ focused)`.
 
+A top-level comma is the same as `|`: `'hovered, focused'` is `'hovered | focused'`.
+
 `^` (XOR) means "exactly one of" — `A ^ B` expands to `(A & !B) | (!A & B)`. This is useful for mutually exclusive states where exactly one should be active:
 
 ```jsx
@@ -54,6 +68,8 @@ fill: {
 }
 ```
 
+Modifier and class names start with a letter and may be a single letter (`x` → `[data-x]`, `.x`). Tasty emits an `INVALID_STATE_KEY` warning for a key it cannot fully read and skips the unreadable parts. That covers characters outside the notation (`1st`, or `@media (w < 600px)` with a space before the parenthesis), an operator missing a state (`hovered &`), and two states with no operator between them (`hovered focused`). A partly read key can apply in states you did not mean, so fix the key rather than rely on what it produces.
+
 #### Default State Ordering
 
 Key order sets priority — later keys win and turn off earlier ones via negation. The bare default (`''`) is the lowest-priority state, so it **must be the first key**. If it appears after other states, Tasty moves it to the front and emits a dev warning (`MISPLACED_DEFAULT_STATE`); otherwise it would override every state above it.
@@ -74,9 +90,7 @@ Element styled using a capitalized key. Identified by `data-element` attribute:
 
 ```jsx
 styles: {
-  Title: {
-    preset: 'h3';
-  }
+  Title: { preset: 'h3' },
 }
 // Targets: <div data-element="Title">
 ```
@@ -115,14 +129,16 @@ The `@` placeholder marks exactly where `[data-element="..."]` is injected, allo
 const List = tasty({
   styles: {
     Item: {
-      $: '>@:last-child',
-      border: 'none',
+      $: '>@::after',
+      content: '""',
     },
   },
 });
-// → .t0 > [data-element="Item"]:last-child { border: none }
+// → .t1x29r0l.t1x29r0l > [data-element="Item"]::after { content: ""; }
 ```
 
+Keep conditions such as `:last-child` out of `$` and write them as `@own(:last-child)` in a state map; `tasty/no-state-in-selector` warns otherwise. This works when `$` ends in a pseudo-element too: the condition attaches to the element the pseudo-element belongs to (see [`@own(...)`](#own--sub-elements-own-state)).
+
 ### Color Token
 
 Named color prefixed with `#` that maps to CSS custom properties. Supports opacity with `.N` suffix:
@@ -155,6 +171,10 @@ fill: '#current',           // → currentcolor
 color: '(#primary, #secondary)',  // Fallback syntax
 ```
 
+`#white`, `#black`, `#border`, and `#outline` are registered by default (see [Default properties](#default-properties)), and `#clear` is a built-in alias for `transparent` (see [below](#clear-is-transparent)), so they work before you define any tokens.
+
+A name that is also a hex color is read as a token with the literal as its fallback, in every color style: `color: '#ddd'` emits `var(--ddd-color, #ddd)`, and `#ddd.5` emits `oklch(from var(--ddd-color, #ddd) l c h / .5)`. A `#ddd` token, if you define one, wins over the literal.
+
 The suffix sets the alpha on the token's color with CSS relative color syntax:
 
 ```jsx
@@ -180,6 +200,17 @@ Two properties follow from writing the alpha slot rather than compositing:
   `/ var(--fade)` unchanged, so it works whether `$fade` holds `.5` or `50%` —
   which is what `--*-opacity` properties are registered to accept.
 
+### `#clear` is transparent
+
+`#clear` is a built-in [replace token](#replace-tokens) for `transparent`.
+Opacity suffixes are ignored: `#clear.5` and `#clear.$fade` both emit
+`transparent`. The same rule applies to user-defined replace tokens resolving
+to `transparent`, including aliases of `#clear`.
+
+It does not read `--clear-color` or require an `@property` registration.
+An explicit `configure({ replaceTokens: { '#clear': ... } })` overrides the
+default alias and uses the replacement's usual opacity behavior.
+
 ### `#current` is the keyword
 
 `#current` emits the `currentcolor` keyword, so it resolves against the element
@@ -217,7 +248,7 @@ through `color-mix()`, which works from Safari 16.2 and composes like every othe
 
 ### `#current` composes instead
 
-`#current` is the one exception, and the difference is deliberate. A token _names_
+`#current` composes alpha, and the difference is deliberate. A token _names_
 a color, so fading it sets its alpha. `currentcolor` is the color an element
 **inherits**, which an ancestor may already have faded — `#current.4` means "40%
 of what reaches me":
@@ -234,9 +265,10 @@ step. Because a `color-mix()` percentage cannot be a `<number>`, an opacity
 custom property used as `#current.$fade` must hold a unitless number; a token
 accepts either form.
 
-The space is always `oklch`: it is unbounded, so a wide-gamut color survives a
-round trip that a gamut-limited space would clamp. Nothing configures this —
-see [Color space](configuration.md#color-space).
+Token fades always use `oklch(from …)`: it is unbounded, so a wide-gamut color
+survives a round trip that a gamut-limited space would clamp. `#current` fades
+mix `in oklab`. Nothing configures either — see
+[Color space](configuration.md#color-space).
 
 ---
 
@@ -254,6 +286,9 @@ border: '1bw solid oklch(from #primary l c h / 50%)',  // relative color syntax
 shadow: '0 0 1x color-mix(in oklab, #dark 20%, transparent)',
 ```
 
+Tasty also ships `okhsl()` and `okhst()`, which compile to `rgb()` at parse
+time: `fill: 'okhsl(280 80% 50%)'` → `rgb(40% 38.5% 88.2%)`.
+
 `light-dark()` is the one exception to "always a color": CSS lets it pick between
 values of any type, so it is treated as a color only when its arguments are
 colors. `padding: 'light-dark(1x, 2x)'` still reaches the padding slot.
@@ -291,16 +326,16 @@ fill: '#adaptive.5'; // → oklch(from light-dark(…) l c h / .5)
 
 ## Built-in Units
 
-| Unit | Description        | Example | CSS Output                      |
-| ---- | ------------------ | ------- | ------------------------------- |
-| `x`  | Gap multiplier     | `2x`    | `calc(var(--gap) * 2)`          |
-| `r`  | Border radius      | `1r`    | `var(--radius)`                 |
-| `cr` | Card border radius | `1cr`   | `var(--card-radius)`            |
-| `bw` | Border width       | `2bw`   | `calc(var(--border-width) * 2)` |
-| `ow` | Outline width      | `1ow`   | `var(--outline-width)`          |
-| `sf` | Stable fraction    | `1sf`   | `minmax(0, 1fr)`                |
+| Unit | Description        | Default          | Example | CSS output       |
+| ---- | ------------------ | ---------------- | ------- | ---------------- |
+| `x`  | Spacing step       | `8px`            | `2x`    | `16px`           |
+| `r`  | Border radius      | `6px`            | `1r`    | `6px`            |
+| `cr` | Card border radius | `10px`           | `1cr`   | `10px`           |
+| `bw` | Border width       | `1px`            | `2bw`   | `2px`            |
+| `ow` | Outline width      | `3px`            | `1ow`   | `3px`            |
+| `sf` | Stable fraction    | `minmax(0, Nfr)` | `1sf`   | `minmax(0, 1fr)` |
 
-You can register additional custom units via [`configure()`](configuration.md#options).
+Units compile to plain values. Change the scale with `configure({ units: { x: '4px' } })`, or point a unit at a custom property when it must change at runtime: with `units: { x: 'var(--gap)' }`, `2x` compiles to `calc(2 * var(--gap))`. Setting a `$gap` or `$radius` token does not change the units. Register additional units the same way via [`configure()`](configuration.md#options).
 
 ---
 
@@ -341,6 +376,26 @@ const ElevatedCard = tasty({
 });
 ```
 
+**Where recipes resolve:**
+
+The `recipe` property is resolved on the component root and independently inside each sub-element's styles:
+
+```jsx
+const CardWithPanel = tasty({
+  styles: {
+    recipe: 'card',
+    Panel: {
+      recipe: 'card elevated',
+      padding: '2x', // Overrides the panel's base recipe padding
+    },
+  },
+});
+```
+
+At each level, base recipes are collected in the order listed (later recipes replace earlier values for the same property), then local styles are merged, then post recipes are merged. The merges with local styles and post recipes follow the [state-map extension and replacement rules](#extending-vs-replacing-state-maps).
+
+Recipe definitions themselves cannot contain a `recipe` reference to another recipe: there is no recursive expansion or recipe inheritance. Compose names in the root or sub-element `recipe` property instead. See [Configuration — Recipes](configuration.md#recipes) for an unsupported nesting example.
+
 **Post-merge recipes (`/` separator):**
 
 Recipes listed after `/` are applied _after_ component styles using `mergeStyles`:
@@ -417,12 +472,14 @@ fill: {
 Use `null` inside a state map to remove a state, or `false` to block it entirely (tombstone):
 
 ```jsx
-fill: {
-  pressed: null;
-} // removes pressed from the result
-fill: {
-  disabled: false;
-} // tombstone — no CSS for disabled, blocks recipe too
+const MyButton = tasty(Button, {
+  styles: {
+    fill: {
+      hovered: null, // removes the parent's hovered state
+      disabled: false, // tombstone — no CSS for disabled, blocks recipe too
+    },
+  },
+});
 ```
 
 ### Resetting Properties with `null` and `false`
@@ -472,7 +529,7 @@ const SimpleButton = tasty(Button, {
 
 ### `@media(...)` — Media Queries
 
-Media queries support dimension shorthands and custom unit expansion:
+Media queries support dimension shorthands:
 
 | Shorthand | Expands to |
 | --------- | ---------- |
@@ -494,10 +551,17 @@ fill: {
 | `@media(600px <= w < 1200px)`        | `@media (600px <= width < 1200px)`    |
 | `@media:print`                       | `@media print`                        |
 | `@media:screen`                      | `@media screen`                       |
+| `@media:all`                         | `@media all`                          |
+| `@media:speech`                      | `@media speech`                       |
 | `@media(prefers-color-scheme: dark)` | `@media (prefers-color-scheme: dark)` |
 | `@media(prefers-reduced-motion)`     | `@media (prefers-reduced-motion)`     |
+| `@media(aspect-ratio > 16/9)`        | `@media (aspect-ratio > 16/9)`        |
+
+Tasty units resolve to their literal length inside query conditions, built-in and configured units alike: `@media(w < 40x)` emits `@media (width < 320px)`. A query condition cannot read a custom property, so a unit configured as one (`units: { x: 'var(--gap)' }`) cannot be used there; write that length in `px`, `em`, or `rem`.
 
-Custom units work inside media queries: `@media(w < 40x)` → `@media (width < calc(var(--gap) * 40))`.
+Units are only converted in features that take a length: `width`, `height`, `inline-size`, and `block-size`, with or without `min-`/`max-` (`@media(min-width: 40x)` converts too). Every other feature keeps its value as written, so `@media(min-resolution: 2x)` and `@media(resolution >= 2x)` reach the browser unchanged: there `x` is CSS's own resolution unit, an alias of `dppx`.
+
+When it combines or orders conditions, Tasty compares bounds only within one unit. `@media(w >= 600px) & @media(w < 40em)` keeps both bounds, because a query `em` follows the user's font size, so `600px` and `40em` cannot be ordered at build time.
 
 In practice, define state aliases via `configure({ states })` and use `@mobile` instead of writing the full query in every component.
 
@@ -523,26 +587,31 @@ const Panel = tasty({
 });
 ```
 
-| Tasty syntax                       | CSS output                                     |
-| ---------------------------------- | ---------------------------------------------- |
-| `@(layout, w < 600px)`             | `@container layout (width < 600px)`            |
-| `@(w < 600px)`                     | `@container (width < 600px)`                   |
-| `@(layout, $variant=danger)`       | `@container layout style(--variant: "danger")` |
-| `@(layout, $compact)`              | `@container layout style(--compact)`           |
-| `@(scroll-state(stuck: top))`      | `@container scroll-state(stuck: top)`          |
-| `@(nav, scroll-state(stuck: top))` | `@container nav scroll-state(stuck: top)`      |
+| Tasty syntax                       | CSS output                                   |
+| ---------------------------------- | -------------------------------------------- |
+| `@(layout, w < 600px)`             | `@container layout (width < 600px)`          |
+| `@(w < 600px)`                     | `@container (width < 600px)`                 |
+| `@(layout, $variant=danger)`       | `@container layout style(--variant: danger)` |
+| `@(layout, $compact)`              | `@container layout style(--compact)`         |
+| `@(scroll-state(stuck: top))`      | `@container scroll-state(stuck: top)`        |
+| `@(nav, scroll-state(stuck: top))` | `@container nav scroll-state(stuck: top)`    |
+
+Container style queries use `$prop` (boolean) or `$prop=value` syntax, which maps to CSS `style(--prop)` or `style(--prop: value)`. The value is emitted unquoted, so it matches a custom property set to the identifier `danger`, not the string `"danger"`.
 
-Container style queries use `$prop` (boolean) or `$prop=value` syntax, which maps to CSS `style(--prop)` or `style(--prop: "value")`.
+Other size features pass through as written: `@(aspect-ratio > 1)` → `@container (aspect-ratio > 1)`, `@(orientation: portrait)` → `@container (orientation: portrait)`. They need a container with `containerType: 'size'`, since an `inline-size` container has no block size to compare against.
 
 ### `@supports(...)` — Feature Queries
 
-Feature queries test CSS property support. Use `$` as the first argument to test selector support:
+Feature queries test CSS property support and accept CSS support functions such
+as `at-rule()`. Use `$` as the first argument to test selector support:
 
-| Tasty syntax                | CSS output                        |
-| --------------------------- | --------------------------------- |
-| `@supports(display: grid)`  | `@supports (display: grid)`       |
-| `@supports($, :has(*))`     | `@supports selector(:has(*))`     |
-| `!@supports(display: grid)` | `@supports (not (display: grid))` |
+| Tasty syntax                  | CSS output                          |
+| ----------------------------- | ----------------------------------- |
+| `@supports(display: grid)`    | `@supports (display: grid)`         |
+| `@supports($, :has(*))`       | `@supports selector(:has(*))`       |
+| `@supports(at-rule(@scope))`  | `@supports (at-rule(@scope))`       |
+| `!@supports(display: grid)`   | `@supports (not (display: grid))`   |
+| `!@supports(at-rule(@scope))` | `@supports (not (at-rule(@scope)))` |
 
 ```jsx
 display: {
@@ -551,6 +620,25 @@ display: {
 }
 ```
 
+`at-rule()` tests whether the browser supports the named at-rule. Its surrounding
+parentheses in Tasty's CSS output are valid CSS. Negation and combinations with
+other states use the same syntax as property queries:
+
+```jsx
+color: {
+  _: 'red',
+  '@supports(at-rule(@scope)) & @supports(display: grid)': 'blue',
+}
+```
+
+Use `_` to keep a base value when a browser cannot evaluate a query. A support
+query only detects a browser feature; it does not add an API for authoring the
+queried at-rule in a Tasty style object. For conditional stylesheet imports such
+as `@import url("scoped.css") supports(at-rule(@scope));`, use an ordinary CSS
+stylesheet or document-level `useRawCSS()`. Put imports before other rules in
+that stylesheet. Imports cannot be used in constructable stylesheets, including
+Tasty's adopted-sheet mode for Shadow DOM.
+
 ### `_` — Fallback Floor
 
 By default Tasty makes states **mutually exclusive**: a higher-priority state
@@ -576,12 +664,12 @@ inset: {
 
 ```css
 .t0.t0 {
-  inset: 0...;
+  inset: 0 auto auto auto;
 }
-@container scroll-state(scrolled: block-end) {
-  @supports (container-type: scroll-state) {
+@supports (container-type: scroll-state) {
+  @container scroll-state(scrolled: block-end) {
     .t0.t0 {
-      inset: -80px...;
+      inset: -640px auto auto auto;
     }
   }
 }
@@ -590,7 +678,7 @@ inset: {
 The floor is emitted as a bare rule (no negated `@supports` / container branches),
 so it always applies. When the override matches it wins because it is emitted
 later and all state selectors share the same specificity (see the note on
-`:where()` below).
+`:where()` above).
 
 Notes:
 
@@ -662,7 +750,7 @@ color: {
 | `@root([lang="en"])`   | `:root[lang="en"]`                |
 | `!@root(schema=dark)`  | `:root:not([data-schema="dark"])` |
 
-Root conditions are prepended to the component selector: `:root[data-schema="dark"] .t0.t0 { ... }`.
+Root conditions are prepended to the component selector inside `:where()`: `:where(:root[data-schema="dark"]) .t0.t0 { ... }`.
 
 ### `@own(...)` — Sub-element's Own State
 
@@ -692,6 +780,18 @@ const Nav = tasty({
 
 `@own()` is only valid inside sub-element styles. Using it on root styles emits a warning and is treated as a regular modifier.
 
+When `$` ends in a pseudo-element, the condition attaches to the originating element, before the pseudo-element. CSS accepts no `:where()` after a pseudo-element:
+
+```jsx
+Icon: {
+  $: 'a::before',
+  content: { '': 'none', '@own([rel="next"])': '"→"' },
+},
+// → .t0.t0 a:where([rel="next"])::before { content: "→"; }
+```
+
+This covers every pseudo-element form: `::before`, `::marker`, `::backdrop`, vendor-prefixed ones such as `::-webkit-details-marker`, functional ones such as `::part(label)`, and the legacy `:before`, `:after`, `:first-line`, `:first-letter`. In a `$` list, each item gets the condition before its own pseudo-element. A pseudo-class written after the pseudo-element in `$`, as in `'@::part(label):hover'`, qualifies the pseudo-element and stays after it.
+
 ### `@starting` — Entry Animation
 
 Wraps the rule in `@starting-style`, enabling CSS entry animations for elements as they appear in the DOM:
@@ -701,18 +801,18 @@ const FadeIn = tasty({
   styles: {
     opacity: { '': '1', '@starting': '0' },
     transform: { '': 'scale(1)', '@starting': 'scale(0.95)' },
-    transition: 'opacity 0.3s, translate 0.3s',
+    transition: 'opacity, translate',
   },
 });
 ```
 
 | Tasty syntax | CSS output                           |
 | ------------ | ------------------------------------ |
-| `@starting`  | `@starting-style { .t0.t0 { ... } }` |
+| `@starting`  | `.t0.t0 { @starting-style { ... } }` |
 
 ### `@parent(...)` — Parent Element States
 
-Style based on ancestor element attributes. Uses `:is([selector] *)` / `:not([selector] *)` for symmetric, composable parent checks. Boolean logic (`&`, `|`, `!`, `^`) is supported inside `@parent()`.
+Style based on ancestor element attributes. Uses `:where([selector] *)` / `:where(:not([selector] *))` for symmetric, composable parent checks. Boolean logic (`&`, `|`, `!`, `^`) is supported inside `@parent()`.
 
 ```jsx
 const Highlight = tasty({
@@ -726,15 +826,15 @@ const Highlight = tasty({
 });
 ```
 
-| Syntax                                | CSS Output                                                           |
-| ------------------------------------- | -------------------------------------------------------------------- |
-| `@parent(hovered)`                    | `:is([data-hovered] *)`                                              |
-| `!@parent(hovered)`                   | `:not([data-hovered] *)`                                             |
-| `@parent(hovered, >)`                 | `:is([data-hovered] > *)` (direct parent)                            |
-| `@parent(.active)`                    | `:is(.active *)`                                                     |
-| `@parent(hovered & focused)`          | `:is([data-hovered][data-focused] *)` (same ancestor)                |
-| `@parent(hovered) & @parent(focused)` | `:is([data-hovered] *):is([data-focused] *)` (independent ancestors) |
-| `@parent(hovered \| focused)`         | `:is([data-hovered] *, [data-focused] *)` (OR inside single wrapper) |
+| Syntax                                | CSS Output                                                                 |
+| ------------------------------------- | -------------------------------------------------------------------------- |
+| `@parent(hovered)`                    | `:where([data-hovered] *)`                                                 |
+| `!@parent(hovered)`                   | `:where(:not([data-hovered] *))`                                           |
+| `@parent(hovered, >)`                 | `:where([data-hovered] > *)` (direct parent)                               |
+| `@parent(.active)`                    | `:where(.active *)`                                                        |
+| `@parent(hovered & focused)`          | `:where([data-hovered][data-focused] *)` (same ancestor)                   |
+| `@parent(hovered) & @parent(focused)` | `:where([data-hovered] *):where([data-focused] *)` (independent ancestors) |
+| `@parent(hovered \| focused)`         | `:where([data-hovered] *, [data-focused] *)` (OR inside single wrapper)    |
 
 For sub-elements, the parent check applies to the root element's ancestors:
 
@@ -749,12 +849,12 @@ const Card = tasty({
     },
   },
 });
-// → .t0.t0:is([data-hovered] *) [data-element="Label"]
+// → .t0.t0:where([data-hovered] *) [data-element="Label"]
 ```
 
 ### `:is()`, `:has()` — CSS Structural Pseudo-classes
 
-Use CSS structural pseudo-classes directly in state keys. Capitalized words become `[data-element="..."]` selectors; lowercase words are HTML tags. A trailing combinator (`>`, `+`, `~`) is auto-completed with `*`.
+Use CSS structural pseudo-classes directly in state keys. Capitalized words become `[data-element="..."]` selectors; lowercase words are HTML tags. A trailing combinator (`>`, `+`, `~`) is auto-completed with `*`. Leading combinators (`> Icon`, `+ Icon`) are relative selectors and are valid only inside `:has()`.
 
 `:where()` and `:not()` are also supported but rarely needed — use `:is()` and `!` negation instead.
 
@@ -777,18 +877,18 @@ const Card = tasty({
 });
 ```
 
-| Syntax                 | CSS Output                              | Meaning                                 |
-| ---------------------- | --------------------------------------- | --------------------------------------- |
-| `:has(> Icon)`         | `:has(> [data-element="Icon"])`         | Has Icon as direct child                |
-| `:has(+ Icon)`         | `:has(+ [data-element="Icon"])`         | Immediately followed by an Icon sibling |
-| `:has(~ Icon)`         | `:has(~ [data-element="Icon"])`         | Has an Icon sibling somewhere after     |
-| `:has(Icon +)`         | `:has([data-element="Icon"] + *)`       | Immediately preceded by an Icon sibling |
-| `:has(Icon ~)`         | `:has([data-element="Icon"] ~ *)`       | Has an Icon sibling somewhere before    |
-| `:has(>)`              | `:has(> *)`                             | Has any direct child                    |
-| `:is(> Field + input)` | `:is(> [data-element="Field"] + input)` | Structural match                        |
-| `:has(button)`         | `:has(button)`                          | HTML tag (lowercase, unchanged)         |
-| `!:has(> Icon)`        | `:not(:has(> [data-element="Icon"]))`   | Negation (use `!`)                      |
-| `!:is(Panel)`          | `:not([data-element="Panel"])`          | Negation (use `!:is`)                   |
+| Syntax               | CSS Output                            | Meaning                                 |
+| -------------------- | ------------------------------------- | --------------------------------------- |
+| `:has(> Icon)`       | `:has(> [data-element="Icon"])`       | Has Icon as direct child                |
+| `:has(+ Icon)`       | `:has(+ [data-element="Icon"])`       | Immediately followed by an Icon sibling |
+| `:has(~ Icon)`       | `:has(~ [data-element="Icon"])`       | Has an Icon sibling somewhere after     |
+| `:has(Icon +)`       | `:has([data-element="Icon"] + *)`     | Immediately preceded by an Icon sibling |
+| `:has(Icon ~)`       | `:has([data-element="Icon"] ~ *)`     | Has an Icon sibling somewhere before    |
+| `:has(>)`            | `:has(> *)`                           | Has any direct child                    |
+| `:is(Field + input)` | `:is([data-element="Field"] + input)` | Is an input right after a Field sibling |
+| `:has(button)`       | `:has(button)`                        | HTML tag (lowercase, unchanged)         |
+| `!:has(> Icon)`      | `:not(:has(> [data-element="Icon"]))` | Negation (use `!`)                      |
+| `!:is(Panel)`        | `:not([data-element="Panel"])`        | Negation (use `!:is`)                   |
 
 Combine with other states using boolean logic (`&`, `|`, `!`, `^`):
 
@@ -821,6 +921,8 @@ const Pulse = tasty({
 });
 ```
 
+Keyframes names are case-sensitive and keep their authored case in `animation` and `animationName` (`fadeIn`, not `fadein`), so they match `@keyframes` defined here, in `configure({ keyframes })`, or in plain CSS. Everything else in the value — durations, timing functions, keywords — is parsed as usual.
+
 ---
 
 ## Properties (`@property`)
@@ -833,7 +935,7 @@ const AnimatedGradient = tasty({
     '$gradient-angle': '0deg',
     '#theme': 'okhst(280 80% 50%)',
     image: 'linear-gradient($gradient-angle, #theme, #clear)',
-    transition: '$$gradient-angle 0.3s, ##theme 0.3s',
+    transition: '$$gradient-angle, ##theme',
   },
 });
 ```
@@ -848,6 +950,26 @@ Use explicit `@property` when you need non-default settings like `inherits: fals
 },
 ```
 
+### Default properties
+
+Tasty registers these properties itself. Style handlers read their defaults from them rather than repeating the values inline, so styles work before you define any tokens, and defining a token replaces the initial value.
+
+| Token                                                | Initial value                            | Read by                                                        |
+| ---------------------------------------------------- | ---------------------------------------- | -------------------------------------------------------------- |
+| `#current`                                           | `currentcolor`                           | anything reading `$current-color`, which `color` sets          |
+| `#white`, `#black`                                   | `rgb(255 255 255)`, `rgb(0 0 0)`         | your styles                                                    |
+| `#border`                                            | `currentcolor`                           | `border` with no color                                         |
+| `#outline`                                           | `currentcolor`                           | `outline` with no color                                        |
+| `$gap`, `$radius`, `$border-width`, `$outline-width` | `8px`, `6px`, `1px`, `3px`               | units you point at them, as in `units: { x: 'var(--gap)' }`    |
+| `$transition`                                        | `80ms`                                   | `transition` with no duration                                  |
+| `$sharp-radius`                                      | `0px`                                    | the sharp corners of `radius: 'leaf'` and `radius: 'backleaf'` |
+| `$bold-font-weight`                                  | `700`                                    | `preset: 'name / strong'`                                      |
+| `$font-sans-fallback`, `$font-mono-fallback`         | a `system-ui` and a `ui-monospace` stack | `font` and presets, after `$font-sans` / `$font-mono`          |
+
+Every rendering path emits them: the client injector, the SSR collector (`TastyRegistry`, `tastyIntegration()`, `runWithCollector()`), the `withTastyNext()` shared stylesheet, and the Babel plugin. CSS written with the programmatic API needs [`extractConfigProperties()`](tasty-static.md#programmatic-api), once per stylesheet. Server rendering without a collector, such as Astro without `tastyIntegration()`, emits none of them.
+
+The initial values need `@property` support: Chrome and Edge 85+, Firefox 128+, Safari 16.4+. In older engines a handler that reads one of these tokens resolves to nothing unless your tokens define it: a `border` with no color draws no border, and a `transition` with no duration does not animate. To support those engines, define the tokens your styles rely on in `configure({ tokens })`.
+
 ---
 
 ## Font Face (`@font-face`)
@@ -908,7 +1030,7 @@ Define custom list markers via the CSS `@counter-style` at-rule. Keys are counte
 
 ```ts
 const EmojiList = tasty({
-  tag: 'ol',
+  as: 'ol',
   styles: {
     '@counter-style': {
       thumbs: {
@@ -1000,7 +1122,7 @@ Generated CSS:
 
 A `FunctionParameter` is one of: `true` (bare param), a string CSS type shorthand (`'<length>'`), or `{ syntax?: string; default?: string | number }`.
 
-Functions can also be registered with the [`useFunction`](react-api.md#usefunction) hook or globally via [`configure({ functions })`](configuration.md#functions) (the same map also accepts bare-key parse functions).
+Functions can also be registered with the [`useFunction`](react-api.md#usefunction) style function or globally via [`configure({ functions })`](configuration.md#functions) (the same map also accepts bare-key parse functions).
 
 > `@function` is permanent — injected once and never cleaned up, like `@counter-style`. It is an experimental CSS feature ([Chrome 139+](https://developer.mozilla.org/en-US/docs/Web/CSS/@function)); unsupported browsers safely ignore the native rule, so use it as progressive enhancement — or enable the [`configure({ polyfills: { functions: true } })`](configuration.md#polyfills) inline polyfill to expand `$$name(...)` calls into plain CSS for full cross-browser support.