@tenphi/tasty 3.11.0 → 3.11.1

package/dist/core/index.d.ts

@@ -1,5 +1,5 @@
 import { $ as TastyNamedColors, A as resetStyleBatch, B as getGlobalPredefinedStates, C as SheetInfo, Ct as StyleParser, D as QueuedWrite, Dt as StyleDetailsPart, E as StyleUsage, Et as StyleDetails, F as parseStateKey, G as NoType, H as ConditionNode, I as AtRuleContext, J as Selector, K as NotSelector, L as ParsedAdvancedState, M as StyleResult, N as renderStyles, O as flushStyles, Ot as UnitHandler, P as ParseStateKeyOptions, Q as SuffixForSelector, R as StateParserContext, S as RuleInfo, St as stringifyStyles, T as StyleRule, Tt as ProcessedStyle, U as ConfigTokenValue, V as setGlobalPredefinedStates, W as ConfigTokens, X as StylesInterface, Y as Styles, Z as StylesWithoutSelectors, _ as KeyframesSteps, _t as getGlobalParser, a as FontFaceInput, at as ParsedColor, b as RawCSSResult, bt as parseColor, c as GCConfig, ct as StyleHandler, d as InjectOptions, dt as StyleHandlerResult, et as TastyPresetNames, f as InjectResult, ft as StyleMap, g as KeyframesResult, gt as filterMods, h as KeyframesInfo, ht as StyleValueStateMap, i as FontFaceDescriptors, it as DIRECTIONS, j as RenderResult, k as hasPendingStyleWrites, kt as CSSProperties, l as GCOptions, lt as StyleHandlerDefinition, m as KeyframesCacheEntry, mt as StyleValue, n as CounterStyleDescriptors, nt as CSSMap, o as FunctionDefinition, ot as RawStyleHandler, p as InjectionMode, pt as StylePropValue, q as RecipeStyles, r as DisposeFunction, rt as CUSTOM_UNITS, s as FunctionParameter, st as ResolvedStyleValue, t as CacheMetrics, tt as AnyStyleHandler, ut as StyleHandlerProps, v as PropertyDefinition, vt as getGlobalPredefinedTokens, w as StyleInjectorConfig, wt as ParserOptions, x as RootRegistry, xt as parseStyle, y as PropertyOptions, yt as normalizeColorTokenValue, z as createStateParserContext } from "../types-DJEM_BOJ.js";
-import { $ as createColorFunc, $t as OuterStyleProps, A as keyframes, An as strToRgb, B as styleHandlers, C as getRawCSSText, Cn as DEFAULT_ZERO_NAME_PREFIX, D as injectRawCSS, Dn as getRgbValuesFromRgbaString, E as injectGlobal, En as getNamedColorHex, F as chunkSheetRegistry, G as ChunkName, Gt as ColorStyleProps, H as categorizeStyleKeys, Ht as BlockInnerStyleProps, I as ComputeStylesOptions, J as FONT_CHUNK_STYLES, Jt as ExtraBaseStyleProps, K as DIMENSION_CHUNK_STYLES, Kt as ContainerStyleProps, L as ComputeStylesResult, M as property, N as touch, O as injector, On as hexToRgb, P as ChunkSheetRegistry, Q as resolveFunctionColor, Qt as Mods, R as computeStyles, S as getCSSTextForNode, Sn as DEFAULT_NAME_PREFIX, T as inject, Tn as isSelector, U as APPEARANCE_CHUNK_STYLES, Ut as BlockOuterStyleProps, V as ChunkInfo, Vt as BaseStyleProps, W as CHUNK_NAMES, Wt as BlockStyleProps, X as POSITION_CHUNK_STYLES, Xt as InnerStyleProps, Y as LAYOUT_CHUNK_STYLES, Yt as FlowStyleProps, Z as STYLE_TO_CHUNK, Zt as ModValue, _ as destroy, _n as FLOW_STYLES, a as DebugOptions, an as TastyExtensionConfig, b as gc, bn as POSITION_STYLES, c as tastyDebug, cn as TokenValue, d as modAttrs, dn as BLOCK_INNER_STYLES, en as PositionStyleProps, et as okhstFunction, f as color, fn as BLOCK_OUTER_STYLES, g as createInjector, gn as DIMENSION_STYLES, h as counterStyle, hn as CONTAINER_STYLES, i as DebugChunkInfo, in as TastyCustomProps, j as ownKeyframes, k as isPropertyDefined, kn as hslToRgbValues, l as processTokens, ln as Tokens, m as cleanup, mn as COLOR_STYLES, n as CacheStatus, nn as TagName, nt as okhslFunction, o as InspectResult, on as TastyThemeNames, p as filterBaseProps, pn as BLOCK_STYLES, q as DISPLAY_CHUNK_STYLES, qt as DimensionStyleProps, r as ChunkBreakdown, rn as TastyBaseStylePropNames, rt as okhslPlugin, s as Summary, sn as TextStyleProps, t as CSSOptions, tn as ShortGridStyles, tt as okhstPlugin, u as resolveRecipes, un as BASE_STYLES, v as fontFace, vn as INNER_STYLES, w as holdKeyframes, wn as hasStylesGenerated, x as getCSSText, xn as TEXT_STYLES, y as func, yn as OUTER_STYLES, z as defineHandler } from "../index-xtey-KDu.js";
+import { $ as createColorFunc, $t as OuterStyleProps, A as keyframes, An as strToRgb, B as styleHandlers, C as getRawCSSText, Cn as DEFAULT_ZERO_NAME_PREFIX, D as injectRawCSS, Dn as getRgbValuesFromRgbaString, E as injectGlobal, En as getNamedColorHex, F as chunkSheetRegistry, G as ChunkName, Gt as ColorStyleProps, H as categorizeStyleKeys, Ht as BlockInnerStyleProps, I as ComputeStylesOptions, J as FONT_CHUNK_STYLES, Jt as ExtraBaseStyleProps, K as DIMENSION_CHUNK_STYLES, Kt as ContainerStyleProps, L as ComputeStylesResult, M as property, N as touch, O as injector, On as hexToRgb, P as ChunkSheetRegistry, Q as resolveFunctionColor, Qt as Mods, R as computeStyles, S as getCSSTextForNode, Sn as DEFAULT_NAME_PREFIX, T as inject, Tn as isSelector, U as APPEARANCE_CHUNK_STYLES, Ut as BlockOuterStyleProps, V as ChunkInfo, Vt as BaseStyleProps, W as CHUNK_NAMES, Wt as BlockStyleProps, X as POSITION_CHUNK_STYLES, Xt as InnerStyleProps, Y as LAYOUT_CHUNK_STYLES, Yt as FlowStyleProps, Z as STYLE_TO_CHUNK, Zt as ModValue, _ as destroy, _n as FLOW_STYLES, a as DebugOptions, an as TastyExtensionConfig, b as gc, bn as POSITION_STYLES, c as tastyDebug, cn as TokenValue, d as modAttrs, dn as BLOCK_INNER_STYLES, en as PositionStyleProps, et as okhstFunction, f as color, fn as BLOCK_OUTER_STYLES, g as createInjector, gn as DIMENSION_STYLES, h as counterStyle, hn as CONTAINER_STYLES, i as DebugChunkInfo, in as TastyCustomProps, j as ownKeyframes, k as isPropertyDefined, kn as hslToRgbValues, l as processTokens, ln as Tokens, m as cleanup, mn as COLOR_STYLES, n as CacheStatus, nn as TagName, nt as okhslFunction, o as InspectResult, on as TastyThemeNames, p as filterBaseProps, pn as BLOCK_STYLES, q as DISPLAY_CHUNK_STYLES, qt as DimensionStyleProps, r as ChunkBreakdown, rn as TastyBaseStylePropNames, rt as okhslPlugin, s as Summary, sn as TextStyleProps, t as CSSOptions, tn as ShortGridStyles, tt as okhstPlugin, u as resolveRecipes, un as BASE_STYLES, v as fontFace, vn as INNER_STYLES, w as holdKeyframes, wn as hasStylesGenerated, x as getCSSText, xn as TEXT_STYLES, y as func, yn as OUTER_STYLES, z as defineHandler } from "../index--GdqCPlp.js";
 import { C as PropHandlerProps, D as getGlobalKeyframes, E as getGlobalFunctions, S as PropHandlerDefinition, T as getGlobalFontFaces, _ as FunctionsConfig, a as getNamePrefix, b as SheetManager, c as isConfigLocked, d as TastyPlugin, f as TastyPluginFactory, g as ColorSpace, h as generateTypographyTokens, i as getGlobalRecipes, l as isTestEnvironment, m as TypographyTokenValue, n as configure, o as hasGlobalKeyframes, p as TypographyPreset, r as getConfig, s as hasGlobalRecipes, t as TastyConfig, u as resetConfig, v as ParseFunction, w as getGlobalCounterStyles, x as PropHandler, y as StyleInjector } from "../config-CcxqSZI2.js";
 import { t as mergeStyles } from "../merge-styles-DSkVc6CD.js";
 export { APPEARANCE_CHUNK_STYLES, type AnyStyleHandler, type AtRuleContext, BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, type BaseStyleProps, type BlockInnerStyleProps, type BlockOuterStyleProps, type BlockStyleProps, CHUNK_NAMES, COLOR_STYLES, CONTAINER_STYLES, type CSSMap, CSSOptions, type CSSProperties, CUSTOM_UNITS, type CacheMetrics, CacheStatus, ChunkBreakdown, type ChunkInfo, type ChunkName, ChunkSheetRegistry, type ColorSpace, type ColorStyleProps, type ComputeStylesOptions, type ComputeStylesResult, type ConditionNode, type ConfigTokenValue, type ConfigTokens, type ContainerStyleProps, type CounterStyleDescriptors, DEFAULT_NAME_PREFIX, DEFAULT_ZERO_NAME_PREFIX, DIMENSION_CHUNK_STYLES, DIMENSION_STYLES, DIRECTIONS, DISPLAY_CHUNK_STYLES, DebugChunkInfo, DebugOptions, type DimensionStyleProps, type DisposeFunction, type ExtraBaseStyleProps, FLOW_STYLES, FONT_CHUNK_STYLES, type FlowStyleProps, type FontFaceDescriptors, type FontFaceInput, type FunctionDefinition, type FunctionParameter, type FunctionsConfig, type GCConfig, type GCOptions, INNER_STYLES, type InjectOptions, type InjectResult, type InjectionMode, type InnerStyleProps, InspectResult, type KeyframesCacheEntry, type KeyframesInfo, type KeyframesResult, type KeyframesSteps, LAYOUT_CHUNK_STYLES, type ModValue, type Mods, type NoType, type NotSelector, OUTER_STYLES, type OuterStyleProps, POSITION_CHUNK_STYLES, POSITION_STYLES, type ParseFunction, type ParseStateKeyOptions, type ParsedAdvancedState, type ParsedColor, type ParserOptions, type PositionStyleProps, type ProcessedStyle, type PropHandler, type PropHandlerDefinition, type PropHandlerProps, type PropertyDefinition, type PropertyOptions, type QueuedWrite, type RawCSSResult, type RawStyleHandler, type RecipeStyles, type RenderResult, type ResolvedStyleValue, type RootRegistry, type RuleInfo, STYLE_TO_CHUNK, type Selector, type SheetInfo, SheetManager, type ShortGridStyles, type StateParserContext, type StyleDetails, type StyleDetailsPart, type StyleHandler, type StyleHandlerDefinition, type StyleHandlerProps, type StyleHandlerResult, StyleInjector, type StyleInjectorConfig, type StyleMap, StyleParser, type StylePropValue, type StyleResult, type StyleRule, type StyleUsage, type StyleValue, type StyleValueStateMap, type Styles, type StylesInterface, type StylesWithoutSelectors, type SuffixForSelector, Summary, TEXT_STYLES, type TagName, type TastyBaseStylePropNames, type TastyConfig, type TastyCustomProps, type TastyExtensionConfig, type TastyNamedColors, type TastyPlugin, type TastyPluginFactory, type TastyPresetNames, type TastyThemeNames, type TextStyleProps, type TokenValue, type Tokens, TypographyPreset, TypographyTokenValue, type UnitHandler, categorizeStyleKeys, chunkSheetRegistry, cleanup, color, computeStyles, configure, counterStyle, createColorFunc, createInjector, createStateParserContext, defineHandler, destroy, filterBaseProps, filterMods, flushStyles, fontFace, func, gc, generateTypographyTokens, getCSSText, getCSSTextForNode, getConfig, getGlobalCounterStyles, getGlobalFontFaces, getGlobalFunctions, getGlobalKeyframes, getGlobalParser, getGlobalPredefinedStates, getGlobalPredefinedTokens, getGlobalRecipes, getNamePrefix, getNamedColorHex, getRawCSSText, getRgbValuesFromRgbaString, hasGlobalKeyframes, hasGlobalRecipes, hasPendingStyleWrites, hasStylesGenerated, hexToRgb, holdKeyframes, hslToRgbValues, inject, injectGlobal, injectRawCSS, injector, isConfigLocked, isPropertyDefined, isSelector, isTestEnvironment, keyframes, mergeStyles, modAttrs, normalizeColorTokenValue, okhslFunction, okhslPlugin, okhstFunction, okhstPlugin, ownKeyframes, parseColor, parseStateKey, parseStyle, processTokens, property, renderStyles, resetConfig, resetStyleBatch, resolveFunctionColor, resolveRecipes, setGlobalPredefinedStates, strToRgb, stringifyStyles, styleHandlers, tastyDebug, touch };

