@tenphi/tasty 3.10.0 → 3.11.0

package/docs/design-system.md

@@ -42,15 +42,25 @@ configure({
     // Borders
     '#border': '#e0e0e0',
 
-    // Unit values
+    // Spacing and shape scale
     $gap: '8px',
     $radius: '4px',
     '$border-width': '1px',
     '$outline-width': '2px',
   },
+  // Built-in units compile to fixed values by default. Pointing them at the
+  // tokens above lets a theme or density mode change the scale at runtime.
+  units: {
+    x: 'var(--gap)', // 2x → calc(2 * var(--gap))
+    r: 'var(--radius)',
+    bw: 'var(--border-width)',
+    ow: 'var(--outline-width)',
+  },
 });
 ```
 
+Leave out the `units` block to keep the built-in fixed scale (`x` = `8px`, `r` = `6px`, `bw` = `1px`, `ow` = `3px`), or set fixed values there instead (`units: { x: '8px', r: '4px' }`). Define the token a unit points at; until you do, `--gap`, `--radius`, `--border-width`, and `--outline-width` start at the built-in unit values. Boolean shorthands follow the same scale: `radius: true` is `1r`, `border: true` is `1bw`, and `outline: true` is `1ow`. See [Built-in Units](dsl.md#built-in-units).
+
 Tokens are injected as CSS custom properties on `:root` when the first style is rendered. They support state maps for theme-aware values:
 
 ```tsx
