@tenphi/tasty 0.0.0-snapshot.d82c48b → 0.0.0-snapshot.e0777b6

package/README.md

@@ -364,11 +364,11 @@ const ProfileCard = tasty({
 
 Use `/` to post-apply recipes after local styles when you need recipe states/styles to win the final merge order. Use `none` to skip base recipes: `recipe: 'none / disabled'`.
 
-### Keyframes and `@property`
+### Auto-Inferred `@property`
 
-CSS cannot animate or transition custom properties by default — the browser doesn't know their type. The [`@property`](https://developer.mozilla.org/en-US/docs/Web/CSS/@property) at-rule solves this by declaring a property's syntax (e.g. `<number>`, `<color>`), which unlocks smooth interpolation in transitions and keyframe animations.
+CSS custom properties do not animate smoothly by default because the browser does not know how to interpolate their values. The [`@property`](https://developer.mozilla.org/en-US/docs/Web/CSS/@property) at-rule fixes that by declaring a property's syntax, such as `<number>` or `<color>`.
 
-Tasty automatically infers the type from concrete values and registers `@property` for you — no manual declarations needed:
+In Tasty, you usually do not need to declare `@property` manually. When a custom property is assigned a concrete value, Tasty infers the syntax and registers the matching `@property` for you:
 
 ```tsx
 const Pulse = tasty({
@@ -385,9 +385,13 @@ const Pulse = tasty({
 });
 ```
 
-Here `$pulse-scale: 1` is detected as `<number>`, so `@property --pulse-scale` is injected automatically and the keyframe animation works. Supported types: `<number>`, `<length>`, `<percentage>`, `<angle>`, `<time>`, and `<color>`. This also works across `var()` chains — if `$a` references `var(--b)`, the type propagates once `--b` is resolved.
+Here, `$pulse-scale: 1` is inferred as `<number>`, so Tasty injects `@property --pulse-scale` automatically before using it in the animation. Supported inferred syntaxes: `<number>`, `<length>`, `<percentage>`, `<angle>`, `<time>`, and `<color>`.
 
-Use explicit `@properties` only when you need non-default settings (e.g. `inherits: false`):
+If you prefer full manual control, disable auto-inference globally with `configure({ autoPropertyTypes: false })`.
+
+### Explicit `@properties`
+
+Declare `@properties` yourself only when you need to override the defaults, for example to set `inherits: false` or provide a custom `initialValue`:
 
 ```tsx
 '@properties': {
@@ -395,8 +399,6 @@ Use explicit `@properties` only when you need non-default settings (e.g. `inheri
 },
 ```
 
-Disable auto-inference globally with `configure({ autoPropertyTypes: false })`.
-
 ### React Hooks
 
 For cases where you don't need a full component:

package/dist/styles/fill.js

@@ -10,13 +10,14 @@ function fillStyle({ fill, backgroundColor, image, backgroundImage, backgroundPo
 		const firstColor = parsed.groups[0]?.colors[0];
 		const secondColor = parsed.groups[0]?.colors[1];
 		result["background-color"] = firstColor || colorValue;
-		if (secondColor && !backgroundImage && !image) {
-			result["--tasty-second-fill-color"] = secondColor;
-			result["background-image"] = "linear-gradient(var(--tasty-second-fill-color), var(--tasty-second-fill-color))";
-		}
+		if (secondColor) result["--tasty-second-fill-color"] = secondColor;
 	}
+	const gradientLayer = result["--tasty-second-fill-color"] ? "linear-gradient(var(--tasty-second-fill-color), var(--tasty-second-fill-color))" : null;
 	const imageValue = backgroundImage ?? image;
-	if (imageValue) result["background-image"] = parseStyle(imageValue).output || imageValue;
+	if (imageValue) {
+		const imgCss = parseStyle(imageValue).output || imageValue;
+		result["background-image"] = gradientLayer ? `${imgCss}, ${gradientLayer}` : imgCss;
+	} else if (gradientLayer) result["background-image"] = gradientLayer;
 	if (backgroundPosition) result["background-position"] = parseStyle(backgroundPosition).output || backgroundPosition;
 	if (backgroundSize) result["background-size"] = parseStyle(backgroundSize).output || backgroundSize;
 	if (backgroundRepeat) result["background-repeat"] = backgroundRepeat;

package/dist/styles/fill.js.map

@@ -1 +1 @@
-{"version":3,"file":"fill.js","names":[],"sources":["../../src/styles/fill.ts"],"sourcesContent":["import { parseStyle } from '../utils/styles';\n\nexport function fillStyle({\n  fill,\n  backgroundColor,\n  image,\n  backgroundImage,\n  backgroundPosition,\n  backgroundSize,\n  backgroundRepeat,\n  backgroundAttachment,\n  backgroundOrigin,\n  backgroundClip,\n  background,\n}: {\n  fill?: string;\n  backgroundColor?: string;\n  image?: string;\n  backgroundImage?: string;\n  backgroundPosition?: string;\n  backgroundSize?: string;\n  backgroundRepeat?: string;\n  backgroundAttachment?: string;\n  backgroundOrigin?: string;\n  backgroundClip?: string;\n  background?: string;\n}) {\n  // If background is set, it overrides everything\n  if (background) {\n    const processed = parseStyle(background);\n    return { background: processed.output || background };\n  }\n\n  const result: Record<string, string> = {};\n\n  // Priority: backgroundColor > fill\n  const colorValue = backgroundColor ?? fill;\n  if (colorValue) {\n    const parsed = parseStyle(colorValue);\n    const firstColor = parsed.groups[0]?.colors[0];\n    const secondColor = parsed.groups[0]?.colors[1];\n\n    result['background-color'] = firstColor || colorValue;\n\n    // Apply second color as gradient layer (only if no explicit backgroundImage/image)\n    // Uses a registered custom property to enable CSS transitions\n    if (secondColor && !backgroundImage && !image) {\n      result['--tasty-second-fill-color'] = secondColor;\n      result['background-image'] =\n        'linear-gradient(var(--tasty-second-fill-color), var(--tasty-second-fill-color))';\n    }\n  }\n\n  // Priority: backgroundImage > image (overrides second fill color if set)\n  const imageValue = backgroundImage ?? image;\n  if (imageValue) {\n    const parsed = parseStyle(imageValue);\n    result['background-image'] = parsed.output || imageValue;\n  }\n\n  // Other background properties (pass through with parseStyle for token support)\n  if (backgroundPosition) {\n    result['background-position'] =\n      parseStyle(backgroundPosition).output || backgroundPosition;\n  }\n  if (backgroundSize) {\n    result['background-size'] =\n      parseStyle(backgroundSize).output || backgroundSize;\n  }\n  if (backgroundRepeat) {\n    result['background-repeat'] = backgroundRepeat;\n  }\n  if (backgroundAttachment) {\n    result['background-attachment'] = backgroundAttachment;\n  }\n  if (backgroundOrigin) {\n    result['background-origin'] = backgroundOrigin;\n  }\n  if (backgroundClip) {\n    result['background-clip'] = backgroundClip;\n  }\n\n  if (Object.keys(result).length === 0) return;\n  return result;\n}\n\nfillStyle.__lookupStyles = [\n  'fill',\n  'backgroundColor',\n  'image',\n  'backgroundImage',\n  'backgroundPosition',\n  'backgroundSize',\n  'backgroundRepeat',\n  'backgroundAttachment',\n  'backgroundOrigin',\n  'backgroundClip',\n  'background',\n];\n\nexport function svgFillStyle({ svgFill }: { svgFill?: string }) {\n  if (!svgFill) return;\n\n  const processed = parseStyle(svgFill);\n  svgFill = processed.groups[0]?.colors[0] || svgFill;\n\n  return { fill: svgFill };\n}\n\nsvgFillStyle.__lookupStyles = ['svgFill'];\n"],"mappings":";;;AAEA,SAAgB,UAAU,EACxB,MACA,iBACA,OACA,iBACA,oBACA,gBACA,kBACA,sBACA,kBACA,gBACA,cAaC;AAED,KAAI,WAEF,QAAO,EAAE,YADS,WAAW,WAAW,CACT,UAAU,YAAY;CAGvD,MAAM,SAAiC,EAAE;CAGzC,MAAM,aAAa,mBAAmB;AACtC,KAAI,YAAY;EACd,MAAM,SAAS,WAAW,WAAW;EACrC,MAAM,aAAa,OAAO,OAAO,IAAI,OAAO;EAC5C,MAAM,cAAc,OAAO,OAAO,IAAI,OAAO;AAE7C,SAAO,sBAAsB,cAAc;AAI3C,MAAI,eAAe,CAAC,mBAAmB,CAAC,OAAO;AAC7C,UAAO,+BAA+B;AACtC,UAAO,sBACL;;;CAKN,MAAM,aAAa,mBAAmB;AACtC,KAAI,WAEF,QAAO,sBADQ,WAAW,WAAW,CACD,UAAU;AAIhD,KAAI,mBACF,QAAO,yBACL,WAAW,mBAAmB,CAAC,UAAU;AAE7C,KAAI,eACF,QAAO,qBACL,WAAW,eAAe,CAAC,UAAU;AAEzC,KAAI,iBACF,QAAO,uBAAuB;AAEhC,KAAI,qBACF,QAAO,2BAA2B;AAEpC,KAAI,iBACF,QAAO,uBAAuB;AAEhC,KAAI,eACF,QAAO,qBAAqB;AAG9B,KAAI,OAAO,KAAK,OAAO,CAAC,WAAW,EAAG;AACtC,QAAO;;AAGT,UAAU,iBAAiB;CACzB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,SAAgB,aAAa,EAAE,WAAiC;AAC9D,KAAI,CAAC,QAAS;AAGd,WADkB,WAAW,QAAQ,CACjB,OAAO,IAAI,OAAO,MAAM;AAE5C,QAAO,EAAE,MAAM,SAAS;;AAG1B,aAAa,iBAAiB,CAAC,UAAU"}
+{"version":3,"file":"fill.js","names":[],"sources":["../../src/styles/fill.ts"],"sourcesContent":["import { parseStyle } from '../utils/styles';\n\nexport function fillStyle({\n  fill,\n  backgroundColor,\n  image,\n  backgroundImage,\n  backgroundPosition,\n  backgroundSize,\n  backgroundRepeat,\n  backgroundAttachment,\n  backgroundOrigin,\n  backgroundClip,\n  background,\n}: {\n  fill?: string;\n  backgroundColor?: string;\n  image?: string;\n  backgroundImage?: string;\n  backgroundPosition?: string;\n  backgroundSize?: string;\n  backgroundRepeat?: string;\n  backgroundAttachment?: string;\n  backgroundOrigin?: string;\n  backgroundClip?: string;\n  background?: string;\n}) {\n  // If background is set, it overrides everything\n  if (background) {\n    const processed = parseStyle(background);\n    return { background: processed.output || background };\n  }\n\n  const result: Record<string, string> = {};\n\n  // Priority: backgroundColor > fill\n  const colorValue = backgroundColor ?? fill;\n  if (colorValue) {\n    const parsed = parseStyle(colorValue);\n    const firstColor = parsed.groups[0]?.colors[0];\n    const secondColor = parsed.groups[0]?.colors[1];\n\n    result['background-color'] = firstColor || colorValue;\n\n    if (secondColor) {\n      result['--tasty-second-fill-color'] = secondColor;\n    }\n  }\n\n  const gradientLayer = result['--tasty-second-fill-color']\n    ? 'linear-gradient(var(--tasty-second-fill-color), var(--tasty-second-fill-color))'\n    : null;\n\n  // Priority: backgroundImage > image\n  const imageValue = backgroundImage ?? image;\n  if (imageValue) {\n    const parsed = parseStyle(imageValue);\n    const imgCss = parsed.output || imageValue;\n\n    result['background-image'] = gradientLayer\n      ? `${imgCss}, ${gradientLayer}`\n      : imgCss;\n  } else if (gradientLayer) {\n    result['background-image'] = gradientLayer;\n  }\n\n  // Other background properties (pass through with parseStyle for token support)\n  if (backgroundPosition) {\n    result['background-position'] =\n      parseStyle(backgroundPosition).output || backgroundPosition;\n  }\n  if (backgroundSize) {\n    result['background-size'] =\n      parseStyle(backgroundSize).output || backgroundSize;\n  }\n  if (backgroundRepeat) {\n    result['background-repeat'] = backgroundRepeat;\n  }\n  if (backgroundAttachment) {\n    result['background-attachment'] = backgroundAttachment;\n  }\n  if (backgroundOrigin) {\n    result['background-origin'] = backgroundOrigin;\n  }\n  if (backgroundClip) {\n    result['background-clip'] = backgroundClip;\n  }\n\n  if (Object.keys(result).length === 0) return;\n  return result;\n}\n\nfillStyle.__lookupStyles = [\n  'fill',\n  'backgroundColor',\n  'image',\n  'backgroundImage',\n  'backgroundPosition',\n  'backgroundSize',\n  'backgroundRepeat',\n  'backgroundAttachment',\n  'backgroundOrigin',\n  'backgroundClip',\n  'background',\n];\n\nexport function svgFillStyle({ svgFill }: { svgFill?: string }) {\n  if (!svgFill) return;\n\n  const processed = parseStyle(svgFill);\n  svgFill = processed.groups[0]?.colors[0] || svgFill;\n\n  return { fill: svgFill };\n}\n\nsvgFillStyle.__lookupStyles = ['svgFill'];\n"],"mappings":";;;AAEA,SAAgB,UAAU,EACxB,MACA,iBACA,OACA,iBACA,oBACA,gBACA,kBACA,sBACA,kBACA,gBACA,cAaC;AAED,KAAI,WAEF,QAAO,EAAE,YADS,WAAW,WAAW,CACT,UAAU,YAAY;CAGvD,MAAM,SAAiC,EAAE;CAGzC,MAAM,aAAa,mBAAmB;AACtC,KAAI,YAAY;EACd,MAAM,SAAS,WAAW,WAAW;EACrC,MAAM,aAAa,OAAO,OAAO,IAAI,OAAO;EAC5C,MAAM,cAAc,OAAO,OAAO,IAAI,OAAO;AAE7C,SAAO,sBAAsB,cAAc;AAE3C,MAAI,YACF,QAAO,+BAA+B;;CAI1C,MAAM,gBAAgB,OAAO,+BACzB,oFACA;CAGJ,MAAM,aAAa,mBAAmB;AACtC,KAAI,YAAY;EAEd,MAAM,SADS,WAAW,WAAW,CACf,UAAU;AAEhC,SAAO,sBAAsB,gBACzB,GAAG,OAAO,IAAI,kBACd;YACK,cACT,QAAO,sBAAsB;AAI/B,KAAI,mBACF,QAAO,yBACL,WAAW,mBAAmB,CAAC,UAAU;AAE7C,KAAI,eACF,QAAO,qBACL,WAAW,eAAe,CAAC,UAAU;AAEzC,KAAI,iBACF,QAAO,uBAAuB;AAEhC,KAAI,qBACF,QAAO,2BAA2B;AAEpC,KAAI,iBACF,QAAO,uBAAuB;AAEhC,KAAI,eACF,QAAO,qBAAqB;AAG9B,KAAI,OAAO,KAAK,OAAO,CAAC,WAAW,EAAG;AACtC,QAAO;;AAGT,UAAU,iBAAiB;CACzB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,SAAgB,aAAa,EAAE,WAAiC;AAC9D,KAAI,CAAC,QAAS;AAGd,WADkB,WAAW,QAAQ,CACjB,OAAO,IAAI,OAAO,MAAM;AAE5C,QAAO,EAAE,MAAM,SAAS;;AAG1B,aAAa,iBAAiB,CAAC,UAAU"}

package/dist/tasty.d.ts

@@ -99,8 +99,6 @@ type TastyComponentPropsWithDefaults<Props extends PropsWithStyles, DefaultProps
 declare function tasty<K extends StyleList, V extends VariantMap, E extends ElementsDefinition = Record<string, never>, Tag extends keyof JSX.IntrinsicElements = 'div'>(options: TastyElementOptions<K, V, E, Tag>, secondArg?: never): ForwardRefExoticComponent<PropsWithoutRef<TastyElementProps<K, V, Tag>> & RefAttributes<unknown>> & SubElementComponents<E>;
 declare function tasty<Props extends PropsWithStyles, DefaultProps extends Partial<Props> = Partial<Props>>(Component: ComponentType<Props>, options?: TastyProps<never, never, Record<string, never>, Props>): ComponentType<TastyComponentPropsWithDefaults<Props, DefaultProps>>;
 declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementTagNameMap> & {
-  all?: StyleValue<csstype.Globals | undefined> | StyleValueStateMap<csstype.Globals | undefined>;
-  page?: StyleValue<csstype.Property.Page | undefined> | StyleValueStateMap<csstype.Property.Page | undefined>;
   color?: StyleValue<string | boolean | undefined> | StyleValueStateMap<string | boolean | undefined>;
   fill?: StyleValue<boolean | (string & {}) | `#${string}` | `#${string}.0` | `#${string}.7` | `#${string}.1` | `#${string}.2` | `#${string}.3` | `#${string}.4` | `#${string}.5` | `#${string}.6` | `#${string}.8` | `#${string}.9` | `#${string}.00` | `#${string}.07` | `#${string}.01` | `#${string}.02` | `#${string}.03` | `#${string}.04` | `#${string}.05` | `#${string}.06` | `#${string}.08` | `#${string}.09` | `#${string}.70` | `#${string}.77` | `#${string}.71` | `#${string}.72` | `#${string}.73` | `#${string}.74` | `#${string}.75` | `#${string}.76` | `#${string}.78` | `#${string}.79` | `#${string}.10` | `#${string}.17` | `#${string}.11` | `#${string}.12` | `#${string}.13` | `#${string}.14` | `#${string}.15` | `#${string}.16` | `#${string}.18` | `#${string}.19` | `#${string}.20` | `#${string}.27` | `#${string}.21` | `#${string}.22` | `#${string}.23` | `#${string}.24` | `#${string}.25` | `#${string}.26` | `#${string}.28` | `#${string}.29` | `#${string}.30` | `#${string}.37` | `#${string}.31` | `#${string}.32` | `#${string}.33` | `#${string}.34` | `#${string}.35` | `#${string}.36` | `#${string}.38` | `#${string}.39` | `#${string}.40` | `#${string}.47` | `#${string}.41` | `#${string}.42` | `#${string}.43` | `#${string}.44` | `#${string}.45` | `#${string}.46` | `#${string}.48` | `#${string}.49` | `#${string}.50` | `#${string}.57` | `#${string}.51` | `#${string}.52` | `#${string}.53` | `#${string}.54` | `#${string}.55` | `#${string}.56` | `#${string}.58` | `#${string}.59` | `#${string}.60` | `#${string}.67` | `#${string}.61` | `#${string}.62` | `#${string}.63` | `#${string}.64` | `#${string}.65` | `#${string}.66` | `#${string}.68` | `#${string}.69` | `#${string}.80` | `#${string}.87` | `#${string}.81` | `#${string}.82` | `#${string}.83` | `#${string}.84` | `#${string}.85` | `#${string}.86` | `#${string}.88` | `#${string}.89` | `#${string}.90` | `#${string}.97` | `#${string}.91` | `#${string}.92` | `#${string}.93` | `#${string}.94` | `#${string}.95` | `#${string}.96` | `#${string}.98` | `#${string}.99` | `#${string}.100` | `rgb(${string})` | `rgba(${string})` | undefined> | StyleValueStateMap<boolean | (string & {}) | `#${string}` | `#${string}.0` | `#${string}.7` | `#${string}.1` | `#${string}.2` | `#${string}.3` | `#${string}.4` | `#${string}.5` | `#${string}.6` | `#${string}.8` | `#${string}.9` | `#${string}.00` | `#${string}.07` | `#${string}.01` | `#${string}.02` | `#${string}.03` | `#${string}.04` | `#${string}.05` | `#${string}.06` | `#${string}.08` | `#${string}.09` | `#${string}.70` | `#${string}.77` | `#${string}.71` | `#${string}.72` | `#${string}.73` | `#${string}.74` | `#${string}.75` | `#${string}.76` | `#${string}.78` | `#${string}.79` | `#${string}.10` | `#${string}.17` | `#${string}.11` | `#${string}.12` | `#${string}.13` | `#${string}.14` | `#${string}.15` | `#${string}.16` | `#${string}.18` | `#${string}.19` | `#${string}.20` | `#${string}.27` | `#${string}.21` | `#${string}.22` | `#${string}.23` | `#${string}.24` | `#${string}.25` | `#${string}.26` | `#${string}.28` | `#${string}.29` | `#${string}.30` | `#${string}.37` | `#${string}.31` | `#${string}.32` | `#${string}.33` | `#${string}.34` | `#${string}.35` | `#${string}.36` | `#${string}.38` | `#${string}.39` | `#${string}.40` | `#${string}.47` | `#${string}.41` | `#${string}.42` | `#${string}.43` | `#${string}.44` | `#${string}.45` | `#${string}.46` | `#${string}.48` | `#${string}.49` | `#${string}.50` | `#${string}.57` | `#${string}.51` | `#${string}.52` | `#${string}.53` | `#${string}.54` | `#${string}.55` | `#${string}.56` | `#${string}.58` | `#${string}.59` | `#${string}.60` | `#${string}.67` | `#${string}.61` | `#${string}.62` | `#${string}.63` | `#${string}.64` | `#${string}.65` | `#${string}.66` | `#${string}.68` | `#${string}.69` | `#${string}.80` | `#${string}.87` | `#${string}.81` | `#${string}.82` | `#${string}.83` | `#${string}.84` | `#${string}.85` | `#${string}.86` | `#${string}.88` | `#${string}.89` | `#${string}.90` | `#${string}.97` | `#${string}.91` | `#${string}.92` | `#${string}.93` | `#${string}.94` | `#${string}.95` | `#${string}.96` | `#${string}.98` | `#${string}.99` | `#${string}.100` | `rgb(${string})` | `rgba(${string})` | undefined>;
   font?: StyleValue<boolean | csstype.Property.FontFamily | undefined> | StyleValueStateMap<boolean | csstype.Property.FontFamily | undefined>;
@@ -393,6 +391,7 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
   paddingLeft?: StyleValue<csstype.Property.PaddingLeft<string | number> | undefined> | StyleValueStateMap<csstype.Property.PaddingLeft<string | number> | undefined>;
   paddingRight?: StyleValue<csstype.Property.PaddingRight<string | number> | undefined> | StyleValueStateMap<csstype.Property.PaddingRight<string | number> | undefined>;
   paddingTop?: StyleValue<csstype.Property.PaddingTop<string | number> | undefined> | StyleValueStateMap<csstype.Property.PaddingTop<string | number> | undefined>;
+  page?: StyleValue<csstype.Property.Page | undefined> | StyleValueStateMap<csstype.Property.Page | undefined>;
   paintOrder?: StyleValue<csstype.Property.PaintOrder | undefined> | StyleValueStateMap<csstype.Property.PaintOrder | undefined>;
   perspective?: StyleValue<csstype.Property.Perspective<string | number> | undefined> | StyleValueStateMap<csstype.Property.Perspective<string | number> | undefined>;
   perspectiveOrigin?: StyleValue<csstype.Property.PerspectiveOrigin<string | number> | undefined> | StyleValueStateMap<csstype.Property.PerspectiveOrigin<string | number> | undefined>;
@@ -530,6 +529,7 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
   y?: StyleValue<csstype.Property.Y<string | number> | undefined> | StyleValueStateMap<csstype.Property.Y<string | number> | undefined>;
   zIndex?: StyleValue<csstype.Property.ZIndex | undefined> | StyleValueStateMap<csstype.Property.ZIndex | undefined>;
   zoom?: StyleValue<csstype.Property.Zoom | undefined> | StyleValueStateMap<csstype.Property.Zoom | undefined>;
+  all?: StyleValue<csstype.Globals | undefined> | StyleValueStateMap<csstype.Globals | undefined>;
   animation?: StyleValue<csstype.Property.Animation<string & {}> | undefined> | StyleValueStateMap<csstype.Property.Animation<string & {}> | undefined>;
   animationRange?: StyleValue<csstype.Property.AnimationRange<string | number> | undefined> | StyleValueStateMap<csstype.Property.AnimationRange<string | number> | undefined>;
   background?: StyleValue<csstype.Property.Background<string | number> | undefined> | StyleValueStateMap<csstype.Property.Background<string | number> | undefined>;
@@ -976,7 +976,7 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
   "@keyframes"?: StyleValue<Record<string, KeyframesSteps> | undefined> | StyleValueStateMap<Record<string, KeyframesSteps> | undefined>;
   "@properties"?: StyleValue<Record<string, PropertyDefinition> | undefined> | StyleValueStateMap<Record<string, PropertyDefinition> | undefined>;
   recipe?: StyleValue<string | undefined> | StyleValueStateMap<string | undefined>;
-} & BaseStyleProps & WithVariant<VariantMap> & Omit<Omit<AllHTMLAttributes<HTMLElement>, keyof react.ClassAttributes<HTMLDivElement> | keyof react.HTMLAttributes<HTMLDivElement>> & react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement>, "all" | "page" | "qa" | "qaVal" | "color" | "fill" | "font" | "outline" | "gap" | "padding" | "margin" | "width" | "height" | "border" | "transition" | "placeContent" | "placeItems" | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | "alignTracks" | "alignmentBaseline" | "anchorName" | "anchorScope" | "animationComposition" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationRangeEnd" | "animationRangeStart" | "animationTimeline" | "animationTimingFunction" | "appearance" | "aspectRatio" | "backdropFilter" | "backfaceVisibility" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "baselineShift" | "blockSize" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "boxDecorationBreak" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "caretShape" | "clear" | "clipPath" | "clipRule" | "colorAdjust" | "colorInterpolationFilters" | "colorScheme" | "columnCount" | "columnFill" | "columnGap" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "contain" | "containIntrinsicBlockSize" | "containIntrinsicHeight" | "containIntrinsicInlineSize" | "containIntrinsicWidth" | "containerName" | "containerType" | "content" | "contentVisibility" | "counterIncrement" | "counterReset" | "counterSet" | "cursor" | "cx" | "cy" | "d" | "direction" | "display" | "dominantBaseline" | "emptyCells" | "fieldSizing" | "fillOpacity" | "fillRule" | "filter" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "float" | "floodColor" | "floodOpacity" | "fontFamily" | "fontFeatureSettings" | "fontKerning" | "fontLanguageOverride" | "fontOpticalSizing" | "fontPalette" | "fontSize" | "fontSizeAdjust" | "fontSmooth" | "fontStyle" | "fontSynthesis" | "fontSynthesisPosition" | "fontSynthesisSmallCaps" | "fontSynthesisStyle" | "fontSynthesisWeight" | "fontVariant" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantEmoji" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontVariationSettings" | "fontWeight" | "fontWidth" | "forcedColorAdjust" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hangingPunctuation" | "hyphenateCharacter" | "hyphenateLimitChars" | "hyphens" | "imageOrientation" | "imageRendering" | "imageResolution" | "initialLetter" | "initialLetterAlign" | "inlineSize" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "interpolateSize" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "justifyTracks" | "left" | "letterSpacing" | "lightingColor" | "lineBreak" | "lineHeight" | "lineHeightStep" | "listStyleImage" | "listStylePosition" | "listStyleType" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "marginTrim" | "marker" | "markerEnd" | "markerMid" | "markerStart" | "maskBorderMode" | "maskBorderOutset" | "maskBorderRepeat" | "maskBorderSlice" | "maskBorderSource" | "maskBorderWidth" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "masonryAutoFlow" | "mathDepth" | "mathShift" | "mathStyle" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxLines" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "motionDistance" | "motionPath" | "motionRotation" | "objectFit" | "objectPosition" | "objectViewBox" | "offsetAnchor" | "offsetDistance" | "offsetPath" | "offsetPosition" | "offsetRotate" | "offsetRotation" | "opacity" | "order" | "orphans" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflowAnchor" | "overflowBlock" | "overflowClipBox" | "overflowClipMargin" | "overflowInline" | "overflowWrap" | "overflowX" | "overflowY" | "overlay" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "paintOrder" | "perspective" | "perspectiveOrigin" | "pointerEvents" | "position" | "positionAnchor" | "positionArea" | "positionTryFallbacks" | "positionTryOrder" | "positionVisibility" | "printColorAdjust" | "quotes" | "r" | "resize" | "right" | "rotate" | "rowGap" | "rubyAlign" | "rubyMerge" | "rubyOverhang" | "rubyPosition" | "rx" | "ry" | "scale" | "scrollBehavior" | "scrollInitialTarget" | "scrollMarginBlockEnd" | "scrollMarginBlockStart" | "scrollMarginBottom" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPaddingBlockEnd" | "scrollPaddingBlockStart" | "scrollPaddingBottom" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapMarginBottom" | "scrollSnapMarginLeft" | "scrollSnapMarginRight" | "scrollSnapMarginTop" | "scrollSnapStop" | "scrollSnapType" | "scrollTimelineAxis" | "scrollTimelineName" | "scrollbarColor" | "scrollbarGutter" | "scrollbarWidth" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "shapeRendering" | "speakAs" | "stopColor" | "stopOpacity" | "stroke" | "strokeColor" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textAnchor" | "textAutospace" | "textBox" | "textBoxEdge" | "textBoxTrim" | "textCombineUpright" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkip" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textJustify" | "textOrientation" | "textOverflow" | "textRendering" | "textShadow" | "textSizeAdjust" | "textSpacingTrim" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "textWrapMode" | "textWrapStyle" | "timelineScope" | "top" | "touchAction" | "transform" | "transformBox" | "transformOrigin" | "transformStyle" | "transitionBehavior" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "translate" | "unicodeBidi" | "userSelect" | "vectorEffect" | "verticalAlign" | "viewTimelineAxis" | "viewTimelineInset" | "viewTimelineName" | "viewTransitionClass" | "viewTransitionName" | "visibility" | "whiteSpace" | "whiteSpaceCollapse" | "widows" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "writingMode" | "x" | "y" | "zIndex" | "zoom" | "animation" | "animationRange" | "background" | "backgroundPosition" | "borderBlock" | "borderBlockColor" | "borderBlockEnd" | "borderBlockStart" | "borderBlockStyle" | "borderBlockWidth" | "borderBottom" | "borderColor" | "borderImage" | "borderInline" | "borderInlineColor" | "borderInlineEnd" | "borderInlineStart" | "borderInlineStyle" | "borderInlineWidth" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "caret" | "columnRule" | "columns" | "containIntrinsicSize" | "container" | "flex" | "flexFlow" | "grid" | "gridArea" | "gridColumn" | "gridRow" | "gridTemplate" | "inset" | "insetBlock" | "insetInline" | "lineClamp" | "listStyle" | "marginBlock" | "marginInline" | "mask" | "maskBorder" | "motion" | "offset" | "overflow" | "overscrollBehavior" | "paddingBlock" | "paddingInline" | "placeSelf" | "positionTry" | "scrollMargin" | "scrollMarginBlock" | "scrollMarginInline" | "scrollPadding" | "scrollPaddingBlock" | "scrollPaddingInline" | "scrollSnapMargin" | "scrollTimeline" | "textDecoration" | "textEmphasis" | "textWrap" | "viewTimeline" | "MozAnimationDelay" | "MozAnimationDirection" | "MozAnimationDuration" | "MozAnimationFillMode" | "MozAnimationIterationCount" | "MozAnimationName" | "MozAnimationPlayState" | "MozAnimationTimingFunction" | "MozAppearance" | "MozBackfaceVisibility" | "MozBinding" | "MozBorderBottomColors" | "MozBorderEndColor" | "MozBorderEndStyle" | "MozBorderEndWidth" | "MozBorderLeftColors" | "MozBorderRightColors" | "MozBorderStartColor" | "MozBorderStartStyle" | "MozBorderTopColors" | "MozBoxSizing" | "MozColumnRuleColor" | "MozColumnRuleStyle" | "MozColumnRuleWidth" | "MozColumnWidth" | "MozContextProperties" | "MozFontFeatureSettings" | "MozFontLanguageOverride" | "MozHyphens" | "MozMarginEnd" | "MozMarginStart" | "MozOrient" | "MozOsxFontSmoothing" | "MozOutlineRadiusBottomleft" | "MozOutlineRadiusBottomright" | "MozOutlineRadiusTopleft" | "MozOutlineRadiusTopright" | "MozPaddingEnd" | "MozPaddingStart" | "MozPerspective" | "MozPerspectiveOrigin" | "MozStackSizing" | "MozTabSize" | "MozTextBlink" | "MozTextSizeAdjust" | "MozTransform" | "MozTransformOrigin" | "MozTransformStyle" | "MozUserModify" | "MozUserSelect" | "MozWindowDragging" | "MozWindowShadow" | "msAccelerator" | "msBlockProgression" | "msContentZoomChaining" | "msContentZoomLimitMax" | "msContentZoomLimitMin" | "msContentZoomSnapPoints" | "msContentZoomSnapType" | "msContentZooming" | "msFilter" | "msFlexDirection" | "msFlexPositive" | "msFlowFrom" | "msFlowInto" | "msGridColumns" | "msGridRows" | "msHighContrastAdjust" | "msHyphenateLimitChars" | "msHyphenateLimitLines" | "msHyphenateLimitZone" | "msHyphens" | "msImeAlign" | "msLineBreak" | "msOrder" | "msOverflowStyle" | "msOverflowX" | "msOverflowY" | "msScrollChaining" | "msScrollLimitXMax" | "msScrollLimitXMin" | "msScrollLimitYMax" | "msScrollLimitYMin" | "msScrollRails" | "msScrollSnapPointsX" | "msScrollSnapPointsY" | "msScrollSnapType" | "msScrollTranslation" | "msScrollbar3dlightColor" | "msScrollbarArrowColor" | "msScrollbarBaseColor" | "msScrollbarDarkshadowColor" | "msScrollbarFaceColor" | "msScrollbarHighlightColor" | "msScrollbarShadowColor" | "msScrollbarTrackColor" | "msTextAutospace" | "msTextCombineHorizontal" | "msTextOverflow" | "msTouchAction" | "msTouchSelect" | "msTransform" | "msTransformOrigin" | "msTransitionDelay" | "msTransitionDuration" | "msTransitionProperty" | "msTransitionTimingFunction" | "msUserSelect" | "msWordBreak" | "msWrapFlow" | "msWrapMargin" | "msWrapThrough" | "msWritingMode" | "WebkitAlignContent" | "WebkitAlignItems" | "WebkitAlignSelf" | "WebkitAnimationDelay" | "WebkitAnimationDirection" | "WebkitAnimationDuration" | "WebkitAnimationFillMode" | "WebkitAnimationIterationCount" | "WebkitAnimationName" | "WebkitAnimationPlayState" | "WebkitAnimationTimingFunction" | "WebkitAppearance" | "WebkitBackdropFilter" | "WebkitBackfaceVisibility" | "WebkitBackgroundClip" | "WebkitBackgroundOrigin" | "WebkitBackgroundSize" | "WebkitBorderBeforeColor" | "WebkitBorderBeforeStyle" | "WebkitBorderBeforeWidth" | "WebkitBorderBottomLeftRadius" | "WebkitBorderBottomRightRadius" | "WebkitBorderImageSlice" | "WebkitBorderTopLeftRadius" | "WebkitBorderTopRightRadius" | "WebkitBoxDecorationBreak" | "WebkitBoxReflect" | "WebkitBoxShadow" | "WebkitBoxSizing" | "WebkitClipPath" | "WebkitColumnCount" | "WebkitColumnFill" | "WebkitColumnRuleColor" | "WebkitColumnRuleStyle" | "WebkitColumnRuleWidth" | "WebkitColumnSpan" | "WebkitColumnWidth" | "WebkitFilter" | "WebkitFlexBasis" | "WebkitFlexDirection" | "WebkitFlexGrow" | "WebkitFlexShrink" | "WebkitFlexWrap" | "WebkitFontFeatureSettings" | "WebkitFontKerning" | "WebkitFontSmoothing" | "WebkitFontVariantLigatures" | "WebkitHyphenateCharacter" | "WebkitHyphens" | "WebkitInitialLetter" | "WebkitJustifyContent" | "WebkitLineBreak" | "WebkitLineClamp" | "WebkitLogicalHeight" | "WebkitLogicalWidth" | "WebkitMarginEnd" | "WebkitMarginStart" | "WebkitMaskAttachment" | "WebkitMaskBoxImageOutset" | "WebkitMaskBoxImageRepeat" | "WebkitMaskBoxImageSlice" | "WebkitMaskBoxImageSource" | "WebkitMaskBoxImageWidth" | "WebkitMaskClip" | "WebkitMaskComposite" | "WebkitMaskImage" | "WebkitMaskOrigin" | "WebkitMaskPosition" | "WebkitMaskPositionX" | "WebkitMaskPositionY" | "WebkitMaskRepeat" | "WebkitMaskRepeatX" | "WebkitMaskRepeatY" | "WebkitMaskSize" | "WebkitMaxInlineSize" | "WebkitOrder" | "WebkitOverflowScrolling" | "WebkitPaddingEnd" | "WebkitPaddingStart" | "WebkitPerspective" | "WebkitPerspectiveOrigin" | "WebkitPrintColorAdjust" | "WebkitRubyPosition" | "WebkitScrollSnapType" | "WebkitShapeMargin" | "WebkitTapHighlightColor" | "WebkitTextCombine" | "WebkitTextDecorationColor" | "WebkitTextDecorationLine" | "WebkitTextDecorationSkip" | "WebkitTextDecorationStyle" | "WebkitTextEmphasisColor" | "WebkitTextEmphasisPosition" | "WebkitTextEmphasisStyle" | "WebkitTextFillColor" | "WebkitTextOrientation" | "WebkitTextSizeAdjust" | "WebkitTextStrokeColor" | "WebkitTextStrokeWidth" | "WebkitTextUnderlinePosition" | "WebkitTouchCallout" | "WebkitTransform" | "WebkitTransformOrigin" | "WebkitTransformStyle" | "WebkitTransitionDelay" | "WebkitTransitionDuration" | "WebkitTransitionProperty" | "WebkitTransitionTimingFunction" | "WebkitUserModify" | "WebkitUserSelect" | "WebkitWritingMode" | "MozAnimation" | "MozBorderImage" | "MozColumnRule" | "MozColumns" | "MozOutlineRadius" | "MozTransition" | "msContentZoomLimit" | "msContentZoomSnap" | "msFlex" | "msScrollLimit" | "msScrollSnapX" | "msScrollSnapY" | "msTransition" | "WebkitAnimation" | "WebkitBorderBefore" | "WebkitBorderImage" | "WebkitBorderRadius" | "WebkitColumnRule" | "WebkitColumns" | "WebkitFlex" | "WebkitFlexFlow" | "WebkitMask" | "WebkitMaskBoxImage" | "WebkitTextEmphasis" | "WebkitTextStroke" | "WebkitTransition" | "boxAlign" | "boxDirection" | "boxFlex" | "boxFlexGroup" | "boxLines" | "boxOrdinalGroup" | "boxOrient" | "boxPack" | "clip" | "fontStretch" | "gridColumnGap" | "gridGap" | "gridRowGap" | "imeMode" | "insetArea" | "offsetBlock" | "offsetBlockEnd" | "offsetBlockStart" | "offsetInline" | "offsetInlineEnd" | "offsetInlineStart" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "positionTryOptions" | "scrollSnapCoordinate" | "scrollSnapDestination" | "scrollSnapPointsX" | "scrollSnapPointsY" | "scrollSnapTypeX" | "scrollSnapTypeY" | "KhtmlBoxAlign" | "KhtmlBoxDirection" | "KhtmlBoxFlex" | "KhtmlBoxFlexGroup" | "KhtmlBoxLines" | "KhtmlBoxOrdinalGroup" | "KhtmlBoxOrient" | "KhtmlBoxPack" | "KhtmlLineBreak" | "KhtmlOpacity" | "KhtmlUserSelect" | "MozBackgroundClip" | "MozBackgroundOrigin" | "MozBackgroundSize" | "MozBorderRadius" | "MozBorderRadiusBottomleft" | "MozBorderRadiusBottomright" | "MozBorderRadiusTopleft" | "MozBorderRadiusTopright" | "MozBoxAlign" | "MozBoxDirection" | "MozBoxFlex" | "MozBoxOrdinalGroup" | "MozBoxOrient" | "MozBoxPack" | "MozBoxShadow" | "MozColumnCount" | "MozColumnFill" | "MozFloatEdge" | "MozForceBrokenImageIcon" | "MozOpacity" | "MozOutline" | "MozOutlineColor" | "MozOutlineStyle" | "MozOutlineWidth" | "MozTextAlignLast" | "MozTextDecorationColor" | "MozTextDecorationLine" | "MozTextDecorationStyle" | "MozTransitionDelay" | "MozTransitionDuration" | "MozTransitionProperty" | "MozTransitionTimingFunction" | "MozUserFocus" | "MozUserInput" | "msImeMode" | "OAnimation" | "OAnimationDelay" | "OAnimationDirection" | "OAnimationDuration" | "OAnimationFillMode" | "OAnimationIterationCount" | "OAnimationName" | "OAnimationPlayState" | "OAnimationTimingFunction" | "OBackgroundSize" | "OBorderImage" | "OObjectFit" | "OObjectPosition" | "OTabSize" | "OTextOverflow" | "OTransform" | "OTransformOrigin" | "OTransition" | "OTransitionDelay" | "OTransitionDuration" | "OTransitionProperty" | "OTransitionTimingFunction" | "WebkitBoxAlign" | "WebkitBoxDirection" | "WebkitBoxFlex" | "WebkitBoxFlexGroup" | "WebkitBoxLines" | "WebkitBoxOrdinalGroup" | "WebkitBoxOrient" | "WebkitBoxPack" | "colorInterpolation" | "colorRendering" | "glyphOrientationVertical" | "image" | "svgFill" | "fade" | "styledScrollbar" | "scrollbar" | "boldFontWeight" | "hide" | "shadow" | "radius" | "flow" | "gridAreas" | "gridColumns" | "gridRows" | "preset" | "align" | "justify" | "place" | "@keyframes" | "@properties" | "recipe" | "style" | "as" | "element" | "styles" | "breakpoints" | "block" | "inline" | "mods" | "isHidden" | "isDisabled" | "css" | "theme" | "tokens" | "ref"> & RefAttributes<unknown>> & SubElementComponents<Record<string, never>>;
+} & BaseStyleProps & WithVariant<VariantMap> & Omit<Omit<AllHTMLAttributes<HTMLElement>, keyof react.ClassAttributes<HTMLDivElement> | keyof react.HTMLAttributes<HTMLDivElement>> & react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement>, "qa" | "qaVal" | "color" | "fill" | "font" | "outline" | "gap" | "padding" | "margin" | "width" | "height" | "border" | "transition" | "placeContent" | "placeItems" | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | "alignTracks" | "alignmentBaseline" | "anchorName" | "anchorScope" | "animationComposition" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationRangeEnd" | "animationRangeStart" | "animationTimeline" | "animationTimingFunction" | "appearance" | "aspectRatio" | "backdropFilter" | "backfaceVisibility" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "baselineShift" | "blockSize" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "boxDecorationBreak" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "caretShape" | "clear" | "clipPath" | "clipRule" | "colorAdjust" | "colorInterpolationFilters" | "colorScheme" | "columnCount" | "columnFill" | "columnGap" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "contain" | "containIntrinsicBlockSize" | "containIntrinsicHeight" | "containIntrinsicInlineSize" | "containIntrinsicWidth" | "containerName" | "containerType" | "content" | "contentVisibility" | "counterIncrement" | "counterReset" | "counterSet" | "cursor" | "cx" | "cy" | "d" | "direction" | "display" | "dominantBaseline" | "emptyCells" | "fieldSizing" | "fillOpacity" | "fillRule" | "filter" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "float" | "floodColor" | "floodOpacity" | "fontFamily" | "fontFeatureSettings" | "fontKerning" | "fontLanguageOverride" | "fontOpticalSizing" | "fontPalette" | "fontSize" | "fontSizeAdjust" | "fontSmooth" | "fontStyle" | "fontSynthesis" | "fontSynthesisPosition" | "fontSynthesisSmallCaps" | "fontSynthesisStyle" | "fontSynthesisWeight" | "fontVariant" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantEmoji" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontVariationSettings" | "fontWeight" | "fontWidth" | "forcedColorAdjust" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hangingPunctuation" | "hyphenateCharacter" | "hyphenateLimitChars" | "hyphens" | "imageOrientation" | "imageRendering" | "imageResolution" | "initialLetter" | "initialLetterAlign" | "inlineSize" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "interpolateSize" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "justifyTracks" | "left" | "letterSpacing" | "lightingColor" | "lineBreak" | "lineHeight" | "lineHeightStep" | "listStyleImage" | "listStylePosition" | "listStyleType" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "marginTrim" | "marker" | "markerEnd" | "markerMid" | "markerStart" | "maskBorderMode" | "maskBorderOutset" | "maskBorderRepeat" | "maskBorderSlice" | "maskBorderSource" | "maskBorderWidth" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "masonryAutoFlow" | "mathDepth" | "mathShift" | "mathStyle" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxLines" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "motionDistance" | "motionPath" | "motionRotation" | "objectFit" | "objectPosition" | "objectViewBox" | "offsetAnchor" | "offsetDistance" | "offsetPath" | "offsetPosition" | "offsetRotate" | "offsetRotation" | "opacity" | "order" | "orphans" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflowAnchor" | "overflowBlock" | "overflowClipBox" | "overflowClipMargin" | "overflowInline" | "overflowWrap" | "overflowX" | "overflowY" | "overlay" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "page" | "paintOrder" | "perspective" | "perspectiveOrigin" | "pointerEvents" | "position" | "positionAnchor" | "positionArea" | "positionTryFallbacks" | "positionTryOrder" | "positionVisibility" | "printColorAdjust" | "quotes" | "r" | "resize" | "right" | "rotate" | "rowGap" | "rubyAlign" | "rubyMerge" | "rubyOverhang" | "rubyPosition" | "rx" | "ry" | "scale" | "scrollBehavior" | "scrollInitialTarget" | "scrollMarginBlockEnd" | "scrollMarginBlockStart" | "scrollMarginBottom" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPaddingBlockEnd" | "scrollPaddingBlockStart" | "scrollPaddingBottom" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapMarginBottom" | "scrollSnapMarginLeft" | "scrollSnapMarginRight" | "scrollSnapMarginTop" | "scrollSnapStop" | "scrollSnapType" | "scrollTimelineAxis" | "scrollTimelineName" | "scrollbarColor" | "scrollbarGutter" | "scrollbarWidth" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "shapeRendering" | "speakAs" | "stopColor" | "stopOpacity" | "stroke" | "strokeColor" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textAnchor" | "textAutospace" | "textBox" | "textBoxEdge" | "textBoxTrim" | "textCombineUpright" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkip" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textJustify" | "textOrientation" | "textOverflow" | "textRendering" | "textShadow" | "textSizeAdjust" | "textSpacingTrim" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "textWrapMode" | "textWrapStyle" | "timelineScope" | "top" | "touchAction" | "transform" | "transformBox" | "transformOrigin" | "transformStyle" | "transitionBehavior" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "translate" | "unicodeBidi" | "userSelect" | "vectorEffect" | "verticalAlign" | "viewTimelineAxis" | "viewTimelineInset" | "viewTimelineName" | "viewTransitionClass" | "viewTransitionName" | "visibility" | "whiteSpace" | "whiteSpaceCollapse" | "widows" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "writingMode" | "x" | "y" | "zIndex" | "zoom" | "all" | "animation" | "animationRange" | "background" | "backgroundPosition" | "borderBlock" | "borderBlockColor" | "borderBlockEnd" | "borderBlockStart" | "borderBlockStyle" | "borderBlockWidth" | "borderBottom" | "borderColor" | "borderImage" | "borderInline" | "borderInlineColor" | "borderInlineEnd" | "borderInlineStart" | "borderInlineStyle" | "borderInlineWidth" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "caret" | "columnRule" | "columns" | "containIntrinsicSize" | "container" | "flex" | "flexFlow" | "grid" | "gridArea" | "gridColumn" | "gridRow" | "gridTemplate" | "inset" | "insetBlock" | "insetInline" | "lineClamp" | "listStyle" | "marginBlock" | "marginInline" | "mask" | "maskBorder" | "motion" | "offset" | "overflow" | "overscrollBehavior" | "paddingBlock" | "paddingInline" | "placeSelf" | "positionTry" | "scrollMargin" | "scrollMarginBlock" | "scrollMarginInline" | "scrollPadding" | "scrollPaddingBlock" | "scrollPaddingInline" | "scrollSnapMargin" | "scrollTimeline" | "textDecoration" | "textEmphasis" | "textWrap" | "viewTimeline" | "MozAnimationDelay" | "MozAnimationDirection" | "MozAnimationDuration" | "MozAnimationFillMode" | "MozAnimationIterationCount" | "MozAnimationName" | "MozAnimationPlayState" | "MozAnimationTimingFunction" | "MozAppearance" | "MozBackfaceVisibility" | "MozBinding" | "MozBorderBottomColors" | "MozBorderEndColor" | "MozBorderEndStyle" | "MozBorderEndWidth" | "MozBorderLeftColors" | "MozBorderRightColors" | "MozBorderStartColor" | "MozBorderStartStyle" | "MozBorderTopColors" | "MozBoxSizing" | "MozColumnRuleColor" | "MozColumnRuleStyle" | "MozColumnRuleWidth" | "MozColumnWidth" | "MozContextProperties" | "MozFontFeatureSettings" | "MozFontLanguageOverride" | "MozHyphens" | "MozMarginEnd" | "MozMarginStart" | "MozOrient" | "MozOsxFontSmoothing" | "MozOutlineRadiusBottomleft" | "MozOutlineRadiusBottomright" | "MozOutlineRadiusTopleft" | "MozOutlineRadiusTopright" | "MozPaddingEnd" | "MozPaddingStart" | "MozPerspective" | "MozPerspectiveOrigin" | "MozStackSizing" | "MozTabSize" | "MozTextBlink" | "MozTextSizeAdjust" | "MozTransform" | "MozTransformOrigin" | "MozTransformStyle" | "MozUserModify" | "MozUserSelect" | "MozWindowDragging" | "MozWindowShadow" | "msAccelerator" | "msBlockProgression" | "msContentZoomChaining" | "msContentZoomLimitMax" | "msContentZoomLimitMin" | "msContentZoomSnapPoints" | "msContentZoomSnapType" | "msContentZooming" | "msFilter" | "msFlexDirection" | "msFlexPositive" | "msFlowFrom" | "msFlowInto" | "msGridColumns" | "msGridRows" | "msHighContrastAdjust" | "msHyphenateLimitChars" | "msHyphenateLimitLines" | "msHyphenateLimitZone" | "msHyphens" | "msImeAlign" | "msLineBreak" | "msOrder" | "msOverflowStyle" | "msOverflowX" | "msOverflowY" | "msScrollChaining" | "msScrollLimitXMax" | "msScrollLimitXMin" | "msScrollLimitYMax" | "msScrollLimitYMin" | "msScrollRails" | "msScrollSnapPointsX" | "msScrollSnapPointsY" | "msScrollSnapType" | "msScrollTranslation" | "msScrollbar3dlightColor" | "msScrollbarArrowColor" | "msScrollbarBaseColor" | "msScrollbarDarkshadowColor" | "msScrollbarFaceColor" | "msScrollbarHighlightColor" | "msScrollbarShadowColor" | "msScrollbarTrackColor" | "msTextAutospace" | "msTextCombineHorizontal" | "msTextOverflow" | "msTouchAction" | "msTouchSelect" | "msTransform" | "msTransformOrigin" | "msTransitionDelay" | "msTransitionDuration" | "msTransitionProperty" | "msTransitionTimingFunction" | "msUserSelect" | "msWordBreak" | "msWrapFlow" | "msWrapMargin" | "msWrapThrough" | "msWritingMode" | "WebkitAlignContent" | "WebkitAlignItems" | "WebkitAlignSelf" | "WebkitAnimationDelay" | "WebkitAnimationDirection" | "WebkitAnimationDuration" | "WebkitAnimationFillMode" | "WebkitAnimationIterationCount" | "WebkitAnimationName" | "WebkitAnimationPlayState" | "WebkitAnimationTimingFunction" | "WebkitAppearance" | "WebkitBackdropFilter" | "WebkitBackfaceVisibility" | "WebkitBackgroundClip" | "WebkitBackgroundOrigin" | "WebkitBackgroundSize" | "WebkitBorderBeforeColor" | "WebkitBorderBeforeStyle" | "WebkitBorderBeforeWidth" | "WebkitBorderBottomLeftRadius" | "WebkitBorderBottomRightRadius" | "WebkitBorderImageSlice" | "WebkitBorderTopLeftRadius" | "WebkitBorderTopRightRadius" | "WebkitBoxDecorationBreak" | "WebkitBoxReflect" | "WebkitBoxShadow" | "WebkitBoxSizing" | "WebkitClipPath" | "WebkitColumnCount" | "WebkitColumnFill" | "WebkitColumnRuleColor" | "WebkitColumnRuleStyle" | "WebkitColumnRuleWidth" | "WebkitColumnSpan" | "WebkitColumnWidth" | "WebkitFilter" | "WebkitFlexBasis" | "WebkitFlexDirection" | "WebkitFlexGrow" | "WebkitFlexShrink" | "WebkitFlexWrap" | "WebkitFontFeatureSettings" | "WebkitFontKerning" | "WebkitFontSmoothing" | "WebkitFontVariantLigatures" | "WebkitHyphenateCharacter" | "WebkitHyphens" | "WebkitInitialLetter" | "WebkitJustifyContent" | "WebkitLineBreak" | "WebkitLineClamp" | "WebkitLogicalHeight" | "WebkitLogicalWidth" | "WebkitMarginEnd" | "WebkitMarginStart" | "WebkitMaskAttachment" | "WebkitMaskBoxImageOutset" | "WebkitMaskBoxImageRepeat" | "WebkitMaskBoxImageSlice" | "WebkitMaskBoxImageSource" | "WebkitMaskBoxImageWidth" | "WebkitMaskClip" | "WebkitMaskComposite" | "WebkitMaskImage" | "WebkitMaskOrigin" | "WebkitMaskPosition" | "WebkitMaskPositionX" | "WebkitMaskPositionY" | "WebkitMaskRepeat" | "WebkitMaskRepeatX" | "WebkitMaskRepeatY" | "WebkitMaskSize" | "WebkitMaxInlineSize" | "WebkitOrder" | "WebkitOverflowScrolling" | "WebkitPaddingEnd" | "WebkitPaddingStart" | "WebkitPerspective" | "WebkitPerspectiveOrigin" | "WebkitPrintColorAdjust" | "WebkitRubyPosition" | "WebkitScrollSnapType" | "WebkitShapeMargin" | "WebkitTapHighlightColor" | "WebkitTextCombine" | "WebkitTextDecorationColor" | "WebkitTextDecorationLine" | "WebkitTextDecorationSkip" | "WebkitTextDecorationStyle" | "WebkitTextEmphasisColor" | "WebkitTextEmphasisPosition" | "WebkitTextEmphasisStyle" | "WebkitTextFillColor" | "WebkitTextOrientation" | "WebkitTextSizeAdjust" | "WebkitTextStrokeColor" | "WebkitTextStrokeWidth" | "WebkitTextUnderlinePosition" | "WebkitTouchCallout" | "WebkitTransform" | "WebkitTransformOrigin" | "WebkitTransformStyle" | "WebkitTransitionDelay" | "WebkitTransitionDuration" | "WebkitTransitionProperty" | "WebkitTransitionTimingFunction" | "WebkitUserModify" | "WebkitUserSelect" | "WebkitWritingMode" | "MozAnimation" | "MozBorderImage" | "MozColumnRule" | "MozColumns" | "MozOutlineRadius" | "MozTransition" | "msContentZoomLimit" | "msContentZoomSnap" | "msFlex" | "msScrollLimit" | "msScrollSnapX" | "msScrollSnapY" | "msTransition" | "WebkitAnimation" | "WebkitBorderBefore" | "WebkitBorderImage" | "WebkitBorderRadius" | "WebkitColumnRule" | "WebkitColumns" | "WebkitFlex" | "WebkitFlexFlow" | "WebkitMask" | "WebkitMaskBoxImage" | "WebkitTextEmphasis" | "WebkitTextStroke" | "WebkitTransition" | "boxAlign" | "boxDirection" | "boxFlex" | "boxFlexGroup" | "boxLines" | "boxOrdinalGroup" | "boxOrient" | "boxPack" | "clip" | "fontStretch" | "gridColumnGap" | "gridGap" | "gridRowGap" | "imeMode" | "insetArea" | "offsetBlock" | "offsetBlockEnd" | "offsetBlockStart" | "offsetInline" | "offsetInlineEnd" | "offsetInlineStart" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "positionTryOptions" | "scrollSnapCoordinate" | "scrollSnapDestination" | "scrollSnapPointsX" | "scrollSnapPointsY" | "scrollSnapTypeX" | "scrollSnapTypeY" | "KhtmlBoxAlign" | "KhtmlBoxDirection" | "KhtmlBoxFlex" | "KhtmlBoxFlexGroup" | "KhtmlBoxLines" | "KhtmlBoxOrdinalGroup" | "KhtmlBoxOrient" | "KhtmlBoxPack" | "KhtmlLineBreak" | "KhtmlOpacity" | "KhtmlUserSelect" | "MozBackgroundClip" | "MozBackgroundOrigin" | "MozBackgroundSize" | "MozBorderRadius" | "MozBorderRadiusBottomleft" | "MozBorderRadiusBottomright" | "MozBorderRadiusTopleft" | "MozBorderRadiusTopright" | "MozBoxAlign" | "MozBoxDirection" | "MozBoxFlex" | "MozBoxOrdinalGroup" | "MozBoxOrient" | "MozBoxPack" | "MozBoxShadow" | "MozColumnCount" | "MozColumnFill" | "MozFloatEdge" | "MozForceBrokenImageIcon" | "MozOpacity" | "MozOutline" | "MozOutlineColor" | "MozOutlineStyle" | "MozOutlineWidth" | "MozTextAlignLast" | "MozTextDecorationColor" | "MozTextDecorationLine" | "MozTextDecorationStyle" | "MozTransitionDelay" | "MozTransitionDuration" | "MozTransitionProperty" | "MozTransitionTimingFunction" | "MozUserFocus" | "MozUserInput" | "msImeMode" | "OAnimation" | "OAnimationDelay" | "OAnimationDirection" | "OAnimationDuration" | "OAnimationFillMode" | "OAnimationIterationCount" | "OAnimationName" | "OAnimationPlayState" | "OAnimationTimingFunction" | "OBackgroundSize" | "OBorderImage" | "OObjectFit" | "OObjectPosition" | "OTabSize" | "OTextOverflow" | "OTransform" | "OTransformOrigin" | "OTransition" | "OTransitionDelay" | "OTransitionDuration" | "OTransitionProperty" | "OTransitionTimingFunction" | "WebkitBoxAlign" | "WebkitBoxDirection" | "WebkitBoxFlex" | "WebkitBoxFlexGroup" | "WebkitBoxLines" | "WebkitBoxOrdinalGroup" | "WebkitBoxOrient" | "WebkitBoxPack" | "colorInterpolation" | "colorRendering" | "glyphOrientationVertical" | "image" | "svgFill" | "fade" | "styledScrollbar" | "scrollbar" | "boldFontWeight" | "hide" | "shadow" | "radius" | "flow" | "gridAreas" | "gridColumns" | "gridRows" | "preset" | "align" | "justify" | "place" | "@keyframes" | "@properties" | "recipe" | "style" | "as" | "element" | "styles" | "breakpoints" | "block" | "inline" | "mods" | "isHidden" | "isDisabled" | "css" | "theme" | "tokens" | "ref"> & RefAttributes<unknown>> & SubElementComponents<Record<string, never>>;
 //#endregion
 export { AllBasePropsWithMods, Element, ElementsDefinition, SubElementDefinition, SubElementProps, TastyElementOptions, TastyElementProps, TastyProps, VariantMap, WithVariant, tasty };
 //# sourceMappingURL=tasty.d.ts.map

package/dist/zero/extractor.js.map

@@ -1 +1 @@
-{"version":3,"file":"extractor.js","names":[],"sources":["../../src/zero/extractor.ts"],"sourcesContent":["import { createHash } from 'crypto';\n\nimport {\n  categorizeStyleKeys,\n  generateChunkCacheKey,\n  renderStylesForChunk,\n} from '../chunks';\nimport type { KeyframesSteps } from '../injector/types';\nimport {\n  extractAnimationNamesFromStyles,\n  extractLocalKeyframes,\n  filterUsedKeyframes,\n  hasLocalKeyframes,\n  mergeKeyframes,\n} from '../keyframes';\nimport type { StyleResult } from '../pipeline';\nimport { renderStyles } from '../pipeline';\nimport {\n  extractLocalProperties,\n  hasLocalProperties,\n  inferSyntaxFromValue,\n} from '../properties';\nimport { PropertyTypeResolver } from '../properties/property-type-resolver';\nimport type { Styles } from '../styles/types';\n\nexport interface ExtractedChunk {\n  className: string;\n  css: string;\n}\n\nexport interface ExtractedSelector {\n  selector: string;\n  css: string;\n}\n\nexport interface ExtractedKeyframes {\n  name: string;\n  css: string;\n}\n\nexport interface KeyframesExtractionResult {\n  /** Keyframes to inject (deduplicated by content) */\n  keyframes: ExtractedKeyframes[];\n  /** Map from original animation name to canonical name (for replacement) */\n  nameMap: Map<string, string>;\n}\n\n/**\n * Generate a deterministic className from a cache key using content hash.\n * This ensures the same styles always produce the same className,\n * regardless of build order or incremental compilation.\n */\nfunction generateClassName(cacheKey: string): string {\n  const hash = createHash('md5').update(cacheKey).digest('hex').slice(0, 6);\n  return `ts${hash}`; // 'ts' prefix for \"tasty-static\" to distinguish from runtime 't' classes\n}\n\n/**\n * Extract styles using chunking (for className mode).\n * Returns multiple classes, one per chunk.\n */\nexport function extractStylesWithChunks(styles: Styles): ExtractedChunk[] {\n  const chunks: ExtractedChunk[] = [];\n\n  // Categorize style keys into chunks\n  const chunkMap = categorizeStyleKeys(styles as Record<string, unknown>);\n\n  for (const [chunkName, chunkStyleKeys] of chunkMap) {\n    if (chunkStyleKeys.length === 0) continue;\n\n    // Generate cache key for this chunk (used for className hash)\n    const cacheKey = generateChunkCacheKey(styles, chunkName, chunkStyleKeys);\n\n    // Render styles for this chunk\n    const renderResult = renderStylesForChunk(\n      styles,\n      chunkName,\n      chunkStyleKeys,\n    );\n\n    if (renderResult.rules.length === 0) continue;\n\n    // Generate deterministic className from content hash\n    const className = generateClassName(cacheKey);\n    const selector = `.${className}.${className}`;\n\n    // Format CSS\n    const css = formatRulesToCSS(renderResult.rules, selector);\n\n    chunks.push({ className, css });\n  }\n\n  return chunks;\n}\n\n/**\n * Extract styles for a specific selector (for global/selector mode).\n * Returns a single CSS block.\n */\nexport function extractStylesForSelector(\n  selector: string,\n  styles: Styles,\n): ExtractedSelector {\n  // renderStyles with selector returns StyleResult[] with selectors already applied\n  const rules = renderStyles(styles, selector);\n  // Format without re-prefixing - rules already have the full selector\n  const css = formatRulesDirectly(rules);\n\n  return { selector, css };\n}\n\n/**\n * Format StyleResult[] to CSS string.\n * Prefixes each rule's selector with the base selector.\n * Used for chunked styles where rules have relative selectors.\n */\nfunction formatRulesToCSS(rules: StyleResult[], baseSelector: string): string {\n  return rules\n    .map((rule) => {\n      // Handle selector as array (OR conditions) or string\n      // Note: renderStyles without className joins array selectors with '|||' placeholder\n      const selectorParts = Array.isArray(rule.selector)\n        ? rule.selector\n        : rule.selector\n          ? rule.selector.split('|||')\n          : [''];\n\n      // Prefix each selector part with the base selector\n      const fullSelector = selectorParts\n        .map((part) => {\n          // Build selector: [rootPrefix] baseSelector[part]\n          let selector: string;\n\n          // If part is empty, just use base selector\n          if (!part) {\n            selector = baseSelector;\n          } else if (part.startsWith(':') || part.startsWith('[')) {\n            // If part starts with a pseudo-class or pseudo-element, append to base\n            selector = `${baseSelector}${part}`;\n          } else if (\n            part.startsWith('>') ||\n            part.startsWith('+') ||\n            part.startsWith('~')\n          ) {\n            // If part starts with >, +, ~ combinator, append with space\n            selector = `${baseSelector}${part}`;\n          } else {\n            // Otherwise, combine base with part\n            selector = `${baseSelector}${part}`;\n          }\n\n          // Prepend rootPrefix if present (for @root() states)\n          if (rule.rootPrefix) {\n            selector = `${rule.rootPrefix} ${selector}`;\n          }\n\n          return selector;\n        })\n        .join(', ');\n\n      let css = `${fullSelector} { ${rule.declarations} }`;\n\n      // Wrap in at-rules (in reverse order for proper nesting)\n      if (rule.atRules && rule.atRules.length > 0) {\n        for (const atRule of [...rule.atRules].reverse()) {\n          css = `${atRule} {\\n  ${css}\\n}`;\n        }\n      }\n\n      return css;\n    })\n    .join('\\n\\n');\n}\n\n/**\n * Format StyleResult[] to CSS string directly without prefixing.\n * Used for global styles where rules already have the full selector.\n */\nfunction formatRulesDirectly(rules: StyleResult[]): string {\n  return rules\n    .map((rule) => {\n      // Prepend rootPrefix if present (for @root() states)\n      const selector = rule.rootPrefix\n        ? `${rule.rootPrefix} ${rule.selector}`\n        : rule.selector;\n\n      let css = `${selector} { ${rule.declarations} }`;\n\n      // Wrap in at-rules (in reverse order for proper nesting)\n      if (rule.atRules && rule.atRules.length > 0) {\n        for (const atRule of [...rule.atRules].reverse()) {\n          css = `${atRule} {\\n  ${css}\\n}`;\n        }\n      }\n\n      return css;\n    })\n    .join('\\n\\n');\n}\n\n// Note: With hash-based className generation, counter management functions\n// are no longer needed. ClassNames are deterministic based on content.\n\n/**\n * Generate a deterministic keyframes name from content hash.\n * This ensures the same keyframes content always produces the same name,\n * enabling automatic deduplication across elements and files.\n */\nfunction generateKeyframesName(steps: KeyframesSteps): string {\n  const content = JSON.stringify(steps);\n  const hash = createHash('md5').update(content).digest('hex').slice(0, 6);\n  return `kf${hash}`; // 'kf' prefix for \"keyframes\"\n}\n\n/**\n * Extract keyframes that are used in styles.\n * Merges local @keyframes with global keyframes, filters to only used ones.\n * Generates hash-based names from content for automatic deduplication.\n *\n * @param styles - The styles object (may contain @keyframes and animation properties)\n * @param globalKeyframes - Optional global keyframes from config\n * @returns Keyframes to inject and name mapping for replacement\n */\nexport function extractKeyframesFromStyles(\n  styles: Styles,\n  globalKeyframes?: Record<string, KeyframesSteps> | null,\n): KeyframesExtractionResult {\n  const emptyResult: KeyframesExtractionResult = {\n    keyframes: [],\n    nameMap: new Map(),\n  };\n\n  // Extract animation names from styles\n  const usedNames = extractAnimationNamesFromStyles(styles);\n  if (usedNames.size === 0) return emptyResult;\n\n  // Merge local and global keyframes\n  const local = hasLocalKeyframes(styles)\n    ? extractLocalKeyframes(styles)\n    : null;\n  const allKeyframes = mergeKeyframes(local, globalKeyframes ?? null);\n\n  // Filter to only used keyframes\n  const usedKeyframes = filterUsedKeyframes(allKeyframes, usedNames);\n  if (!usedKeyframes) return emptyResult;\n\n  // Generate hash-based names and collect unique keyframes\n  const seenHashes = new Set<string>();\n  const nameMap = new Map<string, string>();\n  const keyframesToEmit: ExtractedKeyframes[] = [];\n\n  for (const [originalName, steps] of Object.entries(usedKeyframes)) {\n    const hashedName = generateKeyframesName(steps);\n\n    // Always map original name to hashed name (for CSS replacement)\n    nameMap.set(originalName, hashedName);\n\n    // Only emit each unique keyframe once\n    if (!seenHashes.has(hashedName)) {\n      seenHashes.add(hashedName);\n      const css = keyframesToCSS(hashedName, steps);\n      keyframesToEmit.push({ name: hashedName, css });\n    }\n  }\n\n  return { keyframes: keyframesToEmit, nameMap };\n}\n\n/**\n * Convert keyframes steps to CSS string.\n */\nfunction keyframesToCSS(name: string, steps: KeyframesSteps): string {\n  const stepRules: string[] = [];\n\n  for (const [key, value] of Object.entries(steps)) {\n    if (typeof value === 'string') {\n      // Raw CSS string\n      stepRules.push(`${key} { ${value.trim()} }`);\n    } else if (value && typeof value === 'object') {\n      // Style map - convert to CSS declarations\n      const declarations = Object.entries(value)\n        .map(([prop, val]) => {\n          const cssProperty = camelToKebab(prop);\n          return `${cssProperty}: ${val}`;\n        })\n        .join('; ');\n      stepRules.push(`${key} { ${declarations} }`);\n    }\n  }\n\n  return `@keyframes ${name} { ${stepRules.join(' ')} }`;\n}\n\n/**\n * Convert camelCase to kebab-case.\n */\nfunction camelToKebab(str: string): string {\n  return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);\n}\n\n// ============================================================================\n// Property Extraction (auto-infer @property types for zero-runtime)\n// ============================================================================\n\nexport interface ExtractedProperty {\n  name: string;\n  css: string;\n}\n\n/**\n * Extract auto-inferred @property declarations from styles.\n * Scans rendered style declarations and keyframe declarations for custom properties\n * whose types can be inferred from their values.\n *\n * @param styles - The styles object\n * @param options - Options including autoPropertyTypes flag\n * @returns Array of @property CSS rules to inject\n */\nexport function extractPropertiesFromStyles(\n  styles: Styles,\n  options?: { autoPropertyTypes?: boolean },\n): ExtractedProperty[] {\n  if (options?.autoPropertyTypes === false) return [];\n\n  const registered = new Set<string>();\n  const results: ExtractedProperty[] = [];\n\n  // Collect explicitly declared properties (they take precedence)\n  if (hasLocalProperties(styles)) {\n    const localProps = extractLocalProperties(styles);\n    if (localProps) {\n      for (const token of Object.keys(localProps)) {\n        // Normalize token to CSS name\n        let cssName: string;\n        if (token.startsWith('#')) {\n          cssName = `--${token.slice(1)}-color`;\n        } else if (token.startsWith('$')) {\n          cssName = `--${token.slice(1)}`;\n        } else if (token.startsWith('--')) {\n          cssName = token;\n        } else {\n          cssName = `--${token}`;\n        }\n        registered.add(cssName);\n      }\n    }\n  }\n\n  const resolver = new PropertyTypeResolver();\n\n  const registerProperty = (\n    name: string,\n    syntax: string,\n    initialValue: string,\n  ) => {\n    if (registered.has(name)) return;\n    registered.add(name);\n\n    const parts: string[] = [];\n    parts.push(`syntax: \"${syntax}\";`);\n    parts.push(`inherits: true;`);\n    parts.push(`initial-value: ${initialValue};`);\n\n    const css = `@property ${name} { ${parts.join(' ')} }`;\n    results.push({ name, css });\n  };\n\n  const isPropertyDefined = (name: string) => registered.has(name);\n\n  // Scan rendered style declarations\n  const chunkMap = categorizeStyleKeys(styles as Record<string, unknown>);\n  for (const [chunkName, chunkStyleKeys] of chunkMap) {\n    if (chunkStyleKeys.length === 0) continue;\n    const renderResult = renderStylesForChunk(\n      styles,\n      chunkName,\n      chunkStyleKeys,\n    );\n    for (const rule of renderResult.rules) {\n      if (!rule.declarations) continue;\n      resolver.scanDeclarations(\n        rule.declarations,\n        isPropertyDefined,\n        registerProperty,\n      );\n    }\n  }\n\n  // Scan keyframe declarations\n  if (hasLocalKeyframes(styles)) {\n    const localKf = extractLocalKeyframes(styles);\n    if (localKf) {\n      for (const steps of Object.values(localKf)) {\n        scanKeyframeSteps(steps, resolver, isPropertyDefined, registerProperty);\n      }\n    }\n  }\n\n  return results;\n}\n\nfunction scanKeyframeSteps(\n  steps: KeyframesSteps,\n  resolver: PropertyTypeResolver,\n  isPropertyDefined: (name: string) => boolean,\n  registerProperty: (\n    name: string,\n    syntax: string,\n    initialValue: string,\n  ) => void,\n): void {\n  for (const value of Object.values(steps)) {\n    if (typeof value === 'string') {\n      resolver.scanDeclarations(value, isPropertyDefined, registerProperty);\n    } else if (value && typeof value === 'object') {\n      const declarations = Object.entries(value)\n        .map(([prop, val]) => {\n          const cssProperty = camelToKebab(prop);\n          return `${cssProperty}: ${val}`;\n        })\n        .join('; ');\n      resolver.scanDeclarations(\n        declarations,\n        isPropertyDefined,\n        registerProperty,\n      );\n    }\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"extractor.js","names":[],"sources":["../../src/zero/extractor.ts"],"sourcesContent":["import { createHash } from 'crypto';\n\nimport {\n  categorizeStyleKeys,\n  generateChunkCacheKey,\n  renderStylesForChunk,\n} from '../chunks';\nimport type { KeyframesSteps } from '../injector/types';\nimport {\n  extractAnimationNamesFromStyles,\n  extractLocalKeyframes,\n  filterUsedKeyframes,\n  hasLocalKeyframes,\n  mergeKeyframes,\n} from '../keyframes';\nimport type { StyleResult } from '../pipeline';\nimport { renderStyles } from '../pipeline';\nimport { extractLocalProperties, hasLocalProperties } from '../properties';\nimport { PropertyTypeResolver } from '../properties/property-type-resolver';\nimport type { Styles } from '../styles/types';\n\nexport interface ExtractedChunk {\n  className: string;\n  css: string;\n}\n\nexport interface ExtractedSelector {\n  selector: string;\n  css: string;\n}\n\nexport interface ExtractedKeyframes {\n  name: string;\n  css: string;\n}\n\nexport interface KeyframesExtractionResult {\n  /** Keyframes to inject (deduplicated by content) */\n  keyframes: ExtractedKeyframes[];\n  /** Map from original animation name to canonical name (for replacement) */\n  nameMap: Map<string, string>;\n}\n\n/**\n * Generate a deterministic className from a cache key using content hash.\n * This ensures the same styles always produce the same className,\n * regardless of build order or incremental compilation.\n */\nfunction generateClassName(cacheKey: string): string {\n  const hash = createHash('md5').update(cacheKey).digest('hex').slice(0, 6);\n  return `ts${hash}`; // 'ts' prefix for \"tasty-static\" to distinguish from runtime 't' classes\n}\n\n/**\n * Extract styles using chunking (for className mode).\n * Returns multiple classes, one per chunk.\n */\nexport function extractStylesWithChunks(styles: Styles): ExtractedChunk[] {\n  const chunks: ExtractedChunk[] = [];\n\n  // Categorize style keys into chunks\n  const chunkMap = categorizeStyleKeys(styles as Record<string, unknown>);\n\n  for (const [chunkName, chunkStyleKeys] of chunkMap) {\n    if (chunkStyleKeys.length === 0) continue;\n\n    // Generate cache key for this chunk (used for className hash)\n    const cacheKey = generateChunkCacheKey(styles, chunkName, chunkStyleKeys);\n\n    // Render styles for this chunk\n    const renderResult = renderStylesForChunk(\n      styles,\n      chunkName,\n      chunkStyleKeys,\n    );\n\n    if (renderResult.rules.length === 0) continue;\n\n    // Generate deterministic className from content hash\n    const className = generateClassName(cacheKey);\n    const selector = `.${className}.${className}`;\n\n    // Format CSS\n    const css = formatRulesToCSS(renderResult.rules, selector);\n\n    chunks.push({ className, css });\n  }\n\n  return chunks;\n}\n\n/**\n * Extract styles for a specific selector (for global/selector mode).\n * Returns a single CSS block.\n */\nexport function extractStylesForSelector(\n  selector: string,\n  styles: Styles,\n): ExtractedSelector {\n  // renderStyles with selector returns StyleResult[] with selectors already applied\n  const rules = renderStyles(styles, selector);\n  // Format without re-prefixing - rules already have the full selector\n  const css = formatRulesDirectly(rules);\n\n  return { selector, css };\n}\n\n/**\n * Format StyleResult[] to CSS string.\n * Prefixes each rule's selector with the base selector.\n * Used for chunked styles where rules have relative selectors.\n */\nfunction formatRulesToCSS(rules: StyleResult[], baseSelector: string): string {\n  return rules\n    .map((rule) => {\n      // Handle selector as array (OR conditions) or string\n      // Note: renderStyles without className joins array selectors with '|||' placeholder\n      const selectorParts = Array.isArray(rule.selector)\n        ? rule.selector\n        : rule.selector\n          ? rule.selector.split('|||')\n          : [''];\n\n      // Prefix each selector part with the base selector\n      const fullSelector = selectorParts\n        .map((part) => {\n          // Build selector: [rootPrefix] baseSelector[part]\n          let selector: string;\n\n          // If part is empty, just use base selector\n          if (!part) {\n            selector = baseSelector;\n          } else if (part.startsWith(':') || part.startsWith('[')) {\n            // If part starts with a pseudo-class or pseudo-element, append to base\n            selector = `${baseSelector}${part}`;\n          } else if (\n            part.startsWith('>') ||\n            part.startsWith('+') ||\n            part.startsWith('~')\n          ) {\n            // If part starts with >, +, ~ combinator, append with space\n            selector = `${baseSelector}${part}`;\n          } else {\n            // Otherwise, combine base with part\n            selector = `${baseSelector}${part}`;\n          }\n\n          // Prepend rootPrefix if present (for @root() states)\n          if (rule.rootPrefix) {\n            selector = `${rule.rootPrefix} ${selector}`;\n          }\n\n          return selector;\n        })\n        .join(', ');\n\n      let css = `${fullSelector} { ${rule.declarations} }`;\n\n      // Wrap in at-rules (in reverse order for proper nesting)\n      if (rule.atRules && rule.atRules.length > 0) {\n        for (const atRule of [...rule.atRules].reverse()) {\n          css = `${atRule} {\\n  ${css}\\n}`;\n        }\n      }\n\n      return css;\n    })\n    .join('\\n\\n');\n}\n\n/**\n * Format StyleResult[] to CSS string directly without prefixing.\n * Used for global styles where rules already have the full selector.\n */\nfunction formatRulesDirectly(rules: StyleResult[]): string {\n  return rules\n    .map((rule) => {\n      // Prepend rootPrefix if present (for @root() states)\n      const selector = rule.rootPrefix\n        ? `${rule.rootPrefix} ${rule.selector}`\n        : rule.selector;\n\n      let css = `${selector} { ${rule.declarations} }`;\n\n      // Wrap in at-rules (in reverse order for proper nesting)\n      if (rule.atRules && rule.atRules.length > 0) {\n        for (const atRule of [...rule.atRules].reverse()) {\n          css = `${atRule} {\\n  ${css}\\n}`;\n        }\n      }\n\n      return css;\n    })\n    .join('\\n\\n');\n}\n\n// Note: With hash-based className generation, counter management functions\n// are no longer needed. ClassNames are deterministic based on content.\n\n/**\n * Generate a deterministic keyframes name from content hash.\n * This ensures the same keyframes content always produces the same name,\n * enabling automatic deduplication across elements and files.\n */\nfunction generateKeyframesName(steps: KeyframesSteps): string {\n  const content = JSON.stringify(steps);\n  const hash = createHash('md5').update(content).digest('hex').slice(0, 6);\n  return `kf${hash}`; // 'kf' prefix for \"keyframes\"\n}\n\n/**\n * Extract keyframes that are used in styles.\n * Merges local @keyframes with global keyframes, filters to only used ones.\n * Generates hash-based names from content for automatic deduplication.\n *\n * @param styles - The styles object (may contain @keyframes and animation properties)\n * @param globalKeyframes - Optional global keyframes from config\n * @returns Keyframes to inject and name mapping for replacement\n */\nexport function extractKeyframesFromStyles(\n  styles: Styles,\n  globalKeyframes?: Record<string, KeyframesSteps> | null,\n): KeyframesExtractionResult {\n  const emptyResult: KeyframesExtractionResult = {\n    keyframes: [],\n    nameMap: new Map(),\n  };\n\n  // Extract animation names from styles\n  const usedNames = extractAnimationNamesFromStyles(styles);\n  if (usedNames.size === 0) return emptyResult;\n\n  // Merge local and global keyframes\n  const local = hasLocalKeyframes(styles)\n    ? extractLocalKeyframes(styles)\n    : null;\n  const allKeyframes = mergeKeyframes(local, globalKeyframes ?? null);\n\n  // Filter to only used keyframes\n  const usedKeyframes = filterUsedKeyframes(allKeyframes, usedNames);\n  if (!usedKeyframes) return emptyResult;\n\n  // Generate hash-based names and collect unique keyframes\n  const seenHashes = new Set<string>();\n  const nameMap = new Map<string, string>();\n  const keyframesToEmit: ExtractedKeyframes[] = [];\n\n  for (const [originalName, steps] of Object.entries(usedKeyframes)) {\n    const hashedName = generateKeyframesName(steps);\n\n    // Always map original name to hashed name (for CSS replacement)\n    nameMap.set(originalName, hashedName);\n\n    // Only emit each unique keyframe once\n    if (!seenHashes.has(hashedName)) {\n      seenHashes.add(hashedName);\n      const css = keyframesToCSS(hashedName, steps);\n      keyframesToEmit.push({ name: hashedName, css });\n    }\n  }\n\n  return { keyframes: keyframesToEmit, nameMap };\n}\n\n/**\n * Convert keyframes steps to CSS string.\n */\nfunction keyframesToCSS(name: string, steps: KeyframesSteps): string {\n  const stepRules: string[] = [];\n\n  for (const [key, value] of Object.entries(steps)) {\n    if (typeof value === 'string') {\n      // Raw CSS string\n      stepRules.push(`${key} { ${value.trim()} }`);\n    } else if (value && typeof value === 'object') {\n      // Style map - convert to CSS declarations\n      const declarations = Object.entries(value)\n        .map(([prop, val]) => {\n          const cssProperty = camelToKebab(prop);\n          return `${cssProperty}: ${val}`;\n        })\n        .join('; ');\n      stepRules.push(`${key} { ${declarations} }`);\n    }\n  }\n\n  return `@keyframes ${name} { ${stepRules.join(' ')} }`;\n}\n\n/**\n * Convert camelCase to kebab-case.\n */\nfunction camelToKebab(str: string): string {\n  return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);\n}\n\n// ============================================================================\n// Property Extraction (auto-infer @property types for zero-runtime)\n// ============================================================================\n\nexport interface ExtractedProperty {\n  name: string;\n  css: string;\n}\n\n/**\n * Extract auto-inferred @property declarations from styles.\n * Scans rendered style declarations and keyframe declarations for custom properties\n * whose types can be inferred from their values.\n *\n * @param styles - The styles object\n * @param options - Options including autoPropertyTypes flag\n * @returns Array of @property CSS rules to inject\n */\nexport function extractPropertiesFromStyles(\n  styles: Styles,\n  options?: { autoPropertyTypes?: boolean },\n): ExtractedProperty[] {\n  if (options?.autoPropertyTypes === false) return [];\n\n  const registered = new Set<string>();\n  const results: ExtractedProperty[] = [];\n\n  // Collect explicitly declared properties (they take precedence)\n  if (hasLocalProperties(styles)) {\n    const localProps = extractLocalProperties(styles);\n    if (localProps) {\n      for (const token of Object.keys(localProps)) {\n        // Normalize token to CSS name\n        let cssName: string;\n        if (token.startsWith('#')) {\n          cssName = `--${token.slice(1)}-color`;\n        } else if (token.startsWith('$')) {\n          cssName = `--${token.slice(1)}`;\n        } else if (token.startsWith('--')) {\n          cssName = token;\n        } else {\n          cssName = `--${token}`;\n        }\n        registered.add(cssName);\n      }\n    }\n  }\n\n  const resolver = new PropertyTypeResolver();\n\n  const registerProperty = (\n    name: string,\n    syntax: string,\n    initialValue: string,\n  ) => {\n    if (registered.has(name)) return;\n    registered.add(name);\n\n    const parts: string[] = [];\n    parts.push(`syntax: \"${syntax}\";`);\n    parts.push(`inherits: true;`);\n    parts.push(`initial-value: ${initialValue};`);\n\n    const css = `@property ${name} { ${parts.join(' ')} }`;\n    results.push({ name, css });\n  };\n\n  const isPropertyDefined = (name: string) => registered.has(name);\n\n  // Scan rendered style declarations\n  const chunkMap = categorizeStyleKeys(styles as Record<string, unknown>);\n  for (const [chunkName, chunkStyleKeys] of chunkMap) {\n    if (chunkStyleKeys.length === 0) continue;\n    const renderResult = renderStylesForChunk(\n      styles,\n      chunkName,\n      chunkStyleKeys,\n    );\n    for (const rule of renderResult.rules) {\n      if (!rule.declarations) continue;\n      resolver.scanDeclarations(\n        rule.declarations,\n        isPropertyDefined,\n        registerProperty,\n      );\n    }\n  }\n\n  // Scan keyframe declarations\n  if (hasLocalKeyframes(styles)) {\n    const localKf = extractLocalKeyframes(styles);\n    if (localKf) {\n      for (const steps of Object.values(localKf)) {\n        scanKeyframeSteps(steps, resolver, isPropertyDefined, registerProperty);\n      }\n    }\n  }\n\n  return results;\n}\n\nfunction scanKeyframeSteps(\n  steps: KeyframesSteps,\n  resolver: PropertyTypeResolver,\n  isPropertyDefined: (name: string) => boolean,\n  registerProperty: (\n    name: string,\n    syntax: string,\n    initialValue: string,\n  ) => void,\n): void {\n  for (const value of Object.values(steps)) {\n    if (typeof value === 'string') {\n      resolver.scanDeclarations(value, isPropertyDefined, registerProperty);\n    } else if (value && typeof value === 'object') {\n      const declarations = Object.entries(value)\n        .map(([prop, val]) => {\n          const cssProperty = camelToKebab(prop);\n          return `${cssProperty}: ${val}`;\n        })\n        .join('; ');\n      resolver.scanDeclarations(\n        declarations,\n        isPropertyDefined,\n        registerProperty,\n      );\n    }\n  }\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tenphi/tasty",
-  "version": "0.0.0-snapshot.d82c48b",
+  "version": "0.0.0-snapshot.e0777b6",
   "description": "A design-system-integrated styling system and DSL for concise, state-aware UI styling",
   "type": "module",
   "main": "./dist/index.js",