package/dist/{index-xtey-KDu.d.ts → index--GdqCPlp.d.ts}

@@ -391,11 +391,23 @@ type TastyBaseProps<K extends StyleList, V extends VariantMap, E extends Element
   tokens?: Tokens;
   /** Sub-element definitions for compound components */
   elements?: E;
-} & Pick<BaseProps, 'qa' | 'qaVal'> & WithVariant<V>;
+} & Pick<BaseProps, 'qa' | 'qaVal'>;
+/**
+ * The names the `variant` option of `tasty(Base, options)` accepts: the
+ * extension's own variants and the base's, as its `variant` prop does. A
+ * union, not an intersection of the two, so an extension can default to a
+ * variant only one of them defines.
+ */
+type ExtensionVariantName<V extends VariantMap, Props> = string extends keyof V ? 'variant' extends keyof Props ? NonNullable<Props['variant' & keyof Props]> : keyof V : keyof V | ('variant' extends keyof Props ? NonNullable<Props['variant' & keyof Props]> : never);
 type TastyProps<K extends StyleList, V extends VariantMap, E extends ElementsDefinition = Record<string, never>, DefaultProps = AnyProps, M extends ModPropsInput = readonly never[], TP extends TokenPropsInput = readonly never[]> = TastyBaseProps<K, V, E, M, TP> & {
   /** The tag name of the element or a React component. */
   as?: string | ComponentType<any>;
-} & Partial<Omit<DefaultProps, 'as' | 'styles' | 'styleProps' | 'modProps' | 'tokenProps' | 'tokens'>>;
+  /**
+   * The variant applied when the `variant` prop is omitted or names no
+   * variant: one of `variants`, or one of the base component's.
+   */
+  variant?: ExtensionVariantName<V, DefaultProps>;
+} & Partial<Omit<DefaultProps, 'as' | 'styles' | 'styleProps' | 'modProps' | 'tokenProps' | 'tokens' | 'variant'>>;
 /**
  * Resolves the props of a polymorphic `as` value (intrinsic tag or component).
  * - For intrinsic tags (`'div'`, `'button'`, ...): returns `JSX.IntrinsicElements[Tag]`.
@@ -412,7 +424,7 @@ type ResolveAsProps<AsType extends ElementType> = AsType extends keyof JSX.Intri
  * Note: Uses a separate index signature with `unknown` instead of an `any`
  * record to ensure strict type checking for styles.
  */
