@cube-dev/ui-kit 0.197.0 → 0.198.0

package/docs/tasty/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
@@ -76,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">
 ```
@@ -117,20 +129,22 @@ 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. When `$` ends in a pseudo-element, `@own()` describes the pseudo-element instead (see [`@own(...)`](#own--sub-elements-own-state)), so a condition on the element it belongs to stays in `$`, before the pseudo-element: `$: 'a[rel="next"]::before'`.
+
 ### Color Token
 
 Named color prefixed with `#` that maps to CSS custom properties. Supports opacity with `.N` suffix:
 
 ```jsx
-fill: '#purple.5'; // → oklch(from var(--purple-color) l c h / .5)
+fill: '#purple.5'; // → color-mix(in oklab, var(--purple-color) 50%, transparent)
 ```
 
 ### Modifier
@@ -157,16 +171,19 @@ fill: '#current',           // → currentcolor
 color: '(#primary, #secondary)',  // Fallback syntax
 ```
 
-The suffix sets the alpha on the token's color with CSS relative color 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 `color-mix(in oklab, var(--ddd-color, #ddd) 50%, transparent)`. A `#ddd` token, if you define one, wins over the literal.
+
+The suffix fades the token's color by mixing it with `transparent`:
 
 ```jsx
 fill: '#purple.5';
-// → oklch(from var(--purple-color) l c h / .5)
+// → color-mix(in oklab, var(--purple-color) 50%, transparent)
 ```
 
-The channels are copied over and the alpha slot is written, which asks nothing of
-the color beyond _being_ a color. That means the suffix works on every one of
-these:
+The mix asks nothing of the color beyond _being_ a color. That means the suffix
+works on every one of these:
 
 - a token holding a `color-mix()`, a `light-dark()`, or a `color()` in a space
   Tasty cannot convert — none of which have channels to decompose
@@ -174,13 +191,29 @@ these:
 - a `--name-color` variable declared in your own CSS, with no Tasty token
   definition behind it
 
-Two properties follow from writing the alpha slot rather than compositing:
+`color-mix()` is Baseline widely available (Chrome 111, Firefox 113, Safari
+16.2). Two properties follow from mixing rather than writing an alpha channel:
+
+- **Alpha composes.** The mix is premultiplied, so a color that is already
+  translucent is faded further: a token holding `rgb(255 0 0 / .8)` faded to
+  `.5` is alpha `.4`. An opaque token — the usual case — ends at exactly the
+  suffix. System colors are whatever the platform draws, and some are
+  translucent: Chrome and Safari on macOS give `Highlight` an alpha of `.6`, so
+  a token holding it faded to `.5` ends at `.3` there.
+- **A `$prop` alpha must be a number.** `#purple.$fade` emits
+  `calc(var(--fade) * 100%)`, because a mix percentage cannot be a `<number>`,
+  so `$fade` has to hold `.5`, not `50%`.
+
+### `#clear` is transparent
 
-- **Alpha is replaced, not multiplied.** A token holding `rgb(255 0 0 / .8)`
-  faded to `.5` is alpha `.5`, not `.4`.
-- **The alpha may be a number or a percentage.** `#purple.$fade` emits
-  `/ var(--fade)` unchanged, so it works whether `$fade` holds `.5` or `50%` —
-  which is what `--*-opacity` properties are registered to accept.
+`#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
 
@@ -203,42 +236,24 @@ A color that already reads the color it inherits — `#current`, a `#current` fa
 — is not published into it: resolving such a value a second time at a descendant
 would fade it twice.
 
-One case needs the wider floor to be considered. A token _defined_ as `#current`
-and then faded gives relative color syntax a `currentcolor` origin, which Safari
-supports only from 18:
-
-```jsx
-{ '#ink': '#current', fill: '#ink.5' }
-// --ink-color: currentcolor
-// fill: oklch(from currentcolor l c h / .5)  → Chrome, Firefox, Safari 18+
-```
+### `#current` fades compose
 
-Put the fade in the token instead — `{ '#ink': '#current.5' }` — and it goes
-through `color-mix()`, which works from Safari 16.2 and composes like every other
-`#current` fade.
-
-### `#current` composes instead
-
-`#current` is the one exception, 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":
+`currentcolor` is the color an element **inherits**, which an ancestor may
+already have faded, so `#current.4` means "40% of what reaches me":
 
 ```jsx
 fill: '#current.4';
 // → color-mix(in oklab, currentcolor 40%, transparent)
 ```
 
-So a `#current` fade nested inside another one composes: a label at `#current.4`
+A `#current` fade nested inside another one composes: a label at `#current.4`
 with a fill of `#current.18` under it lands at `.072`. Color ramps built on
-`#current` depend on that — replacing would double the opacity of every nested
-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.
+`#current` depend on that.
 
-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).
+Fades always mix `in oklab`: it is unbounded, so a wide-gamut color is not
+clamped, and rectangular, so there is no hue to interpolate against
+`transparent`. Nothing configures it — see
+[Color space](configuration.md#color-space).
 
 ---
 
@@ -256,6 +271,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.
@@ -286,23 +304,52 @@ configure({
 });
 
 fill: '#solid.5'; // → hsl(220 90% 50% / .5)
-fill: '#adaptive.5'; // → oklch(from light-dark(…) l c h / .5)
+fill: '#adaptive.5'; // → color-mix(in oklab, light-dark(…) 50%, transparent)
+```
+
+### Color keywords
+
+CSS named colors (`rebeccapurple`) and system colors (`Canvas`, `CanvasText`,
+`Highlight`, `ButtonText`, `GrayText`, `LinkText`, …) are colors too: they land
+in the color slot of any style and can be a color token's value. System colors
+are what `forced-colors` styles are written in:
+
+```jsx
+const Checkbox = tasty({
+  styles: {
+    '#forced-border': 'CanvasText',
+    border: {
+      '': '1bw #border',
+      '@media(forced-colors: active)': '1bw #forced-border',
+    },
+    outline: { '': false, focused: '2px Highlight' },
+  },
+});
 ```
 
+A custom property whose fallback is a single color is read as a color, so it
+also fills the color slot: `border: '1bw var(--accent, Highlight)'`, as does
+`($accent, Highlight)`. Keywords are case-insensitive: a color token keeps the
+case it was written in, and a property value such as `border` or `fill` emits
+them lowercase.
+
+The deprecated system colors (`Menu`, `Window`, `ButtonHighlight`, …) are not
+recognized.
+
 ---
 
 ## 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).
 
 ---
 
@@ -359,7 +406,7 @@ const CardWithPanel = tasty({
 });
 ```
 
-At each level, base recipes are collected in name order (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).
+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.
 
@@ -439,12 +486,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`
@@ -494,7 +543,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 |
 | --------- | ---------- |
@@ -516,10 +565,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`.
+
+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`.
 
-Custom units work inside media queries: `@media(w < 40x)` → `@media (width < calc(var(--gap) * 40))`.
+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.
 
@@ -545,28 +601,30 @@ 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")`.
+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"`.
+
+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 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(at-rule(@scope))`  | `@supports (at-rule(@scope))`      |
-| `!@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
@@ -620,12 +678,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;
     }
   }
 }
