From 31d6051568a252ce608a202bc4ed95fdf44c7795 Mon Sep 17 00:00:00 2001
From: NoryiE <NoryiE@users.noreply.github.com>
Date: Thu, 30 Oct 2025 08:42:59 +0000
Subject: [PATCH] deploy: 7649c97c71cd6aafd13a8ed3a186a7015ea1d7ae

---
 docs/references/elements/ScrollFrame.md |  81 +++++++++-
 docs/references/elements/TabControl.md  | 190 ++++++++++++------------
 2 files changed, 178 insertions(+), 93 deletions(-)

diff --git a/docs/references/elements/ScrollFrame.md b/docs/references/elements/ScrollFrame.md
index bf54fb4..7ed65fb 100644
--- a/docs/references/elements/ScrollFrame.md
+++ b/docs/references/elements/ScrollFrame.md
@@ -3,12 +3,91 @@ _A container that provides automatic scrolling capabilities with visual scrollba
 
 Extends: `Container`
 
+## Examples (Executable)
+```lua run
+local basalt = require("basalt")
+
+local main = basalt.getMainFrame()
+
+-- Create a ScrollFrame with content larger than the frame
+local scrollFrame = main:addScrollFrame({
+x = 2,
+y = 2,
+width = 30,
+height = 12,
+background = colors.lightGray
+})
+
+-- Add a title
+scrollFrame:addLabel({
+x = 2,
+y = 1,
+text = "ScrollFrame Example",
+foreground = colors.yellow
+})
+
+-- Add multiple labels that exceed the frame height
+for i = 1, 20 do
+scrollFrame:addLabel({
+x = 2,
+y = i + 2,
+text = "Line " .. i .. " - Scroll to see more",
+foreground = i % 2 == 0 and colors.white or colors.lightGray
+})
+end
+
+-- Add some interactive buttons at different positions
+scrollFrame:addButton({
+x = 2,
+y = 24,
+width = 15,
+height = 3,
+text = "Button 1",
+background = colors.blue
+})
+:onClick(function()
+scrollFrame:addLabel({
+x = 18,
+y = 24,
+text = "Clicked!",
+foreground = colors.lime
+})
+end)
+
+scrollFrame:addButton({
+x = 2,
+y = 28,
+width = 15,
+height = 3,
+text = "Button 2",
+background = colors.green
+})
+:onClick(function()
+scrollFrame:addLabel({
+x = 18,
+y = 28,
+text = "Nice!",
+foreground = colors.orange
+})
+end)
+
+-- Info label outside the scroll frame
+main:addLabel({
+x = 2,
+y = 15,
+text = "Use mouse wheel to scroll!",
+foreground = colors.gray
+})
+
+basalt.run()
+```
+
 ## Properties
 
 |Property|Type|Default|Description|
 |---|---|---|---|
 |showScrollBar|boolean|true|Whether to show scrollbars|
-|scrollBarSymbol|string|"|" The symbol used for the scrollbar handle|
+|scrollBarSymbol|string|"_"|The symbol used for the scrollbar handle|
 |scrollBarBackground|string|"\127"|The symbol used for the scrollbar background|
 |scrollBarColor|color|lightGray|Color of the scrollbar handle|
 |scrollBarBackgroundColor|color|gray|Background color of the scrollbar|
diff --git a/docs/references/elements/TabControl.md b/docs/references/elements/TabControl.md
index b5651c0..1e98a17 100644
--- a/docs/references/elements/TabControl.md
+++ b/docs/references/elements/TabControl.md
@@ -1,99 +1,105 @@
 # TabControl
