input (color)

2025-07-23 20:42:02 +03:00
parent a899f3637e
commit 2810233729
26 changed files with 571 additions and 99 deletions
--- a/Assets/Icons/checkbox_16x16.svg
+++ b/Assets/Icons/checkbox_16x16.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:serif="http://www.serif.com/" width="16" height="16" viewBox="0 0 134 134" version="1.1" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><path d="M129.026,35.376l0,62.54c0,17.225 -13.984,31.208 -31.208,31.208l-62.416,0c-17.224,0 -31.208,-13.983 -31.208,-31.208l-0,-62.54c-0,-17.224 13.984,-31.208 31.208,-31.208l62.416,0c17.224,0 31.208,13.984 31.208,31.208Z" style="fill:none;stroke:#fff;stroke-width:8.33px;"/></svg>
--- a/Assets/Icons/checkbox_16x16.svg.import
+++ b/Assets/Icons/checkbox_16x16.svg.import
@@ -0,0 +1,37 @@
+[remap]
+
+importer="texture"
+type="CompressedTexture2D"
+uid="uid://chudjt8lwhrte"
+path="res://.godot/imported/checkbox_16x16.svg-23a6d489dba63f0e32212ca7186703c1.ctex"
+metadata={
+"vram_texture": false
+}
+
+[deps]
+
+source_file="res://Assets/Icons/checkbox_16x16.svg"
+dest_files=["res://.godot/imported/checkbox_16x16.svg-23a6d489dba63f0e32212ca7186703c1.ctex"]
+
+[params]
+
+compress/mode=0
+compress/high_quality=false
+compress/lossy_quality=0.7
+compress/hdr_compression=1
+compress/normal_map=0
+compress/channel_pack=0
+mipmaps/generate=false
+mipmaps/limit=-1
+roughness/mode=0
+roughness/src_normal=""
+process/fix_alpha_border=true
+process/premult_alpha=false
+process/normal_map_invert_y=false
+process/hdr_as_srgb=false
+process/hdr_clamp_exposure=false
+process/size_limit=0
+detect_3d/compress_to=1
+svg/scale=1.0
+editor/scale_with_editor_scale=false
+editor/convert_colors_with_editor_theme=false
--- a/Assets/Icons/checkbox_disabled_16x16.svg
+++ b/Assets/Icons/checkbox_disabled_16x16.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:serif="http://www.serif.com/" width="16" height="16" viewBox="0 0 134 134" version="1.1" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><path d="M129.026,35.376l0,62.54c0,17.225 -13.984,31.208 -31.208,31.208l-62.416,0c-17.224,0 -31.208,-13.983 -31.208,-31.208l-0,-62.54c-0,-17.224 13.984,-31.208 31.208,-31.208l62.416,0c17.224,0 31.208,13.984 31.208,31.208Z" style="fill:none;stroke:#707070;stroke-width:8.33px;"/></svg>
--- a/Assets/Icons/checkbox_disabled_16x16.svg.import
+++ b/Assets/Icons/checkbox_disabled_16x16.svg.import
@@ -0,0 +1,37 @@
+[remap]
+
+importer="texture"
+type="CompressedTexture2D"
+uid="uid://t67d03qvsf5y"
+path="res://.godot/imported/checkbox_disabled_16x16.svg-0df6b630be4bcd269a8e85838044fecf.ctex"
+metadata={
+"vram_texture": false
+}
+
+[deps]
+
+source_file="res://Assets/Icons/checkbox_disabled_16x16.svg"
+dest_files=["res://.godot/imported/checkbox_disabled_16x16.svg-0df6b630be4bcd269a8e85838044fecf.ctex"]
+
+[params]
+
+compress/mode=0
+compress/high_quality=false
+compress/lossy_quality=0.7
+compress/hdr_compression=1
+compress/normal_map=0
+compress/channel_pack=0
+mipmaps/generate=false
+mipmaps/limit=-1
+roughness/mode=0
+roughness/src_normal=""
+process/fix_alpha_border=true
+process/premult_alpha=false
+process/normal_map_invert_y=false
+process/hdr_as_srgb=false
+process/hdr_clamp_exposure=false
+process/size_limit=0
+detect_3d/compress_to=1
+svg/scale=1.0
+editor/scale_with_editor_scale=false
+editor/convert_colors_with_editor_theme=false
--- a/Assets/Icons/checkbox_pressed_16x16.svg
+++ b/Assets/Icons/checkbox_pressed_16x16.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:serif="http://www.serif.com/" width="16" height="16" viewBox="0 0 134 134" version="1.1" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><path d="M129.026,35.376l0,62.54c0,17.225 -13.984,31.208 -31.208,31.208l-62.416,0c-17.224,0 -31.208,-13.983 -31.208,-31.208l-0,-62.54c-0,-17.224 13.984,-31.208 31.208,-31.208l62.416,0c17.224,0 31.208,13.984 31.208,31.208Z" style="fill:#3f77ce;stroke:#3f77ce;stroke-width:8.33px;"/><path d="M34.151,60.318l-15.065,18.384l39.627,29.474l15.535,-18.591l-40.097,-29.267Z" style="fill:#fff;"/><path d="M114.247,41.46l-17.257,-16.344l-55.818,66.234l17.538,16.826l55.537,-66.716Z" style="fill:#fff;"/></svg>
--- a/Assets/Icons/checkbox_pressed_16x16.svg.import
+++ b/Assets/Icons/checkbox_pressed_16x16.svg.import
@@ -0,0 +1,37 @@
+[remap]
+
+importer="texture"
+type="CompressedTexture2D"
+uid="uid://ckirjsfw1b64a"
+path="res://.godot/imported/checkbox_pressed_16x16.svg-dca6d3e6936ded383c065d29e07c0120.ctex"
+metadata={
+"vram_texture": false
+}
+
+[deps]
+
+source_file="res://Assets/Icons/checkbox_pressed_16x16.svg"
+dest_files=["res://.godot/imported/checkbox_pressed_16x16.svg-dca6d3e6936ded383c065d29e07c0120.ctex"]
+
+[params]
+
+compress/mode=0
+compress/high_quality=false
+compress/lossy_quality=0.7
+compress/hdr_compression=1
+compress/normal_map=0
+compress/channel_pack=0
+mipmaps/generate=false
+mipmaps/limit=-1
+roughness/mode=0
+roughness/src_normal=""
+process/fix_alpha_border=true
+process/premult_alpha=false
+process/normal_map_invert_y=false
+process/hdr_as_srgb=false
+process/hdr_clamp_exposure=false
+process/size_limit=0
+detect_3d/compress_to=1
+svg/scale=1.0
+editor/scale_with_editor_scale=false
+editor/convert_colors_with_editor_theme=false
--- a/Assets/Icons/checkbox_pressed_grayscale_16x16.svg
+++ b/Assets/Icons/checkbox_pressed_grayscale_16x16.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:serif="http://www.serif.com/" width="16" height="16" viewBox="0 0 134 134" version="1.1" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><path d="M129.026,35.376l0,62.54c0,17.225 -13.984,31.208 -31.208,31.208l-62.416,0c-17.224,0 -31.208,-13.983 -31.208,-31.208l-0,-62.54c-0,-17.224 13.984,-31.208 31.208,-31.208l62.416,0c17.224,0 31.208,13.984 31.208,31.208Z" style="fill: #707070;stroke: #707070;stroke-width:8.33px;"/><path d="M34.151,60.318l-15.065,18.384l39.627,29.474l15.535,-18.591l-40.097,-29.267Z" style="fill: #ffffff;"/><path d="M114.247,41.46l-17.257,-16.344l-55.818,66.234l17.538,16.826l55.537,-66.716Z" style="fill: #ffffff;"/></svg>
--- a/Assets/Icons/checkbox_pressed_grayscale_16x16.svg.import
+++ b/Assets/Icons/checkbox_pressed_grayscale_16x16.svg.import
@@ -0,0 +1,37 @@
+[remap]
+
+importer="texture"
+type="CompressedTexture2D"
+uid="uid://dgg0optlx712y"
+path="res://.godot/imported/checkbox_pressed_grayscale_16x16.svg-8176601530df5464862e7fb442122e6c.ctex"
+metadata={
+"vram_texture": false
+}
+
+[deps]
+
+source_file="res://Assets/Icons/checkbox_pressed_grayscale_16x16.svg"
+dest_files=["res://.godot/imported/checkbox_pressed_grayscale_16x16.svg-8176601530df5464862e7fb442122e6c.ctex"]
+
+[params]
+
+compress/mode=0
+compress/high_quality=false
+compress/lossy_quality=0.7
+compress/hdr_compression=1
+compress/normal_map=0
+compress/channel_pack=0
+mipmaps/generate=false
+mipmaps/limit=-1
+roughness/mode=0
+roughness/src_normal=""
+process/fix_alpha_border=true
+process/premult_alpha=false
+process/normal_map_invert_y=false
+process/hdr_as_srgb=false
+process/hdr_clamp_exposure=false
+process/size_limit=0
+detect_3d/compress_to=1
+svg/scale=1.0
+editor/scale_with_editor_scale=false
+editor/convert_colors_with_editor_theme=false
--- a/Assets/Icons/pipette.svg
+++ b/Assets/Icons/pipette.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-pipette-icon lucide-pipette"><path d="m12 9-8.414 8.414A2 2 0 0 0 3 18.828v1.344a2 2 0 0 1-.586 1.414A2 2 0 0 1 3.828 21h1.344a2 2 0 0 0 1.414-.586L15 12"/><path d="m18 9 .4.4a1 1 0 1 1-3 3l-3.8-3.8a1 1 0 1 1 3-3l.4.4 3.4-3.4a1 1 0 1 1 3 3z"/><path d="m2 22 .414-.414"/></svg>
--- a/Assets/Icons/pipette.svg.import
+++ b/Assets/Icons/pipette.svg.import
@@ -0,0 +1,37 @@
+[remap]
+
+importer="texture"
+type="CompressedTexture2D"
+uid="uid://b3y601mvq1suc"
+path="res://.godot/imported/pipette.svg-a6be8bac297998a574c1b4a125cbf35b.ctex"
+metadata={
+"vram_texture": false
+}
+
+[deps]
+
+source_file="res://Assets/Icons/pipette.svg"
+dest_files=["res://.godot/imported/pipette.svg-a6be8bac297998a574c1b4a125cbf35b.ctex"]
+
+[params]
+
+compress/mode=0
+compress/high_quality=false
+compress/lossy_quality=0.7
+compress/hdr_compression=1
+compress/normal_map=0
+compress/channel_pack=0
+mipmaps/generate=false
+mipmaps/limit=-1
+roughness/mode=0
+roughness/src_normal=""
+process/fix_alpha_border=true
+process/premult_alpha=false
+process/normal_map_invert_y=false
+process/hdr_as_srgb=false
+process/hdr_clamp_exposure=false
+process/size_limit=0
+detect_3d/compress_to=1
+svg/scale=0.5
+editor/scale_with_editor_scale=false
+editor/convert_colors_with_editor_theme=false
--- a/Assets/Icons/radio_16x16.svg
+++ b/Assets/Icons/radio_16x16.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:serif="http://www.serif.com/" width="16" height="16" viewBox="0 0 134 134" version="1.1" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><ellipse cx="66.61" cy="66.646" rx="62.416" ry="62.478" style="fill:none;stroke:#fff;stroke-width:8.33px;"/></svg>
--- a/Assets/Icons/radio_16x16.svg.import
+++ b/Assets/Icons/radio_16x16.svg.import
@@ -0,0 +1,37 @@
+[remap]
+
+importer="texture"
+type="CompressedTexture2D"
+uid="uid://cgs5np14wqb6e"
+path="res://.godot/imported/radio_16x16.svg-336cec64bc60aed5eb9a10bc1f4f411e.ctex"
+metadata={
+"vram_texture": false
+}
+
+[deps]
+
+source_file="res://Assets/Icons/radio_16x16.svg"
+dest_files=["res://.godot/imported/radio_16x16.svg-336cec64bc60aed5eb9a10bc1f4f411e.ctex"]
+
+[params]
+
+compress/mode=0
+compress/high_quality=false
+compress/lossy_quality=0.7
+compress/hdr_compression=1
+compress/normal_map=0
+compress/channel_pack=0
+mipmaps/generate=false
+mipmaps/limit=-1
+roughness/mode=0
+roughness/src_normal=""
+process/fix_alpha_border=true
+process/premult_alpha=false
+process/normal_map_invert_y=false
+process/hdr_as_srgb=false
+process/hdr_clamp_exposure=false
+process/size_limit=0
+detect_3d/compress_to=1
+svg/scale=1.0
+editor/scale_with_editor_scale=false
+editor/convert_colors_with_editor_theme=false
--- a/Assets/Icons/radio_checked_16x16.svg
+++ b/Assets/Icons/radio_checked_16x16.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:serif="http://www.serif.com/" width="16" height="16" viewBox="0 0 134 134" version="1.1" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><ellipse cx="66.61" cy="66.646" rx="62.416" ry="62.478" style="fill:none;stroke:#3f77ce;stroke-width:8.33px;"/><ellipse cx="66.667" cy="66.646" rx="45.648" ry="45.693" style="fill:#3f77ce;"/></svg>
--- a/Assets/Icons/radio_checked_16x16.svg.import
+++ b/Assets/Icons/radio_checked_16x16.svg.import
@@ -0,0 +1,37 @@
+[remap]
+
+importer="texture"
+type="CompressedTexture2D"
+uid="uid://dsw81p3ns5n8t"
+path="res://.godot/imported/radio_checked_16x16.svg-ecff803b12f1ac3b6b894e02ad62c5ea.ctex"
+metadata={
+"vram_texture": false
+}
+
+[deps]
+
+source_file="res://Assets/Icons/radio_checked_16x16.svg"
+dest_files=["res://.godot/imported/radio_checked_16x16.svg-ecff803b12f1ac3b6b894e02ad62c5ea.ctex"]
+
+[params]
+
+compress/mode=0
+compress/high_quality=false
+compress/lossy_quality=0.7
+compress/hdr_compression=1
+compress/normal_map=0
+compress/channel_pack=0
+mipmaps/generate=false
+mipmaps/limit=-1
+roughness/mode=0
+roughness/src_normal=""
+process/fix_alpha_border=true
+process/premult_alpha=false
+process/normal_map_invert_y=false
+process/hdr_as_srgb=false
+process/hdr_clamp_exposure=false
+process/size_limit=0
+detect_3d/compress_to=1
+svg/scale=1.0
+editor/scale_with_editor_scale=false
+editor/convert_colors_with_editor_theme=false
--- a/Assets/Icons/radio_checked_grayscale_16x16.svg
+++ b/Assets/Icons/radio_checked_grayscale_16x16.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:serif="http://www.serif.com/" width="16" height="16" viewBox="0 0 134 134" version="1.1" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><ellipse cx="66.61" cy="66.646" rx="62.416" ry="62.478" style="fill: none;stroke: #707070;stroke-width:8.33px;"/><ellipse cx="66.667" cy="66.646" rx="45.648" ry="45.693" style="fill: #707070;"/></svg>
--- a/Assets/Icons/radio_checked_grayscale_16x16.svg.import
+++ b/Assets/Icons/radio_checked_grayscale_16x16.svg.import
@@ -0,0 +1,37 @@
+[remap]
+
+importer="texture"
+type="CompressedTexture2D"
+uid="uid://efxon2wxxcdw"
+path="res://.godot/imported/radio_checked_grayscale_16x16.svg-e26000b6b8955f1d41f856a8b164a592.ctex"
+metadata={
+"vram_texture": false
+}
+
+[deps]
+
+source_file="res://Assets/Icons/radio_checked_grayscale_16x16.svg"
+dest_files=["res://.godot/imported/radio_checked_grayscale_16x16.svg-e26000b6b8955f1d41f856a8b164a592.ctex"]
+
+[params]
+
+compress/mode=0
+compress/high_quality=false
+compress/lossy_quality=0.7
+compress/hdr_compression=1
+compress/normal_map=0
+compress/channel_pack=0
+mipmaps/generate=false
+mipmaps/limit=-1
+roughness/mode=0
+roughness/src_normal=""
+process/fix_alpha_border=true
+process/premult_alpha=false
+process/normal_map_invert_y=false
+process/hdr_as_srgb=false
+process/hdr_clamp_exposure=false
+process/size_limit=0
+detect_3d/compress_to=1
+svg/scale=1.0
+editor/scale_with_editor_scale=false
+editor/convert_colors_with_editor_theme=false
--- a/Assets/Icons/radio_disabled_16x16.svg
+++ b/Assets/Icons/radio_disabled_16x16.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:serif="http://www.serif.com/" width="16" height="16" viewBox="0 0 134 134" version="1.1" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><ellipse cx="66.61" cy="66.646" rx="62.416" ry="62.478" style="fill:none;stroke:#707070;stroke-width:8.33px;"/></svg>
--- a/Assets/Icons/radio_disabled_16x16.svg.import
+++ b/Assets/Icons/radio_disabled_16x16.svg.import
@@ -0,0 +1,37 @@
+[remap]
+
+importer="texture"
+type="CompressedTexture2D"
+uid="uid://byx73gxjjslo1"
+path="res://.godot/imported/radio_disabled_16x16.svg-bc35dc6638da44ddcd959b0084d0d551.ctex"
+metadata={
+"vram_texture": false
+}
+
+[deps]
+
+source_file="res://Assets/Icons/radio_disabled_16x16.svg"
+dest_files=["res://.godot/imported/radio_disabled_16x16.svg-bc35dc6638da44ddcd959b0084d0d551.ctex"]
+
+[params]
+
+compress/mode=0
+compress/high_quality=false
+compress/lossy_quality=0.7
+compress/hdr_compression=1
+compress/normal_map=0
+compress/channel_pack=0
+mipmaps/generate=false
+mipmaps/limit=-1
+roughness/mode=0
+roughness/src_normal=""
+process/fix_alpha_border=true
+process/premult_alpha=false
+process/normal_map_invert_y=false
+process/hdr_as_srgb=false
+process/hdr_clamp_exposure=false
+process/size_limit=0
+detect_3d/compress_to=1
+svg/scale=1.0
+editor/scale_with_editor_scale=false
+editor/convert_colors_with_editor_theme=false
--- a/README.md
+++ b/README.md
@@ -10,4 +10,8 @@ TODO:
 9. **Required** attribute for inputs

 Issues:
-1. **< br />** counts as 1 element in **WebsiteContainer**, therefore despite being (0,0) in size, it counts as double in spacing.
+1. **< br />** counts as 1 element in **WebsiteContainer**, therefore despite being (0,0) in size, it counts as double in spacing
+
+Notes:
+- **<input />** is sort-of inline in normal web. We render it as a block element (new-line).
+- A single `RichTextLabel` for inline text tags should stop, we should use invididual ones so it's easier to style and achieve separation through a `vboxcontainer`.
--- a/Scenes/Styles/BrowserText.tres
+++ b/Scenes/Styles/BrowserText.tres
@@ -1,4 +1,4 @@
-[gd_resource type="Theme" load_steps=21 format=3 uid="uid://bn6rbmdy60lhr"]
+[gd_resource type="Theme" load_steps=36 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"]
@@ -8,6 +8,15 @@
 [ext_resource type="Texture2D" uid="uid://y1xqfcd8ro5t" path="res://Assets/Icons/radio_checked_grayscale.svg" id="4_n77xs"]
 [ext_resource type="Texture2D" uid="uid://bj7bpovnm25ml" path="res://Assets/Icons/radio_checked.svg" id="4_sesrd"]
 [ext_resource type="Texture2D" uid="uid://bs414mrvwdmcn" path="res://Assets/Icons/radio_disabled.svg" id="6_r011l"]
+[ext_resource type="Texture2D" uid="uid://ckirjsfw1b64a" path="res://Assets/Icons/checkbox_pressed_16x16.svg" id="10_luhv8"]
+[ext_resource type="Texture2D" uid="uid://b3y601mvq1suc" path="res://Assets/Icons/pipette.svg" id="11_88j74"]
+[ext_resource type="Texture2D" uid="uid://dgg0optlx712y" path="res://Assets/Icons/checkbox_pressed_grayscale_16x16.svg" id="11_i42bf"]
+[ext_resource type="Texture2D" uid="uid://t67d03qvsf5y" path="res://Assets/Icons/checkbox_disabled_16x16.svg" id="12_0an8v"]
+[ext_resource type="Texture2D" uid="uid://dsw81p3ns5n8t" path="res://Assets/Icons/radio_checked_16x16.svg" id="12_4akvr"]
+[ext_resource type="Texture2D" uid="uid://efxon2wxxcdw" path="res://Assets/Icons/radio_checked_grayscale_16x16.svg" id="13_1vd2l"]
+[ext_resource type="Texture2D" uid="uid://cgs5np14wqb6e" path="res://Assets/Icons/radio_16x16.svg" id="14_0v877"]
+[ext_resource type="Texture2D" uid="uid://byx73gxjjslo1" path="res://Assets/Icons/radio_disabled_16x16.svg" id="15_2awy5"]
+[ext_resource type="Texture2D" uid="uid://chudjt8lwhrte" path="res://Assets/Icons/checkbox_16x16.svg" id="16_1vd2l"]

 [sub_resource type="StyleBoxEmpty" id="StyleBoxEmpty_c32on"]

@@ -53,6 +62,40 @@ 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
+content_margin_right = 15.0
+content_margin_bottom = 15.0
+bg_color = Color(0.168627, 0.168627, 0.168627, 1)
+corner_radius_top_left = 15
+corner_radius_top_right = 15
+corner_radius_bottom_right = 15
+corner_radius_bottom_left = 15
+
+[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_ya683"]
+content_margin_left = 15.0
+content_margin_top = 15.0
+content_margin_right = 15.0
+content_margin_bottom = 15.0
+bg_color = Color(0.105882, 0.105882, 0.105882, 1)
+corner_radius_top_left = 15
+corner_radius_top_right = 15
+corner_radius_bottom_right = 15
+corner_radius_bottom_left = 15
+shadow_size = 2
+
+[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_06us3"]
+content_margin_left = 15.0
+content_margin_top = 15.0
+content_margin_right = 15.0
+content_margin_bottom = 15.0
+bg_color = Color(0.105882, 0.105882, 0.105882, 1)
+corner_radius_top_left = 15
+corner_radius_top_right = 15
+corner_radius_bottom_right = 15
+corner_radius_bottom_left = 15
+
 [sub_resource type="SystemFont" id="SystemFont_jecr6"]
 font_names = PackedStringArray("Serif")
 font_weight = 700
@@ -75,10 +118,33 @@ font_names = PackedStringArray("Serif")

 [sub_resource type="StyleBoxEmpty" id="StyleBoxEmpty_jecr6"]

+[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_1vd2l"]
+bg_color = Color(0.12103, 0.12103, 0.12103, 1)
+corner_radius_top_left = 4
+corner_radius_top_right = 4
+corner_radius_bottom_right = 4
+corner_radius_bottom_left = 4
+
+[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_4akvr"]
+content_margin_top = 4.0
+content_margin_bottom = 4.0
+bg_color = Color(0.147672, 0.147672, 0.147672, 1)
+border_width_top = 2
+corner_radius_bottom_right = 4
+corner_radius_bottom_left = 4
+
+[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_r011l"]
+bg_color = Color(0.105882, 0.105882, 0.105882, 1)
+corner_radius_top_left = 4
+corner_radius_top_right = 4
+corner_radius_bottom_right = 4
+corner_radius_bottom_left = 4
+
 [resource]
 Button/styles/focus = SubResource("StyleBoxEmpty_c32on")
 Button/styles/hover = SubResource("StyleBoxFlat_7g0pl")
 Button/styles/normal = SubResource("StyleBoxFlat_c32on")
+CheckBox/constants/icon_max_width = 24
 CheckBox/icons/checked = ExtResource("2_3k2jb")
 CheckBox/icons/checked_disabled = ExtResource("2_2abar")
 CheckBox/icons/radio_checked = ExtResource("4_sesrd")
@@ -88,12 +154,27 @@ CheckBox/icons/radio_unchecked_disabled = ExtResource("6_r011l")
 CheckBox/icons/unchecked = ExtResource("1_75mhk")
 CheckBox/icons/unchecked_disabled = ExtResource("4_c32on")
 CheckBox/styles/focus = SubResource("StyleBoxEmpty_75mhk")
+ColorPicker/icons/screen_picker = ExtResource("11_88j74")
 LineEdit/colors/caret_color = Color(0, 0, 0, 1)
 LineEdit/colors/font_color = Color(0, 0, 0, 1)
 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
+PopupMenu/colors/font_color = Color(1, 1, 1, 1)
+PopupMenu/colors/font_hover_color = Color(0.817522, 0.817521, 0.817521, 1)
+PopupMenu/constants/icon_max_width = 24
+PopupMenu/icons/checked = ExtResource("10_luhv8")
+PopupMenu/icons/checked_disabled = ExtResource("11_i42bf")
+PopupMenu/icons/radio_checked = ExtResource("12_4akvr")
+PopupMenu/icons/radio_checked_disabled = ExtResource("13_1vd2l")
+PopupMenu/icons/radio_unchecked = ExtResource("14_0v877")
+PopupMenu/icons/radio_unchecked_disabled = ExtResource("15_2awy5")
+PopupMenu/icons/unchecked = ExtResource("16_1vd2l")
+PopupMenu/icons/unchecked_disabled = ExtResource("12_0an8v")
+PopupMenu/styles/hover = SubResource("StyleBoxFlat_luhv8")
+PopupMenu/styles/panel = SubResource("StyleBoxFlat_ya683")
+PopupPanel/styles/panel = SubResource("StyleBoxFlat_06us3")
 RichTextLabel/colors/font_selected_color = Color(1, 1, 1, 1)
 RichTextLabel/colors/selection_color = Color(0.313726, 0.403922, 0.8, 1)
 RichTextLabel/fonts/bold_font = SubResource("SystemFont_jecr6")
@@ -102,3 +183,6 @@ RichTextLabel/fonts/italics_font = SubResource("SystemFont_3k2jb")
 RichTextLabel/fonts/mono_font = SubResource("SystemFont_u0shw")
 RichTextLabel/fonts/normal_font = SubResource("SystemFont_g4dwp")
 RichTextLabel/styles/focus = SubResource("StyleBoxEmpty_jecr6")
+TabContainer/styles/tab_hovered = SubResource("StyleBoxFlat_1vd2l")
+TabContainer/styles/tab_selected = SubResource("StyleBoxFlat_4akvr")
+TabContainer/styles/tab_unselected = SubResource("StyleBoxFlat_r011l")
--- a/Scenes/Tags/input.tscn
+++ b/Scenes/Tags/input.tscn
@@ -2,15 +2,18 @@

 [ext_resource type="Script" uid="uid://kv6ebscarj2e" path="res://Scripts/Tags/input.gd" id="1_input"]
 [ext_resource type="Theme" uid="uid://bn6rbmdy60lhr" path="res://Scenes/Styles/BrowserText.tres" id="2_theme"]
-[ext_resource type="ButtonGroup" uid="uid://dgvdef1uht5ht" path="res://Scenes/Tags/new_button_group.tres" id="3_a88g6"]
+
+[sub_resource type="ButtonGroup" id="ButtonGroup_06us3"]

 [node name="Input" type="Control"]
 layout_mode = 3
 anchors_preset = 15
 anchor_right = 1.0
 anchor_bottom = 1.0
-offset_right = 400.0
-offset_bottom = 31.0
+offset_left = -102.0
+offset_top = -24.0
+offset_right = -1893.0
+offset_bottom = -1020.0
 grow_horizontal = 2
 grow_vertical = 2
 size_flags_horizontal = 3
@@ -32,7 +35,6 @@ layout_mode = 0
 offset_right = 31.0
 offset_bottom = 31.0
 theme = ExtResource("2_theme")
-theme_override_constants/icon_max_width = 24
 flat = true

 [node name="RadioButton" type="CheckBox" parent="."]
@@ -42,5 +44,13 @@ offset_right = 31.0
 offset_bottom = 31.0
 theme = ExtResource("2_theme")
 theme_override_constants/icon_max_width = 24
-button_group = ExtResource("3_a88g6")
+button_group = SubResource("ButtonGroup_06us3")
 flat = true
+
+[node name="ColorPickerButton" type="ColorPickerButton" parent="."]
+layout_mode = 0
+offset_right = 83.0
+offset_bottom = 35.0
+toggle_mode = false
+
+[connection signal="popup_closed" from="ColorPickerButton" to="." method="_on_color_picker_popup_closed"]
--- a/Scenes/Tags/input.tscn8601746517.tmp
+++ b/Scenes/Tags/input.tscn8601746517.tmp
@@ -1,45 +0,0 @@
-[gd_scene load_steps=4 format=3 uid="uid://c7yay102a3b4c"]
-
-[ext_resource type="Script" uid="uid://kv6ebscarj2e" path="res://Scripts/Tags/input.gd" id="1_input"]
-[ext_resource type="Theme" uid="uid://bn6rbmdy60lhr" path="res://Scenes/Styles/BrowserText.tres" id="2_theme"]
-[ext_resource type="ButtonGroup" uid="uid://dgvdef1uht5ht" path="res://Scenes/Tags/new_button_group.tres" id="3_a88g6"]
-
-[node name="Input" type="Control"]
-layout_mode = 3
-anchors_preset = 15
-anchor_right = 1.0
-anchor_bottom = 1.0
-offset_right = 400.0
-offset_bottom = 31.0
-grow_horizontal = 2
-grow_vertical = 2
-size_flags_horizontal = 3
-size_flags_vertical = 0
-script = ExtResource("1_input")
-
-[node name="LineEdit" type="LineEdit" parent="."]
-visible = false
-layout_mode = 1
-offset_right = 400.0
-offset_bottom = 35.0
-theme = ExtResource("2_theme")
-placeholder_text = "Enter text..."
-caret_blink = true
-
-[node name="CheckBox" type="CheckBox" parent="."]
-visible = false
-layout_mode = 0
-offset_right = 31.0
-offset_bottom = 31.0
-theme = ExtResource("2_theme")
-theme_override_constants/icon_max_width = 24
-flat = true
-
-[node name="RadioButton" type="CheckBox" parent="."]
-layout_mode = 0
-offset_right = 31.0
-offset_bottom = 31.0
-theme = ExtResource("2_theme")
-theme_override_constants/icon_max_width = 24
-button_group = ExtResource("3_a88g6")
-flat = true
--- a/Scenes/Tags/new_button_group.tres
+++ b/Scenes/Tags/new_button_group.tres
@@ -1,3 +0,0 @@
-[gd_resource type="ButtonGroup" format=3 uid="uid://dgvdef1uht5ht"]
-
-[resource]
--- a/Scripts/B9/HTMLParser.gd
+++ b/Scripts/B9/HTMLParser.gd
@@ -79,7 +79,7 @@ class HTMLElement:
 		return result
 	
 	func is_inline_element() -> bool:
-		return tag_name in ["b", "i", "u", "small", "mark", "code", "span", "a"]
+		return tag_name in ["b", "i", "u", "small", "mark", "code", "span", "a", "input"]

 class ParseResult:
 	var root: HTMLElement
--- a/Scripts/Tags/input.gd
+++ b/Scripts/Tags/input.gd
@@ -1,11 +1,51 @@
 extends Control
 static var button_groups: Dictionary = {}

+const BROWSER_TEXT: Theme = preload("res://Scenes/Styles/BrowserText.tres")
+
+var custom_hex_input: LineEdit
+
 func init(element: HTMLParser.HTMLElement) -> void:
 	var line_edit: LineEdit = $LineEdit
 	var check_box: CheckBox = $CheckBox
 	var radio_button: CheckBox = $RadioButton
+	var color_picker_button: ColorPickerButton = $ColorPickerButton
+	var picker: ColorPicker = color_picker_button.get_picker()
+
+	picker.sliders_visible = false
+	picker.presets_visible = false
+	picker.color_modes_visible = false
+	picker.hex_visible = false
+
+	# Create custom hex input
+	custom_hex_input = LineEdit.new()
+	custom_hex_input.placeholder_text = "#RRGGBB"
 	
+	# Apply custom unique theme
+	var picker_theme = BROWSER_TEXT.duplicate()
+	picker_theme.set_color("font_color", "LineEdit", Color.WHITE)
+	picker_theme.set_color("font_placeholder_color", "LineEdit", Color(1, 1, 1, 0.6))
+	picker_theme.set_color("caret_color", "LineEdit", Color.WHITE)
+
+	var normal_style = picker_theme.get_stylebox("normal", "LineEdit").duplicate()
+	var focus_style = picker_theme.get_stylebox("focus", "LineEdit").duplicate()
+	normal_style.border_color = Color.WHITE
+	focus_style.border_color = Color.WHITE
+	picker_theme.set_stylebox("normal", "LineEdit", normal_style)
+	picker_theme.set_stylebox("focus", "LineEdit", focus_style)
+
+	custom_hex_input.theme = picker_theme
+	picker.add_child(custom_hex_input)
+
+	# Connect signals for two-way binding of Hex
+	picker.color_changed.connect(_on_picker_color_changed)
+	custom_hex_input.text_submitted.connect(_on_custom_hex_submitted)
+	# Set initial hex value
+	_on_picker_color_changed(picker.color)
+
+	picker.theme = picker_theme
+	color_picker_button.get_popup().theme = picker_theme
+
 	var input_type = element.get_attribute("type").to_lower()
 	var placeholder = element.get_attribute("placeholder")
 	var value = element.get_attribute("value")
@@ -13,73 +53,89 @@ func init(element: HTMLParser.HTMLElement) -> void:
 	var minlength = element.get_attribute("minlength")
 	var maxlength = element.get_attribute("maxlength")
 	var pattern = element.get_attribute("pattern")
-	
-	# Hide all inputs initially
-	line_edit.visible = false
-	check_box.visible = false
-	radio_button.visible = false
-	
-	match input_type:
-		"checkbox":
-			check_box.visible = true
-			if value and value == "true": check_box.button_pressed = true
-			custom_minimum_size = check_box.size
-		"radio":
-			radio_button.visible = true
-			radio_button.toggle_mode = true
-			if value and value == "true": radio_button.button_pressed = true
-			custom_minimum_size = radio_button.size
-			
-			if group.length() > 0:
-				if not button_groups.has(group):
-					button_groups[group] = ButtonGroup.new()
-				radio_button.button_group = button_groups[group]
-		"password":
-			line_edit.visible = true
-			line_edit.secret = true
-			custom_minimum_size = line_edit.size
-			setup_text_input(line_edit, placeholder, value, minlength, maxlength, pattern)
-		_: # Default to text input
-			line_edit.visible = true
-			line_edit.secret = false
-			custom_minimum_size = line_edit.size
-			setup_text_input(line_edit, placeholder, value, minlength, maxlength, pattern)
+
+	if input_type == "checkbox":
+		if is_instance_valid(line_edit): line_edit.queue_free()
+		if is_instance_valid(radio_button): radio_button.queue_free()
+		if is_instance_valid(color_picker_button): color_picker_button.queue_free()
+		check_box.visible = true
+		if value and value == "true": check_box.button_pressed = true
+		custom_minimum_size = check_box.size
+
+	elif input_type == "radio":
+		if is_instance_valid(line_edit): line_edit.queue_free()
+		if is_instance_valid(check_box): check_box.queue_free()
+		if is_instance_valid(color_picker_button): color_picker_button.queue_free()
+		radio_button.visible = true
+		radio_button.toggle_mode = true
+		if value and value == "true": radio_button.button_pressed = true
+		custom_minimum_size = radio_button.size
+
+		if group.length() > 0:
+			if not button_groups.has(group):
+				button_groups[group] = ButtonGroup.new()
+			radio_button.button_group = button_groups[group]
+
+	elif input_type == "color":
+		if is_instance_valid(line_edit): line_edit.queue_free()
+		if is_instance_valid(check_box): check_box.queue_free()
+		if is_instance_valid(radio_button): radio_button.queue_free()
+		color_picker_button.visible = true
+		if value and value.length() > 0:
+			var color = Color.from_string(value, Color.WHITE)
+			color_picker_button.color = color
+		custom_minimum_size = color_picker_button.size
+
+	elif input_type == "password":
+		if is_instance_valid(check_box): check_box.queue_free()
+		if is_instance_valid(radio_button): radio_button.queue_free()
+		if is_instance_valid(color_picker_button): color_picker_button.queue_free()
+		line_edit.visible = true
+		line_edit.secret = true
+		custom_minimum_size = line_edit.size
+		setup_text_input(line_edit, placeholder, value, minlength, maxlength, pattern)
+
+	else:
+		if is_instance_valid(check_box): check_box.queue_free()
+		if is_instance_valid(radio_button): radio_button.queue_free()
+		if is_instance_valid(color_picker_button): color_picker_button.queue_free()
+		line_edit.visible = true
+		line_edit.secret = false
+		custom_minimum_size = line_edit.size
+		setup_text_input(line_edit, placeholder, value, minlength, maxlength, pattern)

 func setup_text_input(line_edit: LineEdit, placeholder: String, value: String, minlength: String, maxlength: String, pattern: String) -> void:
 	if placeholder: line_edit.placeholder_text = placeholder
 	if value: line_edit.text = value
-	
+
 	line_edit.max_length = maxlength.to_int()
-	
+
 	if minlength.length() > 0 or pattern.length() > 0:
 		line_edit.text_changed.connect(_on_text_changed.bind(minlength, pattern))

 func _on_text_changed(new_text: String, minlength: String, pattern: String) -> void:
 	var line_edit = get_node("LineEdit") as LineEdit
 	var is_valid = true
-	
-	# Check minimum length
+
 	if minlength.length() > 0 and minlength.is_valid_int():
 		var min_len = minlength.to_int()
 		if new_text.length() < min_len and new_text.length() > 0:
 			is_valid = false
-	
-	# Check pattern (regex)
+
 	if pattern.length() > 0 and new_text.length() > 0:
 		var regex = RegEx.new()
 		if regex.compile(pattern) == OK:
 			if not regex.search(new_text):
 				is_valid = false
-	
+
 	if is_valid:
-		# Reset to default styles
 		line_edit.remove_theme_stylebox_override("normal")
 		line_edit.remove_theme_stylebox_override("focus")
 		line_edit.modulate = Color.WHITE
 	else:
 		var normal_style = create_red_border_style_from_theme(line_edit, "normal")
 		var focus_style = create_red_border_style_from_theme(line_edit, "focus")
-		
+
 		line_edit.add_theme_stylebox_override("normal", normal_style)
 		line_edit.add_theme_stylebox_override("focus", focus_style)
 		line_edit.modulate = Color.WHITE
@@ -87,7 +143,20 @@ func _on_text_changed(new_text: String, minlength: String, pattern: String) -> v
 func create_red_border_style_from_theme(line_edit: LineEdit, style_name: String) -> StyleBoxFlat:
 	var original_style: StyleBoxFlat = line_edit.get_theme_stylebox(style_name)
 	var style: StyleBoxFlat = original_style.duplicate()
-	
 	style.border_color = Color.RED
-	
 	return style
+
+func _on_picker_color_changed(new_color: Color) -> void:
+	var hex_string = "#" + new_color.to_html(false)
+	custom_hex_input.text = hex_string
+
+func _on_custom_hex_submitted(new_text: String) -> void:
+	var cleaned_text = new_text.strip_edges()
+	if not cleaned_text.begins_with("#"):
+		cleaned_text = "#" + cleaned_text
+	
+	var new_color = Color.from_string(cleaned_text, Color.WHITE)
+	
+	var picker = ($ColorPickerButton as ColorPickerButton).get_picker()
+	picker.set_pick_color(new_color)
+	$ColorPickerButton.color = new_color
--- a/Scripts/main.gd
+++ b/Scripts/main.gd
@@ -91,7 +91,10 @@ line breaks
  <span>Berry</span>
  <input type=\"radio\" group=\"food\" />
  <span>Gary</span>
-  
+
+  <h2>Color</h2>
+  <input type=\"color\" value=\"#ff0000\" />
+
  <input type=\"password\" placeholder=\"your password...\" />
  <button type=\"submit\">Submit</button>
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-pipette-icon lucide-pipette"><path d="m12 9-8.414 8.414A2 2 0 0 0 3 18.828v1.344a2 2 0 0 1-.586 1.414A2 2 0 0 1 3.828 21h1.344a2 2 0 0 0 1.414-.586L15 12"/><path d="m18 9 .4.4a1 1 0 1 1-3 3l-3.8-3.8a1 1 0 1 1 3-3l.4.4 3.4-3.4a1 1 0 1 1 3 3z"/><path d="m2 22 .414-.414"/></svg>`