@@ -634,7 +692,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:
 
@@ -706,7 +764,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
 
@@ -736,6 +794,20 @@ 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, `@own()` is the pseudo-element's own state and goes after it:
+
+```jsx
+Label: {
+  $: '@::part(label)',
+  color: { '': '#text', '@own(:focus)': '#primary' },
+},
+// → .t0.t0 [data-element="Label"]::part(label):where(:focus) { … }
+```
+
+A pseudo-element has no attributes, classes, or place in the DOM tree. So a state that tests a modifier (`@own(hovered)`), an attribute (`@own([open])`), a class, or a tree position (`@own(:first-child)`, `@own(:has(…))`) can never match it. Tasty ignores such a state and warns. To condition on the element the pseudo-element belongs to, write it in `$` before the pseudo-element (`$: 'a[rel="next"]::before'`), or use `@parent()` for its ancestors.
+
+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`. Each item of a `$` list is judged on its own. Tasty emits pseudo-class states regardless of browser support. Only some pseudo-elements, such as `::part()` and `::-webkit-scrollbar-thumb`, match states like `:hover` or `:focus` today.
+
 ### `@starting` — Entry Animation
 
 Wraps the rule in `@starting-style`, enabling CSS entry animations for elements as they appear in the DOM:
@@ -752,11 +824,11 @@ const FadeIn = tasty({
 
 | 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({
@@ -770,15 +842,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:
 
@@ -793,12 +865,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.
 
@@ -821,18 +893,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 (`&`, `|`, `!`, `^`):
 
@@ -865,6 +937,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`)
@@ -892,6 +966,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`)
@@ -952,7 +1046,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: {
@@ -1044,7 +1138,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.