@@ -66,7 +76,7 @@ configure({
 
 The `#on-*` convention names the text color that sits on top of a fill — `#on-primary` is the text color on a `#primary` background. This makes state maps self-documenting: `fill: '#primary'` and `color: '#on-primary'` clearly belong together.
 
-For OKHSL-based palette generation with automatic WCAG contrast solving, see [Glaze](https://github.com/tenphi/glaze).
+To generate the whole palette instead of hand-picking values, use [Glaze](https://github.com/tenphi/glaze): it builds light, dark, and high-contrast variants from one hue in the OKHST color space, solves WCAG and APCA contrast, and exports Tasty tokens you can pass straight to `configure({ tokens: theme.tasty() })`.
 
 ### Replace tokens for value aliases
 
@@ -176,11 +186,13 @@ const Card = tasty({
   styles: {
     padding: { '': '4x', '@mobile': '2x' },
     flow: { '': 'row', '@mobile': 'column' },
-    fill: { '': '#surface', '@dark': '#surface-dark' },
+    radius: { '': '1r', '@mobile': '0' },
   },
 });
 ```
 
+Theme switching belongs in tokens (`'#surface': { '': '#fff', '@dark': '#1c1c1e' }`) rather than in component state maps, so components stay theme-agnostic.
+
 Without aliases, the same component would need the full media query expression inlined in every state map — across every property, in every component. Aliases eliminate that duplication.
 
 ---
@@ -279,7 +291,7 @@ const Grid = tasty({
     display: 'grid',
     gap: '1x',
   },
-  styleProps: [...FLOW_STYLES, 'gridColumns', 'gridRows', 'gridAreas'],
+  styleProps: FLOW_STYLES, // includes gridColumns, gridRows, gridAreas
 });
 ```
 
@@ -298,18 +310,54 @@ Product engineers use these to compose layouts without writing CSS:
 </Grid>
 ```
 
+### Interactive components with variants
+
+Variants are named looks that replace each other. Combine them with `modProps` for states that stack, such as size or loading:
+
+```tsx
+const Button = tasty({
+  as: 'button',
+  modProps: { size: ['sm', 'md', 'lg'] as const },
+  styles: {
+    recipe: 'interactive',
+    padding: { '': '1.5x 3x', 'size=sm': '1x 2x', 'size=lg': '2x 4x' },
+    radius: '1r',
+  },
+  variants: {
+    default: {
+      fill: {
+        '': '#primary',
+        ':hover': '#primary-hover',
+        disabled: '#surface',
+      },
+      color: '#on-primary',
+    },
+    danger: {
+      fill: { '': '#danger', ':hover': '#danger-hover', disabled: '#surface' },
+      color: '#on-danger',
+    },
+  },
+});
+
+<Button variant="danger" size="lg">
+  Delete
+</Button>;
+```
+
+`variant` is typed from the keys, the `default` variant applies when no `variant` prop is passed, and only the variants that actually render emit CSS. See [React API — Variants](react-api.md#variants).
+
 ### Which styleProps to expose
 
 Match the prop set to the component's role:
 
-| Component category                         | Recommended styleProps                                         |
-| ------------------------------------------ | -------------------------------------------------------------- |
-| Layout containers (`Space`, `Box`, `Grid`) | `FLOW_STYLES` — flow, gap, align, justify, padding, fill       |
-| Positioned elements (`Button`, `Badge`)    | `POSITION_STYLES` — placeSelf, gridArea, order                 |
-| Text elements                              | `['preset', 'color']` or a custom subset                       |
-| Compound components                        | Typically none — styling happens via sub-elements and wrapping |
+| Component category                         | Recommended styleProps                                                                              |
+| ------------------------------------------ | --------------------------------------------------------------------------------------------------- |
+| Layout containers (`Space`, `Box`, `Grid`) | `FLOW_STYLES` — flow, gap, align/justify/place, grid templates (add `padding` or `fill` explicitly) |
+| Positioned elements (`Button`, `Badge`)    | `POSITION_STYLES` — placeSelf, gridArea, order                                                      |
+| Text elements                              | `['color', ...TEXT_STYLES]` (`preset` is always available)                                          |
+| Compound components                        | Typically none — styling happens via sub-elements and wrapping                                      |
 
-Exposing too many props weakens the design system's constraints. See [Methodology — styleProps as the public API](methodology.md#styleprops-as-the-public-api) for the rationale.
+`BASE_STYLES` (`display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`) are accepted as props on every component without being listed. Exposing too many props weakens the design system's constraints. See [Methodology — styleProps as the public API](methodology.md#styleprops-as-the-public-api) for the rationale.
 
 ---
 
@@ -369,14 +417,14 @@ For sub-element syntax details (selector affix `$`, `@own()`, `elements` config)
 
 ## Defining the override contract
 
-A design system works best when the rules for customization are explicit. Tasty provides three levels of control:
+A design system works best when the rules for customization are explicit. Tasty gives product engineers four sanctioned ways to customize a component, and a few to discourage:
 
 ### What product engineers can do
 
 1. **Use styleProps** — adjust layout, spacing, positioning through the props the component exposes:
 
 ```tsx
-<Space flow="row" gap="3x" padding="2x">
+<Space flow="row" gap="3x" placeItems="center">
 ```
 
 2. **Use modProps** — control component states through typed props instead of `mods`:
@@ -398,7 +446,12 @@ A design system works best when the rules for customization are explicit. Tasty
 ```tsx
 const DangerButton = tasty(Button, {
   styles: {
-    fill: { '': '#danger', ':hover': '#danger-hover' },
+    fill: {
+      '': '#danger',
+      ':hover': '#danger-hover',
+      ':active': '#danger-pressed',
+      disabled: '@inherit', // a map with '' replaces the parent's; keep its disabled branch
+    },
     color: '#on-danger',
   },
 });
@@ -414,6 +467,53 @@ See [Methodology — styles prop vs style prop](methodology.md#styles-prop-vs-st
 
 ---
 
+## Guardrails: linting and types
+
+A vocabulary only holds if mistakes surface early. Register the same names you pass to `configure()` with the ESLint plugin and with TypeScript:
+
+```ts
+// tasty.config.ts — read by @tenphi/eslint-plugin-tasty
+export default {
+  tokens: ['#surface', '#text', '#primary', '#danger', '$gap', '$radius'],
+  states: ['@mobile', '@tablet', '@desktop', '@dark', '@reduced-motion'],
+  presets: ['h1', 'h2', 'h3', 't2', 't3'],
+  recipes: ['card', 'elevated', 'input-reset', 'interactive'],
+  importSources: ['@my-org/ds'], // where product code imports tasty() from
+};
+```
+
+```js
+// eslint.config.js
+import tasty from '@tenphi/eslint-plugin-tasty';
+
+export default [tasty.configs.recommended]; // or tasty.configs.strict
+```
+
+```ts
+// tasty.d.ts
+import '@tenphi/tasty';
+
+declare module '@tenphi/tasty' {
+  interface TastyNamedColors {
+    surface: true;
+    text: true;
+    primary: true;
+    danger: true;
+  }
+  interface TastyPresetNames {
+    h1: true;
+    h2: true;
+    h3: true;
+    t2: true;
+    t3: true;
+  }
+}
+```
+
+Unknown colors, presets, and recipes then fail lint (`valid-color-token`, `valid-preset`, `valid-recipe`), and `strict` adds checks for unknown `$` tokens and state aliases (`valid-custom-property`, `no-unknown-state-alias`). The same names autocomplete in editors. Deriving both lists from the same token and recipe modules that `config.ts` imports keeps all three in sync.
+
+---
+
 ## Project structure
 
 A recommended structure for a design system built on Tasty:
@@ -421,6 +521,8 @@ A recommended structure for a design system built on Tasty:
 ```
 ds/
   config.ts              # configure() — tokens, units, states, recipes
+  tasty.config.ts        # Names the ESLint plugin validates against
+  tasty.d.ts             # TypeScript augmentation for autocomplete
   primitives/
     Space.tsx             # Layout: flex container with FLOW_STYLES
     Box.tsx               # Generic container
@@ -436,7 +538,7 @@ ds/
   tokens/
     colors.ts             # Color token definitions
     typography.ts         # Typography presets for configure({ presets })
-    spacing.ts            # Spacing token definitions
+    units.ts              # Spacing and shape scale for configure({ units })
   index.ts                # Public API: re-exports components + configure
 ```
 

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
@@ -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,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 }
+// → .t0.t0 > [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.
+
 ### Color Token
 
 Named color prefixed with `#` that maps to CSS custom properties. Supports opacity with `.N` suffix:
@@ -157,6 +171,8 @@ fill: '#current',           // → currentcolor
 color: '(#primary, #secondary)',  // Fallback syntax
 ```
 
+`#white`, `#black`, `#border`, and `#outline` are registered by default, and `#clear` is a built-in alias for `transparent` (see [below](#clear-is-transparent)), so they work before you define any tokens.
+
 The suffix sets the alpha on the token's color with CSS relative color syntax:
 
 ```jsx
@@ -182,6 +198,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
@@ -219,7 +246,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":
@@ -236,9 +263,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).
 
 ---
 
@@ -256,6 +284,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.
@@ -293,16 +324,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).
 
 ---
 
@@ -359,7 +390,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 +470,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 +527,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 +549,14 @@ 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)`     |
 
-Custom units work inside media queries: `@media(w < 40x)` → `@media (width < calc(var(--gap) * 40))`.
+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`.
 
 In practice, define state aliases via `configure({ states })` and use `@mobile` instead of writing the full query in every component.
 
@@ -545,28 +582,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)`. 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 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 +659,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 +673,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 +745,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
 
@@ -752,11 +791,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 +809,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 +832,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 +860,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 (`&`, `|`, `!`, `^`):
 
@@ -954,7 +993,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: {
@@ -1046,7 +1085,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.