-_local main = basalt.getMainFrame()_
-
-_-- Create a simple TabControl_
-_local tabControl = main:addTabControl({_
-_x = 2,_
-_y = 2,_
-_width = 46,_
-_height = 15,_
-_})_
-
-_-- Tab 1: Home_
-_local homeTab = tabControl:newTab("Home")_
-
-_homeTab:addLabel({_
-_x = 2,_
-_y = 2,_
-_text = "Welcome!",_
-_foreground = colors.yellow_
-_})_
-
-_homeTab:addLabel({_
-_x = 2,_
-_y = 4,_
-_text = "This is a TabControl",_
-_foreground = colors.white_
-_})_
-
-_homeTab:addLabel({_
-_x = 2,_
-_y = 5,_
-_text = "example with tabs.",_
-_foreground = colors.white_
-_})_
-
-_-- Tab 2: Counter_
-_local counterTab = tabControl:newTab("Counter")_
-
-_local counterLabel = counterTab:addLabel({_
-_x = 2,_
-_y = 2,_
-_text = "Count: 0",_
-_foreground = colors.lime_
-_})_
-
-_local count = 0_
-_counterTab:addButton({_
-_x = 2,_
-_y = 4,_
-_width = 12,_
-_height = 3,_
-_text = "Click Me",_
-_background = colors.blue_
-_})_
-_:setBackgroundState("clicked", colors.lightBlue)_
-_:onClick(function()_
-_count = count + 1_
-_counterLabel:setText("Count: " .. count)_
-_end)_
-
-_-- Tab 3: Info_
-_local infoTab = tabControl:newTab("Info")_
-
-_infoTab:addLabel({_
-_x = 2,_
-_y = 2,_
-_text = "TabControl Features:",_
-_foreground = colors.orange_
-_})_
-
-_infoTab:addLabel({_
-_x = 2,_
-_y = 4,_
-_text = "- Horizontal tabs",_
-_foreground = colors.gray_
-_})_
-
-_infoTab:addLabel({_
-_x = 2,_
-_y = 5,_
-_text = "- Easy navigation",_
-_foreground = colors.gray_
-_})_
-
-_infoTab:addLabel({_
-_x = 2,_
-_y = 6,_
-_text = "- Content per tab",_
-_foreground = colors.gray_
-_})_
-
-_basalt.run()_
-_]]_
+_The TabControl is a container that provides tabbed interface functionality_
 
 Extends: `Container`
 
+## Examples (Executable)
+```lua run
+local basalt = require("basalt")
+
+local main = basalt.getMainFrame()
+
+-- Create a simple TabControl
+local tabControl = main:addTabControl({
+x = 2,
+y = 2,
+width = 46,
+height = 15,
+})
+
+-- Tab 1: Home
+local homeTab = tabControl:newTab("Home")
+
+homeTab:addLabel({
+x = 2,
+y = 2,
+text = "Welcome!",
+foreground = colors.yellow
+})
+
+homeTab:addLabel({
+x = 2,
+y = 4,
+text = "This is a TabControl",
+foreground = colors.white
+})
+
+homeTab:addLabel({
+x = 2,
+y = 5,
+text = "example with tabs.",
+foreground = colors.white
+})
+
+-- Tab 2: Counter
+local counterTab = tabControl:newTab("Counter")
+
+local counterLabel = counterTab:addLabel({
+x = 2,
+y = 2,
+text = "Count: 0",
+foreground = colors.lime
+})
+
+local count = 0
+counterTab:addButton({
+x = 2,
+y = 4,
+width = 12,
+height = 3,
+text = "Click Me",
+background = colors.blue
+})
+:setBackgroundState("clicked", colors.lightBlue)
+:onClick(function()
+count = count + 1
+counterLabel:setText("Count: " .. count)
+end)
+
+-- Tab 3: Info
+local infoTab = tabControl:newTab("Info")
+
+infoTab:addLabel({
+x = 2,
+y = 2,
+text = "TabControl Features:",
+foreground = colors.orange
+})
+
+infoTab:addLabel({
+x = 2,
+y = 4,
+text = "- Horizontal tabs",
+foreground = colors.gray
+})
+
+infoTab:addLabel({
+x = 2,
+y = 5,
+text = "- Easy navigation",
+foreground = colors.gray
+})
+
+infoTab:addLabel({
+x = 2,
+y = 6,
+text = "- Content per tab",
+foreground = colors.gray
+})
+
+basalt.run()
+```
+
 ## Properties
 
 |Property|Type|Default|Description|