-type TastyElementOptions<K extends StyleList, V extends VariantMap, E extends ElementsDefinition = Record<string, never>, AsType extends ElementType = 'div', M extends ModPropsInput = readonly never[], TP extends TokenPropsInput = readonly never[]> = TastyBaseProps<K, V, E, M, TP> & {
+type TastyElementOptions<K extends StyleList, V extends VariantMap, E extends ElementsDefinition = Record<string, never>, AsType extends ElementType = 'div', M extends ModPropsInput = readonly never[], TP extends TokenPropsInput = readonly never[]> = TastyBaseProps<K, V, E, M, TP> & WithVariant<V> & {
   /** The tag name of the element or a React component. */
   as?: AsType;
 } & Record<string, unknown>;
@@ -1947,4 +1959,4 @@ declare const tastyDebug: {
 };
 //#endregion
 export { createColorFunc as $, OuterStyleProps as $t, keyframes as A, strToRgb as An, TastyElementOptions as At, styleHandlers as B, BasePropsWithoutChildren as Bt, getRawCSSText as C, DEFAULT_ZERO_NAME_PREFIX as Cn, ResolveAsProps as Ct, injectRawCSS as D, getRgbValuesFromRgbaString as Dn, SubElementDefinition as Dt, injectGlobal as E, getNamedColorHex as En, ResolveTokenProps as Et, chunkSheetRegistry as F, VariantMap as Ft, ChunkName as G, ColorStyleProps as Gt, categorizeStyleKeys as H, BlockInnerStyleProps as Ht, ComputeStylesOptions as I, WithVariant as It, FONT_CHUNK_STYLES as J, ExtraBaseStyleProps as Jt, DIMENSION_CHUNK_STYLES as K, ContainerStyleProps as Kt, ComputeStylesResult as L, tasty as Lt, property as M, TastyPolymorphicComponent as Mt, touch as N, TastyProps as Nt, injector as O, hexToRgb as On, SubElementProps as Ot, ChunkSheetRegistry as P, TokenPropsInput as Pt, resolveFunctionColor as Q, Mods as Qt, computeStyles as R, AllBaseProps as Rt, getCSSTextForNode as S, DEFAULT_NAME_PREFIX as Sn, ModPropsInput as St, inject as T, isSelector as Tn, ResolveModProps as Tt, APPEARANCE_CHUNK_STYLES as U, BlockOuterStyleProps as Ut, ChunkInfo as V, BaseStyleProps as Vt, CHUNK_NAMES as W, BlockStyleProps as Wt, POSITION_CHUNK_STYLES as X, InnerStyleProps as Xt, LAYOUT_CHUNK_STYLES as Y, FlowStyleProps as Yt, STYLE_TO_CHUNK as Z, ModValue as Zt, destroy as _, FLOW_STYLES as _n, useStyles as _t, DebugOptions as a, TastyExtensionConfig as an, TastyBatchProvider as at, gc as b, POSITION_STYLES as bn, ElementsDefinition as bt, tastyDebug as c, TokenValue as cn, useFunction as ct, modAttrs as d, BLOCK_INNER_STYLES as dn, UsePropertyOptions as dt, PositionStyleProps as en, okhstFunction as et, color$1 as f, BLOCK_OUTER_STYLES as fn, useProperty as ft, createInjector as g, DIMENSION_STYLES as gn, UseStylesResult as gt, counterStyle as h, CONTAINER_STYLES as hn, useGlobalStyles as ht, DebugChunkInfo as i, TastyCustomProps as in, getDisplayName as it, ownKeyframes as j, TastyElementProps as jt, isPropertyDefined as k, hslToRgbValues as kn, TastyComponentPropsWithDefaults as kt, processTokens as l, Tokens as ln, useCounterStyle as lt, cleanup as m, COLOR_STYLES as mn, useRawCSS as mt, CacheStatus as n, TagName as nn, okhslFunction as nt, InspectResult as o, TastyThemeNames as on, TastyBatchProviderProps as ot, filterBaseProps as p, BLOCK_STYLES as pn, useKeyframes as pt, DISPLAY_CHUNK_STYLES as q, DimensionStyleProps as qt, ChunkBreakdown as r, TastyBaseStylePropNames as rn, okhslPlugin as rt, Summary as s, TextStyleProps as sn, UseFunctionOptions as st, CSSOptions as t, ShortGridStyles as tn, okhstPlugin as tt, resolveRecipes as u, BASE_STYLES as un, useFontFace as ut, fontFace as v, INNER_STYLES as vn, AllBasePropsWithMods as vt, holdKeyframes as w, hasStylesGenerated as wn, ResolveModPropDef as wt, getCSSText as x, TEXT_STYLES as xn, ModPropDef as xt, func as y, OUTER_STYLES as yn, Element$1 as yt, defineHandler as z, BaseProps as zt };
-//# sourceMappingURL=index-xtey-KDu.d.ts.map
+//# sourceMappingURL=index--GdqCPlp.d.ts.map

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { $ as TastyNamedColors, A as resetStyleBatch, B as getGlobalPredefinedStates, C as SheetInfo, Ct as StyleParser, D as QueuedWrite, Dt as StyleDetailsPart, E as StyleUsage, Et as StyleDetails, F as parseStateKey, G as NoType, H as ConditionNode, I as AtRuleContext, J as Selector, K as NotSelector, L as ParsedAdvancedState, M as StyleResult, N as renderStyles, O as flushStyles, Ot as UnitHandler, P as ParseStateKeyOptions, Q as SuffixForSelector, R as StateParserContext, S as RuleInfo, St as stringifyStyles, T as StyleRule, Tt as ProcessedStyle, U as ConfigTokenValue, V as setGlobalPredefinedStates, W as ConfigTokens, X as StylesInterface, Y as Styles, Z as StylesWithoutSelectors, _ as KeyframesSteps, _t as getGlobalParser, a as FontFaceInput, at as ParsedColor, b as RawCSSResult, bt as parseColor, c as GCConfig, ct as StyleHandler, d as InjectOptions, dt as StyleHandlerResult, et as TastyPresetNames, f as InjectResult, ft as StyleMap, g as KeyframesResult, gt as filterMods, h as KeyframesInfo, ht as StyleValueStateMap, i as FontFaceDescriptors, it as DIRECTIONS, j as RenderResult, k as hasPendingStyleWrites, kt as CSSProperties, l as GCOptions, lt as StyleHandlerDefinition, m as KeyframesCacheEntry, mt as StyleValue, n as CounterStyleDescriptors, nt as CSSMap, o as FunctionDefinition, ot as RawStyleHandler, p as InjectionMode, pt as StylePropValue, q as RecipeStyles, r as DisposeFunction, rt as CUSTOM_UNITS, s as FunctionParameter, st as ResolvedStyleValue, t as CacheMetrics, tt as AnyStyleHandler, ut as StyleHandlerProps, v as PropertyDefinition, vt as getGlobalPredefinedTokens, w as StyleInjectorConfig, wt as ParserOptions, x as RootRegistry, xt as parseStyle, y as PropertyOptions, yt as normalizeColorTokenValue, z as createStateParserContext } from "./types-DJEM_BOJ.js";
-import { $ as createColorFunc, $t as OuterStyleProps, A as keyframes, An as strToRgb, At as TastyElementOptions, B as styleHandlers, Bt as BasePropsWithoutChildren, C as getRawCSSText, Cn as DEFAULT_ZERO_NAME_PREFIX, Ct as ResolveAsProps, D as injectRawCSS, Dn as getRgbValuesFromRgbaString, Dt as SubElementDefinition, E as injectGlobal, En as getNamedColorHex, Et as ResolveTokenProps, F as chunkSheetRegistry, Ft as VariantMap, G as ChunkName, Gt as ColorStyleProps, H as categorizeStyleKeys, Ht as BlockInnerStyleProps, I as ComputeStylesOptions, It as WithVariant, J as FONT_CHUNK_STYLES, Jt as ExtraBaseStyleProps, K as DIMENSION_CHUNK_STYLES, Kt as ContainerStyleProps, L as ComputeStylesResult, Lt as tasty, M as property, Mt as TastyPolymorphicComponent, N as touch, Nt as TastyProps, O as injector, On as hexToRgb, Ot as SubElementProps, P as ChunkSheetRegistry, Pt as TokenPropsInput, Q as resolveFunctionColor, Qt as Mods, R as computeStyles, Rt as AllBaseProps, S as getCSSTextForNode, Sn as DEFAULT_NAME_PREFIX, St as ModPropsInput, T as inject, Tn as isSelector, Tt as ResolveModProps, U as APPEARANCE_CHUNK_STYLES, Ut as BlockOuterStyleProps, V as ChunkInfo, Vt as BaseStyleProps, W as CHUNK_NAMES, Wt as BlockStyleProps, X as POSITION_CHUNK_STYLES, Xt as InnerStyleProps, Y as LAYOUT_CHUNK_STYLES, Yt as FlowStyleProps, Z as STYLE_TO_CHUNK, Zt as ModValue, _ as destroy, _n as FLOW_STYLES, _t as useStyles, a as DebugOptions, an as TastyExtensionConfig, at as TastyBatchProvider, b as gc, bn as POSITION_STYLES, bt as ElementsDefinition, c as tastyDebug, cn as TokenValue, ct as useFunction, d as modAttrs, dn as BLOCK_INNER_STYLES, dt as UsePropertyOptions, en as PositionStyleProps, et as okhstFunction, f as color, fn as BLOCK_OUTER_STYLES, ft as useProperty, g as createInjector, gn as DIMENSION_STYLES, gt as UseStylesResult, h as counterStyle, hn as CONTAINER_STYLES, ht as useGlobalStyles, i as DebugChunkInfo, in as TastyCustomProps, it as getDisplayName, j as ownKeyframes, jt as TastyElementProps, k as isPropertyDefined, kn as hslToRgbValues, kt as TastyComponentPropsWithDefaults, l as processTokens, ln as Tokens, lt as useCounterStyle, m as cleanup, mn as COLOR_STYLES, mt as useRawCSS, n as CacheStatus, nn as TagName, nt as okhslFunction, o as InspectResult, on as TastyThemeNames, ot as TastyBatchProviderProps, p as filterBaseProps, pn as BLOCK_STYLES, pt as useKeyframes, q as DISPLAY_CHUNK_STYLES, qt as DimensionStyleProps, r as ChunkBreakdown, rn as TastyBaseStylePropNames, rt as okhslPlugin, s as Summary, sn as TextStyleProps, st as UseFunctionOptions, t as CSSOptions, tn as ShortGridStyles, tt as okhstPlugin, u as resolveRecipes, un as BASE_STYLES, ut as useFontFace, v as fontFace, vn as INNER_STYLES, vt as AllBasePropsWithMods, w as holdKeyframes, wn as hasStylesGenerated, wt as ResolveModPropDef, x as getCSSText, xn as TEXT_STYLES, xt as ModPropDef, y as func, yn as OUTER_STYLES, yt as Element, z as defineHandler, zt as BaseProps } from "./index-xtey-KDu.js";
+import { $ as createColorFunc, $t as OuterStyleProps, A as keyframes, An as strToRgb, At as TastyElementOptions, B as styleHandlers, Bt as BasePropsWithoutChildren, C as getRawCSSText, Cn as DEFAULT_ZERO_NAME_PREFIX, Ct as ResolveAsProps, D as injectRawCSS, Dn as getRgbValuesFromRgbaString, Dt as SubElementDefinition, E as injectGlobal, En as getNamedColorHex, Et as ResolveTokenProps, F as chunkSheetRegistry, Ft as VariantMap, G as ChunkName, Gt as ColorStyleProps, H as categorizeStyleKeys, Ht as BlockInnerStyleProps, I as ComputeStylesOptions, It as WithVariant, J as FONT_CHUNK_STYLES, Jt as ExtraBaseStyleProps, K as DIMENSION_CHUNK_STYLES, Kt as ContainerStyleProps, L as ComputeStylesResult, Lt as tasty, M as property, Mt as TastyPolymorphicComponent, N as touch, Nt as TastyProps, O as injector, On as hexToRgb, Ot as SubElementProps, P as ChunkSheetRegistry, Pt as TokenPropsInput, Q as resolveFunctionColor, Qt as Mods, R as computeStyles, Rt as AllBaseProps, S as getCSSTextForNode, Sn as DEFAULT_NAME_PREFIX, St as ModPropsInput, T as inject, Tn as isSelector, Tt as ResolveModProps, U as APPEARANCE_CHUNK_STYLES, Ut as BlockOuterStyleProps, V as ChunkInfo, Vt as BaseStyleProps, W as CHUNK_NAMES, Wt as BlockStyleProps, X as POSITION_CHUNK_STYLES, Xt as InnerStyleProps, Y as LAYOUT_CHUNK_STYLES, Yt as FlowStyleProps, Z as STYLE_TO_CHUNK, Zt as ModValue, _ as destroy, _n as FLOW_STYLES, _t as useStyles, a as DebugOptions, an as TastyExtensionConfig, at as TastyBatchProvider, b as gc, bn as POSITION_STYLES, bt as ElementsDefinition, c as tastyDebug, cn as TokenValue, ct as useFunction, d as modAttrs, dn as BLOCK_INNER_STYLES, dt as UsePropertyOptions, en as PositionStyleProps, et as okhstFunction, f as color, fn as BLOCK_OUTER_STYLES, ft as useProperty, g as createInjector, gn as DIMENSION_STYLES, gt as UseStylesResult, h as counterStyle, hn as CONTAINER_STYLES, ht as useGlobalStyles, i as DebugChunkInfo, in as TastyCustomProps, it as getDisplayName, j as ownKeyframes, jt as TastyElementProps, k as isPropertyDefined, kn as hslToRgbValues, kt as TastyComponentPropsWithDefaults, l as processTokens, ln as Tokens, lt as useCounterStyle, m as cleanup, mn as COLOR_STYLES, mt as useRawCSS, n as CacheStatus, nn as TagName, nt as okhslFunction, o as InspectResult, on as TastyThemeNames, ot as TastyBatchProviderProps, p as filterBaseProps, pn as BLOCK_STYLES, pt as useKeyframes, q as DISPLAY_CHUNK_STYLES, qt as DimensionStyleProps, r as ChunkBreakdown, rn as TastyBaseStylePropNames, rt as okhslPlugin, s as Summary, sn as TextStyleProps, st as UseFunctionOptions, t as CSSOptions, tn as ShortGridStyles, tt as okhstPlugin, u as resolveRecipes, un as BASE_STYLES, ut as useFontFace, v as fontFace, vn as INNER_STYLES, vt as AllBasePropsWithMods, w as holdKeyframes, wn as hasStylesGenerated, wt as ResolveModPropDef, x as getCSSText, xn as TEXT_STYLES, xt as ModPropDef, y as func, yn as OUTER_STYLES, yt as Element, z as defineHandler, zt as BaseProps } from "./index--GdqCPlp.js";
 import { C as PropHandlerProps, D as getGlobalKeyframes, E as getGlobalFunctions, S as PropHandlerDefinition, T as getGlobalFontFaces, _ as FunctionsConfig, a as getNamePrefix, b as SheetManager, c as isConfigLocked, d as TastyPlugin, f as TastyPluginFactory, g as ColorSpace, h as generateTypographyTokens, i as getGlobalRecipes, l as isTestEnvironment, m as TypographyTokenValue, n as configure, o as hasGlobalKeyframes, p as TypographyPreset, r as getConfig, s as hasGlobalRecipes, t as TastyConfig, u as resetConfig, v as ParseFunction, w as getGlobalCounterStyles, x as PropHandler, y as StyleInjector } from "./config-CcxqSZI2.js";
 import { t as mergeStyles } from "./merge-styles-DSkVc6CD.js";
 export { APPEARANCE_CHUNK_STYLES, type AllBaseProps, type AllBasePropsWithMods, type AnyStyleHandler, type AtRuleContext, BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, type BaseProps, type BasePropsWithoutChildren, type BaseStyleProps, type BlockInnerStyleProps, type BlockOuterStyleProps, type BlockStyleProps, CHUNK_NAMES, COLOR_STYLES, CONTAINER_STYLES, type CSSMap, CSSOptions, type CSSProperties, CUSTOM_UNITS, type CacheMetrics, CacheStatus, ChunkBreakdown, type ChunkInfo, type ChunkName, ChunkSheetRegistry, type ColorSpace, type ColorStyleProps, type ComputeStylesOptions, type ComputeStylesResult, type ConditionNode, type ConfigTokenValue, type ConfigTokens, type ContainerStyleProps, type CounterStyleDescriptors, DEFAULT_NAME_PREFIX, DEFAULT_ZERO_NAME_PREFIX, DIMENSION_CHUNK_STYLES, DIMENSION_STYLES, DIRECTIONS, DISPLAY_CHUNK_STYLES, DebugChunkInfo, DebugOptions, type DimensionStyleProps, type DisposeFunction, Element, type ElementsDefinition, type ExtraBaseStyleProps, FLOW_STYLES, FONT_CHUNK_STYLES, type FlowStyleProps, type FontFaceDescriptors, type FontFaceInput, type FunctionDefinition, type FunctionParameter, type FunctionsConfig, type GCConfig, type GCOptions, INNER_STYLES, type InjectOptions, type InjectResult, type InjectionMode, type InnerStyleProps, InspectResult, type KeyframesCacheEntry, type KeyframesInfo, type KeyframesResult, type KeyframesSteps, LAYOUT_CHUNK_STYLES, type ModPropDef, type ModPropsInput, type ModValue, type Mods, type NoType, type NotSelector, OUTER_STYLES, type OuterStyleProps, POSITION_CHUNK_STYLES, POSITION_STYLES, type ParseFunction, type ParseStateKeyOptions, type ParsedAdvancedState, type ParsedColor, type ParserOptions, type PositionStyleProps, type ProcessedStyle, type PropHandler, type PropHandlerDefinition, type PropHandlerProps, type PropertyDefinition, type PropertyOptions, type QueuedWrite, type RawCSSResult, type RawStyleHandler, type RecipeStyles, type RenderResult, type ResolveAsProps, type ResolveModPropDef, type ResolveModProps, type ResolveTokenProps, type ResolvedStyleValue, type RootRegistry, type RuleInfo, STYLE_TO_CHUNK, type Selector, type SheetInfo, SheetManager, type ShortGridStyles, type StateParserContext, type StyleDetails, type StyleDetailsPart, type StyleHandler, type StyleHandlerDefinition, type StyleHandlerProps, type StyleHandlerResult, StyleInjector, type StyleInjectorConfig, type StyleMap, StyleParser, type StylePropValue, type StyleResult, type StyleRule, type StyleUsage, type StyleValue, type StyleValueStateMap, type Styles, type StylesInterface, type StylesWithoutSelectors, type SubElementDefinition, type SubElementProps, type SuffixForSelector, Summary, TEXT_STYLES, type TagName, type TastyBaseStylePropNames, TastyBatchProvider, type TastyBatchProviderProps, type TastyComponentPropsWithDefaults, type TastyConfig, type TastyCustomProps, type TastyElementOptions, type TastyElementProps, type TastyExtensionConfig, type TastyNamedColors, type TastyPlugin, type TastyPluginFactory, type TastyPolymorphicComponent, type TastyPresetNames, type TastyProps, type TastyThemeNames, type TextStyleProps, type TokenPropsInput, type TokenValue, type Tokens, TypographyPreset, TypographyTokenValue, type UnitHandler, type UseFunctionOptions, type UsePropertyOptions, type UseStylesResult, type VariantMap, type WithVariant, categorizeStyleKeys, chunkSheetRegistry, cleanup, color, computeStyles, configure, counterStyle, createColorFunc, createInjector, createStateParserContext, defineHandler, destroy, filterBaseProps, filterMods, flushStyles, fontFace, func, gc, generateTypographyTokens, getCSSText, getCSSTextForNode, getConfig, getDisplayName, getGlobalCounterStyles, getGlobalFontFaces, getGlobalFunctions, getGlobalKeyframes, getGlobalParser, getGlobalPredefinedStates, getGlobalPredefinedTokens, getGlobalRecipes, getNamePrefix, getNamedColorHex, getRawCSSText, getRgbValuesFromRgbaString, hasGlobalKeyframes, hasGlobalRecipes, hasPendingStyleWrites, hasStylesGenerated, hexToRgb, holdKeyframes, hslToRgbValues, inject, injectGlobal, injectRawCSS, injector, isConfigLocked, isPropertyDefined, isSelector, isTestEnvironment, keyframes, mergeStyles, modAttrs, normalizeColorTokenValue, okhslFunction, okhslPlugin, okhstFunction, okhstPlugin, ownKeyframes, parseColor, parseStateKey, parseStyle, processTokens, property, renderStyles, resetConfig, resetStyleBatch, resolveFunctionColor, resolveRecipes, setGlobalPredefinedStates, strToRgb, stringifyStyles, styleHandlers, tasty, tastyDebug, touch, useCounterStyle, useFontFace, useFunction, useGlobalStyles, useKeyframes, useProperty, useRawCSS, useStyles };

package/docs/ai-agents.md

@@ -10,6 +10,8 @@ Notation: ❌ wrong → ✅ correct.
 
 Color tokens (`#name`), custom properties (`$name`), `preset` names, `recipe` names, state aliases (`@mobile`) and extra units are **project-defined** in `tasty.config.ts` or a `configure({ … })` call. Look them up before writing styles. Never invent a name — reuse an existing one, or add it to the config.
 
+Only Tasty's built-ins exist without config: `#white`, `#black`, `#border`, `#outline`, `#current`, `#clear`, and `$gap`, `$radius`, `$border-width`, `$outline-width`, `$transition`, `$sharp-radius`, `$bold-font-weight`, `$font-sans-fallback`, `$font-mono-fallback`.
+
 ## 1. Where styles go
 
 ```jsx
@@ -85,7 +87,7 @@ The last row goes the other way — longhands over the shorthand — because `fl
 
 ### Units
 
-Tasty units and their defaults: `x` 8px spacing step, `r` 6px radius, `cr` 10px card radius, `bw` 1px border width, `ow` 3px outline width, `sf` → `minmax(0, Nfr)`. They compile to literal values; change them through `units` in the config, not with `$gap`/`$radius` tokens. All CSS units work too, plus anything in `units` in the config. Any other unit is an error. Units are not resolved inside `@media(…)` / `@(…)` conditions — write query lengths in `px`, `em`, or `rem`.
+Tasty units and their defaults: `x` 8px spacing step, `r` 6px radius, `cr` 10px card radius, `bw` 1px border width, `ow` 3px outline width, `sf` → `minmax(0, Nfr)`. They compile to literal values; change them through `units` in the config, not with `$gap`/`$radius` tokens. All CSS units work too, plus anything in `units` in the config. Any other unit is an error. Inside `@media(…)` / `@(…)` conditions units resolve to their literal length (`@media(w < 40x)` → `width < 320px`), unless the project points that unit at a custom property; then write query lengths in `px`, `em`, or `rem`.
 
 Prefer units over raw pixels: `8px` → `1x` … `64px` → `8x`; `radius: '6px'` → `'1r'`; `border: '1px …'` → `'1bw …'`.
 

package/docs/configuration.md

@@ -775,6 +775,7 @@ A handler returns a `CSSMap`, an array of them, or nothing:
 
 - Keys are **kebab-case** CSS property names (`'background-color'`, not `backgroundColor`) or `--custom-property` names. A camelCase key warns in development and is emitted verbatim, which the browser ignores.
 - Values are stringified, so numbers are fine (`{ '-webkit-line-clamp': 3 }`).
+- An array value emits one declaration per entry, in order, so the browser keeps the last one it supports: `{ width: ['-webkit-fill-available', '-moz-available', 'stretch'] }` emits three `width` declarations.
 - The reserved `$` key is a **selector suffix**: `{ $: '& > *:not(:last-child)', 'margin-right': gap }` applies the declarations to a nested selector. It accepts an array to fan out over several.
 - Return an array of maps to emit several declaration sets, each with its own `$`.
 
@@ -875,7 +876,7 @@ Component props are typed from the `tasty()` definition with no setup. Module au
 
 Write the array forms with `as const`. Without it, `modProps: ['isLoading']` widens to `string[]` and every prop on the component is typed `ModValue`, so an `onClick` handler no longer type-checks. A `modProps` value list without `as const` widens to `string`.
 
-`tasty(Base, { … })` keeps `Base`'s prop types and adds none for the options above, which that form ignores — see [Extend an existing component](react-api.md#extend-an-existing-component).
+`tasty(Base, { … })` keeps `Base`'s prop types and sub-elements, and adds the props and sub-elements its own options above declare. Its `variant` accepts both its own variant names and `Base`'s. See [Extend an existing component](react-api.md#extend-an-existing-component).
 
 ### Registering your names and extensions
 

package/docs/design-system.md

@@ -344,7 +344,7 @@ const Button = tasty({
 </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).
+`variant` is typed from the keys, the `default` variant applies when no `variant` prop is passed (or the variant the `variant` option names, such as `variant: 'danger'`), and only the variants that actually render emit CSS. See [React API — Variants](react-api.md#variants).
 
 ### Which styleProps to expose
 

package/docs/dsl.md

@@ -134,7 +134,7 @@ const List = tasty({
     },
   },
 });
-// → .t0.t0 > [data-element="Item"]::after { content: "" }
+// → .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.
@@ -171,7 +171,9 @@ 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.
+`#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:
 
@@ -553,11 +555,14 @@ fill: {
 | `@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`.
 
+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.
 
 ### `@(...)` — Container Queries
@@ -933,6 +938,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`)

package/docs/injector.md

@@ -269,6 +269,8 @@ Dispose, ref-counted cleanup and GC therefore behave identically in every mode.
 
 `gc({ force: true })` and `cleanup()` take bands 4 and 5 together, ignoring capacity. Band 3 is spared even then: an explicit cleanup is still no reason to take rules from a render that has not committed yet.
 
+`tasty()` components cache the class names they computed, so a re-render with the same styles skips the pipeline. Whenever `gc()`, `cleanup()` or `destroy()` deletes rules, those caches are dropped too, so a component whose CSS was collected injects it again on its next render.
+
 > **Why band 3 exists.** Rendering is not commit-aware: a render can resolve a class and commit it a little later, and in between nothing on the page carries it. From outside React that is indistinguishable from a class that is finished, so collection does not try to tell them apart — it leaves alone anything only just noticed to be cold. A render would have to stay pending for the whole window to lose its rules, and it gets them back on its next render.
 >
 > The clock starts when a sweep *notices*, not when the element actually left — nothing observes that moment, so starting it at the sighting is what gives every class the same full window however long ago it went.
@@ -353,7 +355,7 @@ const button2 = inject([rule], { cacheKey: 'button' });
 console.log(button1.className === button2.className); // true
 ```
 
-Without `cacheKey` the class name still matches (it hashes the rules), but the rule is inserted again and the pin count restarts at 1.
+Without `cacheKey` the class name is a hash of the rules, so injecting the same rules again reuses the class the same way: the rules are written once, and each call adds a pin that its own `dispose()` releases.
 
 ### Pinning
 

package/docs/methodology.md

@@ -242,7 +242,7 @@ const Button = tasty({
 <Button variant="danger" size="sm" isLoading />;
 ```
 
-`variant` is typed from the variant keys, the `default` variant applies when no `variant` prop is passed, and only variants that render emit CSS. See [React API — Variants](react-api.md#variants).
+`variant` is typed from the variant keys, the `default` variant applies when no `variant` prop is passed (set the `variant` option, as in `variant: 'danger'`, to fall back to another one), and only variants that render emit CSS. See [React API — Variants](react-api.md#variants).
 
 ---
 
@@ -359,9 +359,9 @@ const LargeCard = tasty(Card, {
 
 Why? Styled wrappers are:
 
-- **Stable** — the style object is defined once at module level, not recreated on every render
+- **Stable** — the style object is defined once at module level, so Tasty merges and computes it once instead of on every render
 - **Composable** — another engineer can extend `LargeCard` further
-- **Inspectable** — give it a `qa` (`tasty(Card, { qa: 'LargeCard', styles })`) and it appears as `TastyWrappedComponent(LargeCard)` in React DevTools and as `data-qa="LargeCard"` in the DOM
+- **Inspectable** — give it a `qa` (`tasty(Card, { qa: 'LargeCard', styles })`) and it appears as `data-qa="LargeCard"` in the DOM; React DevTools shows it as `TastyWrappedComponent(…)` around the base's name
 - **Lint-friendly** — the ESLint plugin's `no-styles-prop` rule flags direct usage
 
 The `styles` prop exists as an escape hatch — for prototyping, one-off overrides during development, or cases where wrapping is impractical. It should not be the default way product engineers customize components.
@@ -382,7 +382,7 @@ See [Best practices](#best-practices) below for the full list of do's and don'ts
 
 ## Wrapping and extension
 
-`tasty(Base, { styles })` is the primary extension mechanism. It creates a new component whose styles are merged with the base component's styles.
+`tasty(Base, { styles })` is the primary extension mechanism. It creates a new component whose styles are merged with the base component's styles. The extension can also declare its own `styleProps`, `modProps`, `tokenProps`, `variants`, and `elements`, and it keeps the base's sub-elements — see [React API — Extend an existing component](react-api.md#extend-an-existing-component).
 
 ```tsx
 import { Button } from 'my-ds';
@@ -478,10 +478,10 @@ This is preferred over `<Card styles={{ border: '1bw solid #danger' }}>` because
 
 1. The styles live in one module-level definition instead of being rebuilt inside render
 2. `DangerCard` can be extended further by others
-3. It is searchable in code, and named in DevTools once you give it a `qa`
+3. It is searchable in code, and carries `data-qa` in the DOM once you give it a `qa`
 4. The ESLint `no-styles-prop` rule encourages this pattern
 
-A wrapper does not re-expose the base's sub-element components: `DangerCard.Title` is `undefined` and not part of its type. Keep using the base's parts inside it — `<DangerCard><Card.Title>…</Card.Title></DangerCard>`. The wrapper's `Title` styles still apply, because they target `[data-element="Title"]`.
+A wrapper keeps the base's sub-element components, typed: `DangerCard.Title` is `Card.Title`, so `<DangerCard><DangerCard.Title>…</DangerCard.Title></DangerCard>` works. The wrapper's `Title` styles apply to it, because they target `[data-element="Title"]`.
 
 ---
 
@@ -618,7 +618,7 @@ const Card = tasty({
 });
 ```
 
-Modifiers are compiled into exclusive selectors once. Changing `styles` at runtime forces Tasty to regenerate and re-inject CSS. `tasty/no-styles-prop` and `tasty/no-runtime-styles-mutation` flag these patterns.
+Modifiers are compiled into exclusive selectors once. A `styles` object that stays the same between renders (a module-level constant or a memoized object) is merged and computed once, but a new object on every render is merged and computed on every render, and each new value generates and injects new CSS. `tasty/no-styles-prop` and `tasty/no-runtime-styles-mutation` flag these patterns.
 
 ### Overusing style prop
 

package/docs/migration-v3.md

@@ -204,7 +204,7 @@ The build-time extraction Next.js wrapper already lived under the `zero` namespa
 
 **The `theme` prop is now implemented.** It maps to a `data-theme` attribute on the rendered element; previously it fell through and was spread onto the DOM raw. Augment `TastyThemeNames` for autocomplete.
 
-**`tasty(Component, options)` no longer leaks factory-only options.** `variants`, `elements`, `styleProps`, `modProps`, and `tokenProps` are stripped instead of being passed to the wrapped component as runtime props, matching the element factory.
+**`tasty(Component, options)` no longer leaks factory-only options.** `variants`, `elements`, `styleProps`, `modProps`, and `tokenProps` are stripped instead of being passed to the wrapped component as runtime props, matching the element factory. Since 3.11 the extension form applies them as the element factory does; see [Extend an existing component](react-api.md#extend-an-existing-component).
 
 **Replacing a built-in style handler now warns.** Built-in handlers are shared across style names, so `configure({ handlers: { fill } })` also takes over `image` and the whole `background-*` family, and `configure({ handlers: { display } })` takes down `flow`, `gap`, `hide`, `overflow`, `whiteSpace`, and `textOverflow`. This was always true; what's new is that a development-mode warning now names exactly what was displaced. If you see it, either declare the whole group and delegate the rest to `styleHandlers.*`, or pick a narrower name. See [Plugins](plugins.md#custom-style-handlers).
 

package/docs/plugins.md

@@ -69,7 +69,7 @@ Two distinctions do most of the work:
 A handler receives a map of the style properties it declared and returns CSS declarations. See [Configuration → Custom Style Handlers](configuration.md#custom-style-handlers) for the definition forms, return shape, the shared-handler groups you must be careful of, and chunk membership. The essentials:
 
 - Values arrive **state-resolved but unparsed** — the raw authored DSL string (`'2x'`, `'#purple.5'`, `true`, `4`). Call the exported `parseStyle()` / `parseColor()` yourself.
-- Return a `CSSMap` with **kebab-case** keys, an array of them, or nothing. `$` is a selector suffix, not a property.
+- Return a `CSSMap` with **kebab-case** keys, an array of them, or nothing. `$` is a selector suffix, not a property. A property whose value is an array gets one declaration per entry, for fallback chains.
 - Handlers must be pure and synchronous. They are called once per state combination and the results are cached.
 - Use `defineHandler(deps, fn)` for multi-dependency handlers so the dependency types are inferred.
 

package/docs/react-api.md

@@ -2,7 +2,7 @@
 
 Use `tasty()` to turn state-aware style definitions into normal React components, extend existing Tasty components, and expose typed styling APIs to consumers.
 
-Every Tasty style function except `useStyles()` — `tasty()` components, `computeStyles()`, `useGlobalStyles()`, `useRawCSS()`, `useKeyframes()`, `useProperty()`, `useFontFace()`, `useCounterStyle()`, and `useFunction()` — is hook-free and works in React Server Components with no `'use client'` directive. `useStyles()` reads the `TastyRegistry` collector from React context, so it is a real hook; in Server Components and outside React, call `computeStyles()` instead. For state maps, tokens, units, and extension semantics, see [Style DSL](dsl.md). For global configuration, see [Configuration](configuration.md). For the broader docs map, see the [Docs Hub](README.md).
+Every Tasty style function — `tasty()` components, `computeStyles()`, `useStyles()`, `useGlobalStyles()`, `useRawCSS()`, `useKeyframes()`, `useProperty()`, `useFontFace()`, `useCounterStyle()`, and `useFunction()` — works in React Server Components with no `'use client'` directive. All of them except `useStyles()` are hook-free. `useStyles()` reads the `TastyRegistry` collector from React context on the client, so it is a real hook there; outside React, call `computeStyles()` instead. For state maps, tokens, units, and extension semantics, see [Style DSL](dsl.md). For global configuration, see [Configuration](configuration.md). For the broader docs map, see the [Docs Hub](README.md).
 
 > **Note:** This file was previously named `runtime.md`. All functionality documented here works in both server and client contexts — "runtime" referred to style computation during React rendering, not to client-side JavaScript.
 
@@ -44,7 +44,29 @@ const PrimaryButton = tasty(Button, {
 
 Style maps merge intelligently — see [Style DSL — Extending vs. Replacing State Maps](dsl.md#extending-vs-replacing-state-maps) for extend mode, replace mode, `@inherit`, `null`, and `false` tombstones.
 
-The extension form forwards props; it does not re-run the factory. `styleProps`, `modProps`, `tokenProps`, `variants`, and `elements` passed to `tasty(Component, …)` are ignored even though they type-check, and the base's sub-components are not copied (`tasty(Card, …).Title` is `undefined`). Declare them on the base component, or create the component with `tasty({ … })` directly.
+The extension form takes the same component options as `tasty({ … })`:
+
+```jsx
+const ActionCard = tasty(Card, {
+  styles: { fill: { '': '#surface', isRaised: '#surface-raised' } },
+  styleProps: ['gap'] as const, // gap="2x" becomes a style
+  modProps: ['isRaised'] as const, // isRaised becomes a mod (data-is-raised)
+  tokenProps: ['accentColor'] as const, // accentColor sets the #accent token
+  variants: {
+    plain: { border: 0 },
+    framed: { border: '2bw #accent' },
+  },
+  variant: 'framed', // applied when no variant prop is passed
+  elements: { Footer: 'footer' },
+});
+
+<ActionCard gap="2x" isRaised accentColor="#purple">
+  <ActionCard.Title>Kept from Card</ActionCard.Title>
+  <ActionCard.Footer>Added here</ActionCard.Footer>
+</ActionCard>;
+```
+
+The extension turns its own `styleProps`, `modProps`, and `tokenProps` into the `styles`, `mods`, and `tokens` it passes to the base, which renders them as usual: mods as `data-*` attributes, tokens as inline custom properties. Its `variants` merge over its `styles`, and the `variant` prop is still forwarded, so it selects the base's own variants too and accepts either set's names. Both sets share that one prop, so a name only one of them defines leaves the other at its fallback: if `Card` had an `accent` variant, `variant="accent"` would apply it together with `framed`, and `variant="plain"` would leave `Card` on its default. For two independent choices, give one of them its own prop, such as a `modProps` value list. `elements` adds sub-components, and the base's are kept: `ActionCard.Title` is `Card.Title`. The returned component is typed with all of these props and sub-components.
 
 `tasty(Component, ...)` always wraps `Component` and forwards every prop to it, so `Component` must be Tasty-aware (i.e. it accepts `styles`, `mods`, `qa`, etc. and renders them through its own Tasty pipeline). To apply styles to a third-party component or a string DOM tag via `className`, use the options-only form with `as`:
 
@@ -303,6 +325,22 @@ const Button = tasty({
 
 With `variant` omitted, or set to a key `variants` does not define, the `default` variant applies; without a `default` key only the base `styles` apply. `variant` is typed from the variant keys.
 
+To fall back to another variant instead, name it in the `variant` option:
+
+```jsx
+const Button = tasty({
+  styles: { padding: '2x 4x' },
+  variants: {
+    primary: { fill: '#blue', color: '#white' },
+    danger: { fill: '#red', color: '#white' },
+  },
+  variant: 'primary',
+});
+
+<Button>Save</Button>; // primary
+<Button variant="danger">Delete</Button>;
+```
+
 ### Extending Variants with Base State Maps
 
 When base `styles` contain an extend-mode state map (an object **without** a `''` key), it is applied **after** the variant merge. This lets you add or override states across all variants without repeating yourself:
@@ -413,13 +451,13 @@ On the client, CSS is injected synchronously into the DOM (idempotent via the in
 
 ## Style Functions
 
-All style functions below except `useStyles()` are plain functions, not React hooks, and work in client components, SSR with a `ServerStyleCollector`, and React Server Components. They keep the `use` prefix for backward compatibility.
+All style functions below work in client components, SSR with a `ServerStyleCollector`, and React Server Components. All except `useStyles()` are plain functions, not React hooks; they keep the `use` prefix for backward compatibility.
 
 In server-only contexts, components that use only Tasty style functions ship no Tasty styling runtime. Astro without `client:*` directives produces no client JavaScript; server-only Next.js RSC follows the same Tasty architecture, while final output depends on the application deployment. Tasty never forces the `'use client'` boundary — that decision belongs to your component when it needs React interactivity (state, effects, event handlers).
 
 ### useStyles
 
-Generate a className from a style object. A thin wrapper around `computeStyles()` that also picks up the `TastyRegistry` collector through React context. That makes it a hook: call it inside a component, and not in a Server Component — use `computeStyles()` there.
+Generate a className from a style object. A thin wrapper around `computeStyles()` that also picks up the `TastyRegistry` collector through React context. That makes it a hook on the client: call it inside a component, and use `computeStyles()` outside React. It also works in a Server Component, where it skips the context lookup; like the other style functions there, it cannot emit CSS itself, so the next `tasty()` element in the tree emits it.
 
 ```tsx
 import { useStyles } from '@tenphi/tasty';
@@ -685,9 +723,10 @@ See the [Functions section of the DSL reference](dsl.md#functions-function) for
 
 - Styles are not updating: make sure `configure()` runs before first render, and verify the generated class name or global rule with [Debug Utilities](debug.md).
 - SSR output looks wrong: check the [SSR guide](ssr.md) for collector setup. All style functions discover the SSR collector via `AsyncLocalStorage` or the global getter registered by `TastyRegistry`.
+- "Server rendering without a style collector" in development: the server render has no request scope, so each `tasty()` element inlines its own CSS and configured globals are not emitted. Add `tastyIntegration()` (Astro), `TastyRegistry` (Next.js), or `runWithCollector()` — see the [SSR guide](ssr.md).
 - Animation/custom property issues: prefer `useKeyframes()` and `useProperty()` over raw CSS when you want Tasty to manage injection and SSR collection for you.
 - For dynamic styles that change over the component lifecycle, use the `id` option in `useGlobalStyles()` and `useRawCSS()` to enable update tracking.
-- RSC inline mode: CSS accumulated by standalone style functions (`useGlobalStyles`, `useRawCSS`, etc.) is flushed into inline `<style>` tags by the next `tasty()` component in the render tree. If your page uses only standalone style functions without any `tasty()` component, the CSS will not be emitted. Ensure at least one `tasty()` component is present in each RSC render tree.
+- RSC inline mode: CSS accumulated by standalone style functions (`useStyles`, `useGlobalStyles`, `useRawCSS`, etc.) is flushed into inline `<style>` tags by the next `tasty()` component in the render tree. If your page uses only standalone style functions without any `tasty()` component, the CSS will not be emitted. Ensure at least one `tasty()` component is present in each RSC render tree.
 
 ---
 

package/docs/ssr.md

@@ -187,14 +187,14 @@ meaning; use root-relative, absolute, or data URLs.
 
 ### Using Tasty in Server Components
 
-Every Tasty style function except `useStyles()` is hook-free and needs no `'use client'`, so it can be used directly in React Server Components:
+Every Tasty style function needs no `'use client'`, so it can be used directly in React Server Components:
 
 - `tasty()` components — dynamic `styleProps` like `<Grid flow="column">` work normally
-- `computeStyles()` — the hook-free equivalent of `useStyles()`, which reads React context and cannot run in a Server Component
+- `useStyles()` and its hook-free equivalent `computeStyles()` — a class name for any element
 - `useGlobalStyles()`, `useRawCSS()` — inject styles by selector
 - `useKeyframes()`, `useProperty()`, `useFontFace()`, `useCounterStyle()`, `useFunction()` — inject ancillary CSS rules
 
-Next.js renders Server Components in a separate module graph that cannot see the collector `TastyRegistry` registers, so their CSS takes the RSC inline path: it is accumulated in a per-request `React.cache` and emitted as an inline `<style>` tag by the next `tasty()` component in the tree. Standalone style functions cannot emit CSS on their own, so make sure a `tasty()` component renders after them in every RSC tree. The RSC path does not emit configured globals (tokens, `@property`, `globalStyles`); those come from `TastyRegistry`'s collector or the `withTastyNext()` shared stylesheet. For the same reason, import the module that calls `configure()` from `app/layout.tsx` as well as from the registry module, so the RSC graph sees the same states, recipes, and units.
+Next.js renders Server Components in a separate module graph that cannot see the collector `TastyRegistry` registers, so their CSS takes the RSC inline path: it is accumulated in a per-request `React.cache` and emitted as an inline `<style>` tag by the next `tasty()` component in the tree. Standalone style functions, `useStyles()` included, cannot emit CSS on their own, so make sure a `tasty()` component renders after them in every RSC tree. The RSC path does not emit configured globals (tokens, `@property`, `globalStyles`); those come from `TastyRegistry`'s collector or the `withTastyNext()` shared stylesheet. For the same reason, import the module that calls `configure()` from `app/layout.tsx` as well as from the registry module, so the RSC graph sees the same states, recipes, and units.
 
 ### Options
 
@@ -241,9 +241,9 @@ import { tasty } from '@tenphi/tasty';
 const Card = tasty({
   styles: {
     padding: '4x',
-    fill: '#surface',
+    fill: '#fff',
     radius: '1r',
-    border: true,
+    border: '1bw solid #ddd',
   },
 });
 
@@ -263,9 +263,9 @@ import Card from '../components/Card.tsx';
 </html>
 ```
 
-**Trade-offs**: Astro renders React with the standard `react` build, where `React.cache` does nothing, so there is no per-request style cache. Every `tasty()` element inlines the full CSS for its classes, even when the same component renders twice. Configured globals (`:root` tokens, `@property` defaults, `globalStyles`, `@font-face`) are never emitted, because only the SSR collector emits them, and CSS from `useGlobalStyles`, `useRawCSS`, `useKeyframes`, `useProperty`, `useFontFace`, `useCounterStyle`, and `useFunction` is dropped.
+**Trade-offs**: Astro renders React with the standard `react` build, where `React.cache` does nothing, so there is no per-request style cache. Every `tasty()` element inlines the full CSS for its classes, even when the same component renders twice. Configured globals (`:root` tokens, `@property` defaults, `globalStyles`, `@font-face`) are never emitted, because only the SSR collector emits them, and CSS from `useGlobalStyles`, `useRawCSS`, `useKeyframes`, `useProperty`, `useFontFace`, `useCounterStyle`, and `useFunction` is dropped. Without the [default properties](dsl.md#default-properties), styles that read them resolve to nothing: `border: true` and `outline: true` draw nothing, and `transition` with no duration does not animate. In development, Tasty warns once that it is rendering without a style collector.
 
-Best for trying Tasty out with unconfigured styles. Use `tastyIntegration()` for anything that relies on `configure()`.
+Best for trying Tasty out with plain values, as above. Use `tastyIntegration()` for anything that relies on `configure()` or on Tasty's default tokens.
 
 ### Astro Integration (recommended)
 
@@ -463,14 +463,14 @@ const fullHtml = `
 
 ```tsx
 // ── Client ──────────────────────────────────────────────
-// Browser-safe: runs hydrateTastyClasses() with window.__TASTY__ on import
-import '@tenphi/tasty/ssr/astro-client';
+import { hydrateTastyClasses } from '@tenphi/tasty/ssr/client';
 import { hydrateRoot } from 'react-dom/client';
 
+hydrateTastyClasses(); // reads window.__TASTY__
 hydrateRoot(document.getElementById('root'), <App />);
 ```
 
-`@tenphi/tasty/ssr` is server-only: it imports `node:async_hooks`, and in a browser bundle rendering throws `AsyncLocalStorage is not a constructor`. Despite its name, `@tenphi/tasty/ssr/astro-client` works with any framework.
+`@tenphi/tasty/ssr/client` is the browser half: it exports `hydrateTastyClasses()` and has no import side effects. A module shared by the server and the client can import `@tenphi/tasty/ssr` too. It is safe in a browser bundle, where there is no server collector to find, and only `runWithCollector()` throws there.
 
 ### Streaming SSR
 
@@ -517,14 +517,15 @@ runWithCollector(collector, () => {
 
 ### Entry points
 
-| Import path                                                                                                                                                                                      | Description                                                                                                                                                                                                     |
-| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `@tenphi/tasty/ssr`                                                                                                                                                                              | Core SSR API (server-only): `ServerStyleCollector`, `createServerStyleCollector`, `runWithCollector`, `getSSRCollector`, `hydrateTastyClasses`; types `ServerStyleArtifact`, `ServerStyleArtifactKind`          |
-| `@tenphi/tasty/ssr/next`                                                                                                                                                                         | Next.js App Router: `TastyRegistry` component                                                                                                                                                                   |
-| `@tenphi/tasty/ssr/next-config`                                                                                                                                                                  | Next.js config wrapper: shared, content-hashed global stylesheet                                                                                                                                                |
-| `@tenphi/tasty/ssr/astro`                                                                                                                                                                        | Astro: `tastyIntegration`, `tastyMiddleware`                                                                                                                                                                    |
-| `@tenphi/tasty/ssr/astro-client`                                                                                                                                                                 | Astro: client-side cache hydration (auto-injected by integration, or import manually)                                                                                                                           |
-| `@tenphi/tasty/ssr/astro-middleware`<br />`@tenphi/tasty/ssr/astro-middleware-static`<br />`@tenphi/tasty/ssr/astro-middleware-extract`<br />`@tenphi/tasty/ssr/astro-middleware-extract-static` | Astro: the middleware entrypoints `tastyIntegration()` registers via `addMiddleware()`. Exported so Astro can resolve them by specifier; you should not import them. For manual setups use `tastyMiddleware()`. |
+| Import path                                                                                                                                                                                      | Description                                                                                                                                                                                                                                                         |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `@tenphi/tasty/ssr`                                                                                                                                                                              | Core SSR API: `ServerStyleCollector`, `createServerStyleCollector`, `runWithCollector`, `getSSRCollector`, `hydrateTastyClasses`; types `ServerStyleArtifact`, `ServerStyleArtifactKind`. Safe to import in a browser bundle; `runWithCollector()` needs the server |
+| `@tenphi/tasty/ssr/client`                                                                                                                                                                       | Browser-safe client hydration for any framework: `hydrateTastyClasses`, no import side effects                                                                                                                                                                      |
+| `@tenphi/tasty/ssr/next`                                                                                                                                                                         | Next.js App Router: `TastyRegistry` component                                                                                                                                                                                                                       |
+| `@tenphi/tasty/ssr/next-config`                                                                                                                                                                  | Next.js config wrapper: shared, content-hashed global stylesheet                                                                                                                                                                                                    |
+| `@tenphi/tasty/ssr/astro`                                                                                                                                                                        | Astro: `tastyIntegration`, `tastyMiddleware`                                                                                                                                                                                                                        |
+| `@tenphi/tasty/ssr/astro-client`                                                                                                                                                                 | Astro: client-side cache hydration (auto-injected by integration, or import manually)                                                                                                                                                                               |
+| `@tenphi/tasty/ssr/astro-middleware`<br />`@tenphi/tasty/ssr/astro-middleware-static`<br />`@tenphi/tasty/ssr/astro-middleware-extract`<br />`@tenphi/tasty/ssr/astro-middleware-extract-static` | Astro: the middleware entrypoints `tastyIntegration()` registers via `addMiddleware()`. Exported so Astro can resolve them by specifier; you should not import them. For manual setups use `tastyMiddleware()`.                                                     |
 
 ### `ServerStyleCollector`
 
@@ -587,11 +588,11 @@ Astro middleware factory. Use for manual middleware composition.
 
 ### `hydrateTastyClasses(classes?)`
 
-Pre-populate the client injector's rules map with class names rendered on the server, marking them as already present in the DOM so `computeStyles()` skips re-injection during hydration. When called without arguments, reads the class list from `window.__TASTY__` (populated by the streaming `<script>` tags emitted during SSR).
+Exported from `@tenphi/tasty/ssr/client` and `@tenphi/tasty/ssr`. Pre-populate the client injector's rules map with class names rendered on the server, marking them as already present in the DOM so `computeStyles()` skips re-injection during hydration. When called without arguments, reads the class list from `window.__TASTY__` (populated by the streaming `<script>` tags emitted during SSR).
 
 ### `runWithCollector(collector, fn)`
 
-Run a function with a `ServerStyleCollector` bound to the current async context via `AsyncLocalStorage`. All style function calls within `fn` (and async continuations) — including `computeStyles()`, `useStyles()`, `useGlobalStyles()`, `useRawCSS()`, `useKeyframes()`, `useProperty()`, `useFontFace()`, `useCounterStyle()`, and `useFunction()` — will find this collector. Returns `fn`'s return value, synchronously unless `fn` returns a promise.
+Run a function with a `ServerStyleCollector` bound to the current async context via `AsyncLocalStorage`. All style function calls within `fn` (and async continuations) — including `computeStyles()`, `useStyles()`, `useGlobalStyles()`, `useRawCSS()`, `useKeyframes()`, `useProperty()`, `useFontFace()`, `useCounterStyle()`, and `useFunction()` — will find this collector. Returns `fn`'s return value, synchronously unless `fn` returns a promise. Throws where `AsyncLocalStorage` is unavailable, such as in a browser.
 
 ---
 
@@ -603,7 +604,7 @@ The `TastyRegistry` or `tastyIntegration` is missing. Ensure your layout wraps t
 
 ### Hydration mismatch warnings
 
-Class names are content hashes of the resolved styles, so render order does not affect them. Unnamed `useKeyframes()` and `useCounterStyle()` names are counters (`tk0`, `tc0`) on both server and client; pass `name` if the two sides can call them in a different order. If you see mismatches, ensure `hydrateTastyClasses()` runs before React hydration. For Next.js, this is automatic. For Astro with `tastyIntegration()`, this is also automatic. For manual Astro middleware setups, import `@tenphi/tasty/ssr/astro-client` in your island components. For custom setups, import `@tenphi/tasty/ssr/astro-client` before `hydrateRoot()`.
+Class names are content hashes of the resolved styles, so render order does not affect them. Unnamed `useKeyframes()` and `useCounterStyle()` names are counters (`tk0`, `tc0`) on both server and client; pass `name` if the two sides can call them in a different order. If you see mismatches, ensure `hydrateTastyClasses()` runs before React hydration. For Next.js, this is automatic. For Astro with `tastyIntegration()`, this is also automatic. For manual Astro middleware setups, import `@tenphi/tasty/ssr/astro-client` in your island components. For custom setups, call `hydrateTastyClasses()` from `@tenphi/tasty/ssr/client` before `hydrateRoot()`.
 
 Class names are also derived from the _resolved_ styles, so the server and the client must configure Tasty identically. Anything that changes what a component's styles resolve to will produce a mismatch if it is registered on only one side — `namePrefix`, `recipes`, `handlers`, and the `propHandlers` / `baseStyleProps` extension points described in [Plugins](plugins.md). Call the same `configure()` on both; global CSS is deduplicated automatically, so no `typeof window` guard is needed.
 
@@ -614,8 +615,9 @@ Class names are also derived from the _resolved_ styles, so the server and the c
 **Component CSS**: SSR `<style data-tasty-ssr>` tags remain in the DOM. The client injector creates separate `<style>` elements for any new styles. SSR styles are never modified or removed by the client. If this is a concern for very large apps, you can remove the SSR style tags and hydration scripts manually after hydration:
 
 ```tsx
-import '@tenphi/tasty/ssr/astro-client'; // runs hydrateTastyClasses()
+import { hydrateTastyClasses } from '@tenphi/tasty/ssr/client';
 
+hydrateTastyClasses();
 hydrateRoot(root, <App />);
 
 // Optional: remove SSR style tags and class-list scripts after hydration
@@ -627,4 +629,8 @@ document.querySelectorAll('script').forEach((el) => {
 
 ### `AsyncLocalStorage` not available
 
-`@tenphi/tasty/ssr` imports `node:async_hooks` and is server-only. In a browser bundle the module is stubbed and rendering throws `AsyncLocalStorage is not a constructor`. On the client, import `@tenphi/tasty/ssr/astro-client` (it works with any framework) or use `@tenphi/tasty/ssr/next`, which hydrates automatically.
+`runWithCollector()` throws `runWithCollector() needs AsyncLocalStorage from node:async_hooks` where the runtime has no `AsyncLocalStorage`, such as in a browser bundle. Call it on the server. The rest of `@tenphi/tasty/ssr` is safe to import in a browser bundle; on the client, call `hydrateTastyClasses()` from `@tenphi/tasty/ssr/client`, or use `@tenphi/tasty/ssr/next`, which hydrates automatically.
+
+### "Server rendering without a style collector" warning
+
+Tasty rendered on the server with no collector and no React Server Components request scope: Astro without `tastyIntegration()`, a client component server-rendered without `TastyRegistry`, or a custom setup that skips `runWithCollector()`. Each `tasty()` element then inlines all of its CSS, and configured globals (tokens, the default `@property` set, `globalStyles`, `@font-face`) and the CSS of the standalone style functions are not emitted. Add the integration for your framework. The warning is shown once, in development only.

package/docs/styles.md

@@ -197,6 +197,9 @@ Element width with min/max control. One, two, or three values set `min-width`, `
 | `"min 2x"` | `2x` | auto | initial |
 | `"max 100%"` | initial | auto | `100%` |
 | `"fixed 200px"` | `200px` | `200px` | `200px` |
+| `"min"` | `1x` | auto | initial |
+| `"max"` | initial | auto | `100%` |
+| `"fixed"` | `max-content` | `max-content` | `max-content` |
 
 **Keywords:** `stretch`, `max-content`, `min-content`, `fit-content`
 
@@ -312,6 +315,8 @@ Background color with design token support. Preferred over `backgroundColor` and
 
 When two colors are provided, the first sets the background color and the second is applied as an overlay gradient layer. This enables independent CSS transitions on each color. With `image` or `backgroundImage` on the same element, the image is layered over the overlay color in one `background-image`.
 
+There is no default fill color, so `fill: true` is ignored with a development warning. Use `false` for no fill.
+
 **Related deprecated props:** `backgroundColor` (use `fill`), `background` (overrides all background props when set — avoid).
 
 ### `image`
@@ -341,6 +346,7 @@ Text color with design token support.
 | `"#current.5"` | Current inherited color at 50% opacity |
 | `"(#primary, #secondary)"` | Fallback: use `#primary`, fall back to `#secondary` |
 | `"light-dark(#dark, #light)"` | CSS color function — see [CSS Color Functions](dsl.md#css-color-functions) |
+| `"#ddd"` | Hex literal, read as the `#ddd` token with the literal as fallback: `var(--ddd-color, #ddd)`, as in every color style |
 | `true` | `currentColor` |
 
 Also sets `$current-color` to the same color, for anything that needs the