From 558bb2fc1ba1f7714563613eb8e0b9fe38aa0b6a Mon Sep 17 00:00:00 2001
From: Face <69168154+face-hh@users.noreply.github.com>
Date: Fri, 25 Jul 2025 17:49:32 +0300
Subject: [PATCH] <select>, <option>

---
 README.md                      |  1 +
 Scenes/Styles/BrowserText.tres | 30 ++++++++++++++++++++++++--
 Scenes/Tab.tscn                |  2 +-
 Scenes/Tags/option.tscn        | 23 ++++++++++++++++++++
 Scenes/Tags/select.tscn        | 20 +++++++++++++++++
 Scripts/Tags/option.gd         | 10 +++++++++
 Scripts/Tags/option.gd.uid     |  1 +
 Scripts/Tags/select.gd         | 39 ++++++++++++++++++++++++++++++++++
 Scripts/Tags/select.gd.uid     |  1 +
 Scripts/main.gd                | 16 ++++++++++++++
 icon.svg.import                |  2 +-
 11 files changed, 141 insertions(+), 4 deletions(-)
 create mode 100644 Scenes/Tags/option.tscn
 create mode 100644 Scenes/Tags/select.tscn
 create mode 100644 Scripts/Tags/option.gd
 create mode 100644 Scripts/Tags/option.gd.uid
 create mode 100644 Scripts/Tags/select.gd
 create mode 100644 Scripts/Tags/select.gd.uid

diff --git a/README.md b/README.md
index 36f16b6..d17f317 100644
--- a/README.md
+++ b/README.md
@@ -10,6 +10,7 @@ TODO:
 9. **Required** attribute for inputs
 10. Installer should register **gurt://** as a valid protocol thru the registry.
 11. < input type=**datetime** />, essentially a type "date" but with a vertical separator, then `mm | ss | FORMAT` layout for time.
+12. **< table >** component. [🔗 Related Godot proposal](https://github.com/godotengine/godot-proposals/issues/97)
 
 Issues:
 1. **< br />** counts as 1 element in **WebsiteContainer**, therefore despite being (0,0) in size, it counts as double in spacing
diff --git a/Scenes/Styles/BrowserText.tres b/Scenes/Styles/BrowserText.tres
index bb4b543..7d6c026 100644
--- a/Scenes/Styles/BrowserText.tres
+++ b/Scenes/Styles/BrowserText.tres
@@ -1,4 +1,4 @@
-[gd_resource type="Theme" load_steps=42 format=3 uid="uid://bn6rbmdy60lhr"]
+[gd_resource type="Theme" load_steps=44 format=3 uid="uid://bn6rbmdy60lhr"]
 
 [ext_resource type="Texture2D" uid="uid://dn4dxn8hkrd64" path="res://Assets/Icons/checkbox.svg" id="1_75mhk"]
 [ext_resource type="Texture2D" uid="uid://b6ucuyluuw43" path="res://Assets/Icons/checkbox_pressed_grayscale.svg" id="2_2abar"]
@@ -91,6 +91,21 @@ corner_radius_top_right = 3
 corner_radius_bottom_right = 3
 corner_radius_bottom_left = 3
 
+[sub_resource type="StyleBoxEmpty" id="StyleBoxEmpty_hcg1v"]
+
+[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_imqxn"]
+content_margin_left = 5.0
+bg_color = Color(0.6, 0.6, 0.6, 0)
+border_width_left = 1
+border_width_top = 1
+border_width_right = 1
+border_width_bottom = 1
+border_color = Color(0, 0, 0, 1)
+corner_radius_top_left = 3
+corner_radius_top_right = 3
+corner_radius_bottom_right = 3
+corner_radius_bottom_left = 3
+
 [sub_resource type="StyleBoxFlat" id="StyleBoxFlat_luhv8"]
 content_margin_left = 15.0
 content_margin_top = 15.0
@@ -196,9 +211,20 @@ LineEdit/colors/font_placeholder_color = Color(0, 0, 0, 0.6)
 LineEdit/styles/focus = SubResource("StyleBoxFlat_jecr6")
 LineEdit/styles/normal = SubResource("StyleBoxFlat_75mhk")
 LineEdit/styles/read_only = null
+OptionButton/colors/font_color = Color(0, 0, 0, 1)
+OptionButton/colors/font_focus_color = Color(0, 0, 0, 1)
+OptionButton/colors/font_hover_color = Color(0, 0, 0, 1)
+OptionButton/colors/font_hover_pressed_color = Color(0, 0, 0, 1)
+OptionButton/colors/font_pressed_color = Color(0, 0, 0, 1)
+OptionButton/styles/focus = SubResource("StyleBoxEmpty_hcg1v")
+OptionButton/styles/hover = SubResource("StyleBoxFlat_imqxn")
+OptionButton/styles/normal = SubResource("StyleBoxFlat_75mhk")
+OptionButton/styles/pressed = SubResource("StyleBoxFlat_jecr6")
 PopupMenu/colors/font_color = Color(1, 1, 1, 1)
-PopupMenu/colors/font_hover_color = Color(0.817522, 0.817521, 0.817521, 1)
+PopupMenu/colors/font_hover_color = Color(1, 1, 1, 1)
+PopupMenu/constants/h_separation = 8
 PopupMenu/constants/icon_max_width = 24
+PopupMenu/constants/item_start_padding = 4
 PopupMenu/icons/checked = ExtResource("10_luhv8")
 PopupMenu/icons/checked_disabled = ExtResource("11_i42bf")
 PopupMenu/icons/radio_checked = ExtResource("12_4akvr")
diff --git a/Scenes/Tab.tscn b/Scenes/Tab.tscn
index 5a06534..7aa7bd5 100644
--- a/Scenes/Tab.tscn
+++ b/Scenes/Tab.tscn
@@ -6,7 +6,7 @@
 [ext_resource type="Texture2D" uid="uid://c7u7a1u1v04bx" path="res://Scenes/Styles/TabGradientDefault.tres" id="3_q3baj"]
 [ext_resource type="StyleBox" uid="uid://bx3sgro1ageff" path="res://Scenes/Styles/TabDefault.tres" id="4_ib6pj"]
 [ext_resource type="Texture2D" uid="uid://dglkjumm1q4lo" path="res://Assets/Icons/23x23-empty.svg" id="5_ib6pj"]
-[ext_resource type="Texture2D" uid="uid://70k6bw18rsri" path="res://icon.svg" id="6_ib6pj"]
+[ext_resource type="Texture2D" uid="uid://bslojb4cmwnvn" path="res://icon.svg" id="6_ib6pj"]
 [ext_resource type="StyleBox" uid="uid://dn8exdnk8tjce" path="res://Scenes/Styles/CloseButtonHover.tres" id="6_pisds"]
 [ext_resource type="StyleBox" uid="uid://dn6r16retee3l" path="res://Scenes/Styles/CloseButtonNormal.tres" id="7_1ohlo"]
 
diff --git a/Scenes/Tags/option.tscn b/Scenes/Tags/option.tscn
new file mode 100644
index 0000000..6ee40b1
--- /dev/null
+++ b/Scenes/Tags/option.tscn
@@ -0,0 +1,23 @@
+[gd_scene load_steps=3 format=3 uid="uid://bopt1234568aa"]
+
+[ext_resource type="Script" uid="uid://ps8duq0aw3tu" path="res://Scripts/Tags/li.gd" id="1_option"]
+[ext_resource type="Theme" uid="uid://bn6rbmdy60lhr" path="res://Scenes/Styles/BrowserText.tres" id="2_theme"]
+
+[node name="Option" type="Control"]
+layout_mode = 3
+anchors_preset = 10
+anchor_right = 1.0
+grow_horizontal = 2
+script = ExtResource("1_option")
+
+[node name="RichTextLabel" type="RichTextLabel" parent="."]
+layout_mode = 2
+size_flags_horizontal = 3
+focus_mode = 2
+mouse_default_cursor_shape = 1
+theme = ExtResource("2_theme")
+theme_override_colors/default_color = Color(0, 0, 0, 1)
+bbcode_enabled = true
+text = "Placeholder"
+fit_content = true
+selection_enabled = true
diff --git a/Scenes/Tags/select.tscn b/Scenes/Tags/select.tscn
new file mode 100644
index 0000000..7203742
--- /dev/null
+++ b/Scenes/Tags/select.tscn
@@ -0,0 +1,20 @@
+[gd_scene load_steps=3 format=3 uid="uid://bsel1234568aa"]
+
+[ext_resource type="Script" uid="uid://bmu8q4rm1wopd" path="res://Scripts/Tags/select.gd" id="1_select"]
+[ext_resource type="Theme" uid="uid://bn6rbmdy60lhr" path="res://Scenes/Styles/BrowserText.tres" id="2_xq313"]
+
+[node name="Select" type="Control"]
+layout_mode = 3
+anchors_preset = 10
+anchor_right = 1.0
+grow_horizontal = 2
+size_flags_horizontal = 3
+size_flags_vertical = 0
+script = ExtResource("1_select")
+
+[node name="OptionButton" type="OptionButton" parent="."]
+layout_mode = 0
+offset_right = 161.0
+offset_bottom = 32.0
+mouse_default_cursor_shape = 2
+theme = ExtResource("2_xq313")
diff --git a/Scripts/Tags/option.gd b/Scripts/Tags/option.gd
new file mode 100644
index 0000000..2f49a14
--- /dev/null
+++ b/Scripts/Tags/option.gd
@@ -0,0 +1,10 @@
+extends Control
+
+func init(element: HTMLParser.HTMLElement) -> void:
+	# This is mainly for cases where <option> appears outside of <select>
+	var label = RichTextLabel.new()
+	label.bbcode_enabled = true
+	label.fit_content = true
+	label.scroll_active = false
+	label.text = "[font_size=24]%s[/font_size]" % element.get_bbcode_formatted_text()
+	add_child(label)
diff --git a/Scripts/Tags/option.gd.uid b/Scripts/Tags/option.gd.uid
new file mode 100644
index 0000000..1823def
--- /dev/null
+++ b/Scripts/Tags/option.gd.uid
@@ -0,0 +1 @@
+uid://c66r24cncb1dp
diff --git a/Scripts/Tags/select.gd b/Scripts/Tags/select.gd
new file mode 100644
index 0000000..ee0c4f8
--- /dev/null
+++ b/Scripts/Tags/select.gd
@@ -0,0 +1,39 @@
+extends Control
+
+const BROWSER_TEXT = preload("res://Scenes/Styles/BrowserText.tres")
+
+func init(element: HTMLParser.HTMLElement) -> void:
+	var option_button: OptionButton = $OptionButton
+	
+	var selected_index = -1
+	var option_index = 0
+
+	# find <option>s
+	for child_element in element.children:
+		if child_element.tag_name == "option":
+			var option_text = child_element.text_content.strip_edges()
+			var option_value = child_element.get_attribute("value")
+
+			option_value = option_text
+			
+			option_button.add_item(option_text, option_index)
+			option_button.set_item_metadata(option_index, option_value)
+			
+			# Check if this option is selected
+			var is_selected = child_element.get_attribute("selected")
+			if is_selected.length() > 0 and selected_index == -1:
+				selected_index = option_index
+			
+			# Check if this option is disabled
+			var is_disabled = child_element.get_attribute("disabled")
+			if is_disabled.length() > 0:
+				option_button.set_item_disabled(option_index, true)
+			
+			option_index += 1
+	
+	# Set the selected item
+	if selected_index >= 0:
+		option_button.selected = selected_index
+	
+	add_child(option_button)
+	custom_minimum_size = option_button.size
diff --git a/Scripts/Tags/select.gd.uid b/Scripts/Tags/select.gd.uid
new file mode 100644
index 0000000..0aa0188
--- /dev/null
+++ b/Scripts/Tags/select.gd.uid
@@ -0,0 +1 @@
+uid://bmu8q4rm1wopd
diff --git a/Scripts/main.gd b/Scripts/main.gd
index 0fd8996..a2d12bf 100644
--- a/Scripts/main.gd
+++ b/Scripts/main.gd
@@ -23,6 +23,8 @@ const BUTTON = preload("res://Scenes/Tags/button.tscn")
 const UL = preload("res://Scenes/Tags/ul.tscn")
 const OL = preload("res://Scenes/Tags/ol.tscn")
 const LI = preload("res://Scenes/Tags/li.tscn")
+const SELECT = preload("res://Scenes/Tags/select.tscn")
+const OPTION = preload("res://Scenes/Tags/option.tscn")
 
 const MIN_SIZE = Vector2i(750, 200)
 
@@ -75,6 +77,14 @@ both      spaces and
 line breaks
 </pre>
 
+<select>
+<option value=\"test1\">Test 1</option>
+<option value=\"test2\" selected=\"true\">Test 2</option>
+<option value=\"test3\">Test 3</option>
+<option value=\"test4\" disabled=\"true\">Test 4</option>
+<option value=\"test5\">Test 5</option>
+</select>
+
 <!-- action, method, and type=submit are for when we implement Lua -->
 <form action=\"/submit\" method=\"POST\">
   <span>Name:</span>
@@ -463,6 +473,12 @@ func create_element_node(element: HTMLParser.HTMLElement) -> Control:
 		"li":
 			node = LI.instantiate()
 			node.init(element)
+		"select":
+			node = SELECT.instantiate()
+			node.init(element)
+		"option":
+			node = OPTION.instantiate()
+			node.init(element)
 		_:
 			return null
 	
diff --git a/icon.svg.import b/icon.svg.import
index 62ed273..7c15aba 100644
--- a/icon.svg.import
+++ b/icon.svg.import
@@ -2,7 +2,7 @@
 
 importer="texture"
 type="CompressedTexture2D"
-uid="uid://70k6bw18rsri"
+uid="uid://bslojb4cmwnvn"
 path="res://.godot/imported/icon.svg-218a8f2b3041327d8a5756f3a245f83b.ctex"
 metadata={
 "vram_texture": false