classList:add, classList:remove, classList:toggle, style handling

flumi/Scripts/Utils/BackgroundUtils.gd

@@ -89,7 +89,7 @@ static func create_stylebox_from_styles(styles: Dictionary = {}, container: Cont
 	if styles.size() > 0:
 		has_padding = styles.has("padding") or styles.has("padding-top") or styles.has("padding-right") or styles.has("padding-bottom") or styles.has("padding-left")
 	elif container:
-		has_padding = container.has_meta("padding") or container.has_meta("padding-top") or container.has_meta("padding-right") or container.has_meta("padding-bottom") or container.has_meta("padding-left")
+		has_padding = container.has_meta("padding") or container.has_meta("padding_top") or container.has_meta("padding_right") or container.has_meta("padding_bottom") or container.has_meta("padding_left")
 	
 	if has_padding:
 		# General padding
@@ -106,27 +106,22 @@ static func create_stylebox_from_styles(styles: Dictionary = {}, container: Cont
 			style_box.content_margin_bottom = padding_val
 		
 		# Individual padding values override general padding
-		var padding_keys = [["padding-left", "content_margin_left"], ["padding-right", "content_margin_right"], ["padding-top", "content_margin_top"], ["padding-bottom", "content_margin_bottom"]]
+		var padding_mappings = [["padding-left", "content_margin_left"], ["padding-right", "content_margin_right"], ["padding-top", "content_margin_top"], ["padding-bottom", "content_margin_bottom"]]
 		
-		for pair in padding_keys:
-			var key = pair[0]
-			var property = pair[1]
-			var val = null
+		for mapping in padding_mappings:
+			var style_key = mapping[0]
+			var property_key = mapping[1]
+			var val = get_style_or_meta_value(styles, container, style_key)
 			
-			if styles.has(key):
-				val = StyleManager.parse_size(styles[key])
-			elif container and container.has_meta(key):
-				val = StyleManager.parse_size(container.get_meta(key))
-			
-			if val:
-				style_box.set(property, val)
+			if val != null:
+				style_box.set(property_key, val)
 	
 	return style_box
 
 # for AutoSizingFlexContainer
 static func update_background_panel(container: Control) -> void:
 	var needs_background = container.has_meta("custom_css_background_color") or container.has_meta("custom_css_border_radius")
-	var needs_padding = container.has_meta("padding") or container.has_meta("padding-top") or container.has_meta("padding-right") or container.has_meta("padding-bottom") or container.has_meta("padding-left")
+	var needs_padding = container.has_meta("padding") or container.has_meta("padding_top") or container.has_meta("padding_right") or container.has_meta("padding_bottom") or container.has_meta("padding_left")
 	var background_panel = get_background_panel(container)
 	
 	if needs_background or needs_padding:
@@ -203,3 +198,10 @@ static func _on_panel_mouse_exited(panel: PanelContainer):
 
 static func needs_background_wrapper(styles: Dictionary) -> bool:
 	return styles.has("background-color") or styles.has("border-radius") or styles.has("padding") or styles.has("padding-top") or styles.has("padding-right") or styles.has("padding-bottom") or styles.has("padding-left") or styles.has("border-width") or styles.has("border-top-width") or styles.has("border-right-width") or styles.has("border-bottom-width") or styles.has("border-left-width") or styles.has("border-color") or styles.has("border-style") or styles.has("border-top-color") or styles.has("border-right-color") or styles.has("border-bottom-color") or styles.has("border-left-color")
+
+static func get_style_or_meta_value(styles: Dictionary, container: Control, key: String):
+	if styles.has(key):
+		return StyleManager.parse_size(styles[key])
+	elif container and container.has_meta(key):
+		return StyleManager.parse_size(container.get_meta(key))
+	return null

flumi/Scripts/Utils/Lua/Class.gd

@@ -0,0 +1,188 @@
+extends RefCounted
+class_name LuaClassListUtils
+
+static func element_classlist_add_handler(vm: LuauVM, dom_parser: HTMLParser) -> int:
+	vm.luaL_checktype(1, vm.LUA_TTABLE)
+	var css_class: String = vm.luaL_checkstring(2)
+	
+	vm.lua_getfield(1, "_element_id")
+	var element_id: String = vm.lua_tostring(-1)
+	vm.lua_pop(1)
+	
+	# Find the element
+	var element = dom_parser.find_by_id(element_id)
+	if not element:
+		print("DEBUG: Element not found!")
+		return 0
+	
+	# Get classes
+	var current_style = element.get_attribute("style", "")
+	var style_classes = CSSParser.smart_split_utility_classes(current_style) if current_style.length() > 0 else []
+	
+	# Add new css_class if not already present
+	if css_class not in style_classes:
+		style_classes.append(css_class)
+		var new_style_attr = " ".join(style_classes)
+		element.set_attribute("style", new_style_attr)
+		trigger_element_restyle(element, dom_parser)
+	else:
+		print("DEBUG: classList.add - Class already exists")
+	
+	return 0
+
+static func element_classlist_remove_handler(vm: LuauVM, dom_parser: HTMLParser) -> int:
+	vm.luaL_checktype(1, vm.LUA_TTABLE)
+	var css_class: String = vm.luaL_checkstring(2)
+	
+	vm.lua_getfield(1, "_element_id")
+	var element_id: String = vm.lua_tostring(-1)
+	vm.lua_pop(1)
+	
+	# Find the element
+	var element = dom_parser.find_by_id(element_id)
+	if not element:
+		return 0
+	
+	# Get style attribute
+	var current_style = element.get_attribute("style", "")
+	if current_style.length() == 0:
+		return 0
+	
+	var style_classes = CSSParser.smart_split_utility_classes(current_style)
+	var clean_classes = []
+	for style_cls in style_classes:
+		if style_cls != css_class:
+			clean_classes.append(style_cls)
+	
+	# Update style attribute
+	if clean_classes.size() > 0:
+		var new_style_attr = " ".join(clean_classes)
+		element.set_attribute("style", new_style_attr)
+	else:
+		element.attributes.erase("style")
+	
+	trigger_element_restyle(element, dom_parser)
+	return 0
+
+static func element_classlist_toggle_handler(vm: LuauVM, dom_parser: HTMLParser) -> int:
+	vm.luaL_checktype(1, vm.LUA_TTABLE)
+	var css_class: String = vm.luaL_checkstring(2)
+	
+	vm.lua_getfield(1, "_element_id")
+	var element_id: String = vm.lua_tostring(-1)
+	vm.lua_pop(1)
+	
+	# Find the element
+	var element = dom_parser.find_by_id(element_id)
+	if not element:
+		vm.lua_pushboolean(false)
+		return 1
+	
+	# Get style attribute
+	var current_style = element.get_attribute("style", "")
+	var style_classes = CSSParser.smart_split_utility_classes(current_style) if current_style.length() > 0 else []
+	
+	var has_css_class = css_class in style_classes
+	
+	if has_css_class:
+		# Remove css_class
+		var new_classes = []
+		for style_cls in style_classes:
+			if style_cls != css_class:
+				new_classes.append(style_cls)
+		
+		if new_classes.size() > 0:
+			element.set_attribute("style", " ".join(new_classes))
+		else:
+			element.attributes.erase("style")
+		
+		vm.lua_pushboolean(false)
+	else:
+		# Add css_class
+		style_classes.append(css_class)
+		element.set_attribute("style", " ".join(style_classes))
+		vm.lua_pushboolean(true)
+	
+	trigger_element_restyle(element, dom_parser)
+	return 1
+
+static func trigger_element_restyle(element: HTMLParser.HTMLElement, dom_parser: HTMLParser) -> void:
+	# Find DOM node for element
+	var element_id = element.get_attribute("id")
+	var dom_node = dom_parser.parse_result.dom_nodes.get(element_id, null)
+	if not dom_node:
+		return
+		
+	# margins, wrappers, etc.
+	var updated_dom_node = StyleManager.apply_element_styles(dom_node, element, dom_parser)
+	
+	# If the node was wrapped/unwrapped by margin handling, update DOM registration
+	if updated_dom_node != dom_node:
+		dom_parser.parse_result.dom_nodes[element_id] = updated_dom_node
+		dom_node = updated_dom_node
+	
+	# Find node
+	var actual_element_node = dom_node
+	if dom_node is MarginContainer and dom_node.name.begins_with("MarginWrapper_"):
+		if dom_node.get_child_count() > 0:
+			actual_element_node = dom_node.get_child(0)
+	
+	if actual_element_node is HTMLButton:
+		actual_element_node.apply_button_styles(element, dom_parser)
+	elif element.tag_name == "div":
+		update_div_hover_styles(actual_element_node, element, dom_parser)
+	else:
+		update_element_text_content(actual_element_node, element, dom_parser)
+		
+		if actual_element_node.has_method("init"):
+			actual_element_node.init(element, dom_parser)
+
+static func update_element_text_content(dom_node: Control, element: HTMLParser.HTMLElement, dom_parser: HTMLParser) -> void:
+	# Get node
+	var content_node = dom_node
+	if dom_node is MarginContainer and dom_node.name.begins_with("MarginWrapper_"):
+		if dom_node.get_child_count() > 0:
+			content_node = dom_node.get_child(0)
+	
+	# Handle RichTextLabel elements (p, span, etc.)
+	if content_node is RichTextLabel:
+		var styles = dom_parser.get_element_styles_with_inheritance(element, "", [])
+		StyleManager.apply_styles_to_label(content_node, styles, element, dom_parser)
+		return
+	
+	# Handle div elements that might contain RichTextLabel children
+	if element.tag_name == "div":
+		update_text_labels_recursive(content_node, element, dom_parser)
+		return
+
+static func update_text_labels_recursive(node: Node, element: HTMLParser.HTMLElement, dom_parser: HTMLParser) -> void:
+	if node is RichTextLabel:
+		var styles = dom_parser.get_element_styles_with_inheritance(element, "", [])
+		StyleManager.apply_styles_to_label(node, styles, element, dom_parser)
+		return
+	
+	for child in node.get_children():
+		update_text_labels_recursive(child, element, dom_parser)
+
+static func update_div_hover_styles(dom_node: Control, element: HTMLParser.HTMLElement, dom_parser: HTMLParser) -> void:
+	var styles = dom_parser.get_element_styles_with_inheritance(element, "", [])
+	var hover_styles = dom_parser.get_element_styles_with_inheritance(element, "hover", [])
+	
+	if dom_node is PanelContainer:
+		var normal_stylebox = BackgroundUtils.create_stylebox_from_styles(styles)
+		dom_node.add_theme_stylebox_override("panel", normal_stylebox)
+		
+		if hover_styles.size() > 0:
+			BackgroundUtils.setup_panel_hover_support(dom_node, styles, hover_styles)
+		else:
+			if dom_node.has_meta("normal_stylebox"):
+				dom_node.remove_meta("normal_stylebox")
+			if dom_node.has_meta("hover_stylebox"):
+				dom_node.remove_meta("hover_stylebox")
+
+			if dom_node.mouse_entered.is_connected(BackgroundUtils._on_panel_mouse_entered):
+				dom_node.mouse_entered.disconnect(BackgroundUtils._on_panel_mouse_entered)
+			if dom_node.mouse_exited.is_connected(BackgroundUtils._on_panel_mouse_exited):
+				dom_node.mouse_exited.disconnect(BackgroundUtils._on_panel_mouse_exited)
+	
+	update_element_text_content(dom_node, element, dom_parser)

flumi/Scripts/Utils/Lua/Class.gd.uid

@@ -0,0 +1 @@
+uid://dauvw3w3ly087

flumi/Scripts/Utils/UtilityClassValidator.gd

@@ -38,6 +38,9 @@ static func init_patterns():
 			"^border-(t|r|b|l)-\\[.*\\]$",  # custom individual border sides (e.g., border-t-[2px])
 			"^border-(t|r|b|l)-(white|black|transparent|slate-\\d+|gray-\\d+|red-\\d+|green-\\d+|blue-\\d+|yellow-\\d+)$",  # individual border side colors
 			"^border-(white|black|transparent|slate-\\d+|gray-\\d+|red-\\d+|green-\\d+|blue-\\d+|yellow-\\d+)$",  # border colors
+			"^opacity-\\[.*\\]$",  # custom opacity values
+			"^z-\\[.*\\]$",  # custom z-index values
+			"^cursor-[a-zA-Z-]+$",  # cursor types
 			"^(hover|active):",  # pseudo classes
 		]
 		for pattern in utility_patterns: