From 80bbf9f391479bb045cab5348f06e1b9f0ef9d6e Mon Sep 17 00:00:00 2001
From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com>
Date: Mon, 11 May 2026 10:46:52 +0900
Subject: [PATCH 01/36] link widget to widget3

---
 lua/wikis/commons/Widget/Basic/Link.lua | 56 +++++++++++--------------
 1 file changed, 24 insertions(+), 32 deletions(-)

diff --git a/lua/wikis/commons/Widget/Basic/Link.lua b/lua/wikis/commons/Widget/Basic/Link.lua
index a65ab99e377..d9c0c778440 100644
--- a/lua/wikis/commons/Widget/Basic/Link.lua
+++ b/lua/wikis/commons/Widget/Basic/Link.lua
@@ -7,51 +7,43 @@
 
 local Lua = require('Module:Lua')
 
-local Class = Lua.import('Module:Class')
-
-local HtmlWidgets = Lua.import('Module:Widget/Html/All')
-local Fragment = HtmlWidgets.Fragment
-local Widget = Lua.import('Module:Widget')
+local Component = Lua.import('Module:Widget/Component')
 local WidgetUtil = Lua.import('Module:Widget/Util')
 
 ---@class LinkWidgetParameters
 ---@field children Renderable|Renderable[]
 ---@field link string
----@field linktype 'internal'|'external'|nil
+---@field linktype? 'internal'|'external'
 
----@class LinkWidget: Widget
----@operator call(LinkWidgetParameters): LinkWidget
-local Link = Class.new(Widget)
+---@class LinkWidget
+local Link = {}
 Link.defaultProps = {
 	linktype = 'internal',
 }
 
----@return Widget?
-function Link:render()
-	if not self.props.link then
+---@param props LinkWidgetParameters
+---@return Renderable[]?
+function Link.render(props)
+	if not props.link then
 		return
 	end
-	if self.props.linktype == 'external' then
-		return Fragment{
-			children = WidgetUtil.collect(
-				'[',
-				(self.props.link:gsub(' ', '%%20')),
-				' ',
-				unpack(self.props.children),
-				']'
-			)
-		}
+	if props.linktype == 'external' then
+		return WidgetUtil.collect(
+			'[',
+			(props.link:gsub(' ', '%%20')),
+			' ',
+			props.children,
+			']'
+		)
 	end
 
-	return Fragment{
-		children = WidgetUtil.collect(
-			'[[',
-			self.props.link,
-			'|',
-			unpack(self.props.children) or self.props.link,
-			']]'
-		)
-	}
+	return WidgetUtil.collect(
+		'[[',
+		props.link,
+		'|',
+		props.children or props.link,
+		']]'
+	)
 end
 
-return Link
+return Component.component(Link.render, Link.defaultProps)

From d287fe09f597b1457b555ba56f3e1b31fdb3e198 Mon Sep 17 00:00:00 2001
From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com>
Date: Mon, 11 May 2026 10:50:26 +0900
Subject: [PATCH 02/36] extract HtmlProps type

---
 lua/wikis/commons/Widget/Component.lua | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/lua/wikis/commons/Widget/Component.lua b/lua/wikis/commons/Widget/Component.lua
index eb2a702a01e..7c6bfa10e04 100644
--- a/lua/wikis/commons/Widget/Component.lua
+++ b/lua/wikis/commons/Widget/Component.lua
@@ -9,22 +9,27 @@
 
 ---@alias ContextDef<T> {defaultValue: T}
 ---@alias ContextParam<T> {def: ContextDef<T>, value: T, children?: Renderable|Renderable[]}
----@alias HtmlParam {classes?: string[], css?: table, attributes?: table, children?: Renderable|Renderable[]}
 ---@alias ErrorParam {children?: Renderable|Renderable[], fallback?: fun(error: Error, context: Context?): Renderable}
 
 ---@class VNode<P>
 ---@field renderFn string|fun(props: P, context?: Context?): Renderable
 ---@field props P
 
+---@class HtmlProps
+---@field classes? string[]
+---@field css? table<string, string|number>
+---@field attributes? table
+---@field children? Renderable|Renderable[]
+
 ---@alias Context<T> {props:{parent: Context?, def: ContextDef<T>, value: T}}
 
 ---@alias ContextNode<T> VNode<ContextParam<T>>
----@alias HtmlNode VNode<HtmlParam>
+---@alias HtmlNode VNode<HtmlProps>
 ---@alias ErrorBoundaryNode VNode<ErrorParam>
 
 ---@alias Component<P> fun(props?: P, context: Context?): VNode<P>
 ---@alias ContextComponent<T> Component<ContextParam<T>>
----@alias HtmlComponent Component<HtmlParam>
+---@alias HtmlComponent Component<HtmlProps>
 ---@alias ErrorBoundaryComponent Component<ErrorParam>
 
 local Lua = require('Module:Lua')

From 75364b5a0730502d6af3588497f318aeb0363446 Mon Sep 17 00:00:00 2001
From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com>
Date: Mon, 11 May 2026 10:52:52 +0900
Subject: [PATCH 03/36] copytoclipboard widget to widget3

---
 .../commons/Widget/Basic/CopyToClipboard.lua  | 25 +++++++------------
 1 file changed, 9 insertions(+), 16 deletions(-)

diff --git a/lua/wikis/commons/Widget/Basic/CopyToClipboard.lua b/lua/wikis/commons/Widget/Basic/CopyToClipboard.lua
index e07d8c16e84..78196823694 100644
--- a/lua/wikis/commons/Widget/Basic/CopyToClipboard.lua
+++ b/lua/wikis/commons/Widget/Basic/CopyToClipboard.lua
@@ -7,39 +7,32 @@
 
 local Lua = require('Module:Lua')
 
-local Class = Lua.import('Module:Class')
-
-local Widget = Lua.import('Module:Widget')
-local HtmlWidgets = Lua.import('Module:Widget/Html/All')
-local Span = HtmlWidgets.Span
+local Component = Lua.import('Module:Widget/Component')
+local Html = Lua.import('Module:Widget/Html')
+local Span = Html.Span
 
 ---@class CopyToClipboardProps
 ---@field children Renderable|Renderable[]?
 ---@field textToCopy string? text to be copied to clipboard
 ---@field successText string?
 
----@class CopyToClipboardWidget: Widget
----@operator call(CopyToClipboardProps): CopyToClipboardWidget
----@field props CopyToClipboardProps
-local CopyToClipboard = Class.new(Widget)
-
----@return Widget
-function CopyToClipboard:render()
-	local props = self.props
+---@param props CopyToClipboardProps
+---@return HtmlNode
+local function CopyToClipboard(props)
 	return Span{
 		classes = {'copy-to-clipboard'},
 		attributes = {['data-copied-text'] = props.successText},
 		children = {
 			Span{
 				classes = {'copy-this'},
-				children = self.props.textToCopy,
+				children = props.textToCopy,
 			},
 			Span{
 				classes = {'see-this'},
-				children = self.props.children,
+				children = props.children,
 			}
 		}
 	}
 end
 
-return CopyToClipboard
+return Component.component(CopyToClipboard)

From 34a560db90b85cdaaa4b4e4d8dee396741ba7f04 Mon Sep 17 00:00:00 2001
From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com>
Date: Mon, 11 May 2026 10:56:29 +0900
Subject: [PATCH 04/36] button to widget3

---
 lua/wikis/commons/Widget/Basic/Button.lua | 63 +++++++++++------------
 1 file changed, 31 insertions(+), 32 deletions(-)

diff --git a/lua/wikis/commons/Widget/Basic/Button.lua b/lua/wikis/commons/Widget/Basic/Button.lua
index e12a02018ec..d6a4f76d74c 100644
--- a/lua/wikis/commons/Widget/Basic/Button.lua
+++ b/lua/wikis/commons/Widget/Basic/Button.lua
@@ -8,16 +8,15 @@
 local Lua = require('Module:Lua')
 
 local Array = Lua.import('Module:Array')
-local Class = Lua.import('Module:Class')
 local Logic = Lua.import('Module:Logic')
 local Table = Lua.import('Module:Table')
 
-local Widget = Lua.import('Module:Widget')
-local HtmlWidgets = Lua.import('Module:Widget/Html/All')
+local Component = Lua.import('Module:Widget/Component')
+local Html = Lua.import('Module:Widget/Html')
 local Link = Lua.import('Module:Widget/Basic/Link')
-local Div = HtmlWidgets.Div
+local Div = Html.Div
 
----@class ButtonWidgetParameters
+---@class ButtonWidgetParameters: HtmlProps
 ---@field title string?
 ---@field link string?
 ---@field linktype 'internal'|'external'|nil
@@ -26,9 +25,8 @@ local Div = HtmlWidgets.Div
 ---@field grow boolean?
 ---@field aligncontent 'left'|'right'|nil
 
----@class ButtonWidget: Widget
----@operator call(ButtonWidgetParameters): ButtonWidget
-local Button = Class.new(Widget)
+---@class ButtonWidget
+local Button = {}
 Button.defaultProps = {
 	linktype = 'internal',
 	variant = 'primary',
@@ -37,68 +35,69 @@ Button.defaultProps = {
 	aligncontent = nil,
 }
 
----@return Widget
-function Button:render()
+---@param props ButtonWidgetParameters
+---@return HtmlNode
+function Button.render(props)
 	--- MW Parser does not allowed the <button> tag, so we use a <div>
 	local cssClasses = {'btn'}
-	if self.props.variant == 'primary' then
+	if props.variant == 'primary' then
 		table.insert(cssClasses, 'btn-primary')
-	elseif self.props.variant == 'secondary' then
+	elseif props.variant == 'secondary' then
 		table.insert(cssClasses, 'btn-secondary')
-	elseif self.props.variant == 'themed' then
+	elseif props.variant == 'themed' then
 		table.insert(cssClasses, 'btn-themed')
-	elseif self.props.variant == 'ghost' then
+	elseif props.variant == 'ghost' then
 		table.insert(cssClasses, 'btn-ghost')
-	elseif self.props.variant == 'destructive' then
+	elseif props.variant == 'destructive' then
 		table.insert(cssClasses, 'btn-destructive')
 	end
 
-	if self.props.size == 'xs' then
+	if props.size == 'xs' then
 		table.insert(cssClasses, 'btn-extrasmall')
-	elseif self.props.size == 'sm' then
+	elseif props.size == 'sm' then
 		table.insert(cssClasses, 'btn-small')
-	elseif self.props.size == 'lg' then
+	elseif props.size == 'lg' then
 		table.insert(cssClasses, 'btn-large')
 	end
 
 	local cssTable = {}
-	if self.props.grow then
+	if props.grow then
 		cssTable.width = '100%'
 	end
-	if self.props.aligncontent == 'left' then
+	if props.aligncontent == 'left' then
 		cssTable['justify-content'] = 'left'
-	elseif self.props.aligncontent == 'right' then
+	elseif props.aligncontent == 'right' then
 		cssTable['justify-content'] = 'right'
 	end
 
 	local button = Div{
 		css = Logic.nilIfEmpty(cssTable),
-		classes = Array.extend(cssClasses, self.props.classes or {}),
+		classes = Array.extend(cssClasses, props.classes or {}),
 		attributes = Table.merge({
-			title = self.props.title,
-			['aria-label'] = self.props.title,
+			title = props.title,
+			['aria-label'] = props.title,
 			role = 'button',
 			tabindex = '0',
-		}, self.props.attributes or {}),
-		children = self.props.children,
+		}, props.attributes or {}),
+		children = props.children,
 	}
 
-	if not self.props.link then
+	if not props.link then
 		return button
 	end
 
 	-- Have to wrap it in an extra div to prevent the mediawiki parser from messing it up
 	return Div{
-		css = self.props.grow and {flex = '1'} or nil,
-		classes = self.props.classes or {},
+		css = props.grow and {flex = '1'} or nil,
+		classes = props.classes or {},
 		children = {
 			Link{
-				link = self.props.link,
-				linktype = self.props.linktype,
+				link = props.link,
+				linktype = props.linktype,
 				children = {button},
 			}
 		}
 	}
 end
 
-return Button
+return Component.component(Button.render, Button.defaultProps)

From 3de7e058cfbbe2e8e80dc0427c4eeeb5fb82f085 Mon Sep 17 00:00:00 2001
From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com>
Date: Mon, 11 May 2026 10:57:54 +0900
Subject: [PATCH 05/36] dialog to widget3

---
 lua/wikis/commons/Widget/Basic/Dialog.lua | 20 +++++++-------------
 1 file changed, 7 insertions(+), 13 deletions(-)

diff --git a/lua/wikis/commons/Widget/Basic/Dialog.lua b/lua/wikis/commons/Widget/Basic/Dialog.lua
index 6266f0245db..ce7e16ed081 100644
--- a/lua/wikis/commons/Widget/Basic/Dialog.lua
+++ b/lua/wikis/commons/Widget/Basic/Dialog.lua
@@ -8,12 +8,11 @@
 local Lua = require('Module:Lua')
 
 local Array = Lua.import('Module:Array')
-local Class = Lua.import('Module:Class')
 local Logic = Lua.import('Module:Logic')
 
-local Widget = Lua.import('Module:Widget')
-local HtmlWidgets = Lua.import('Module:Widget/Html/All')
-local Div = HtmlWidgets.Div
+local Component = Lua.import('Module:Widget/Component')
+local Html = Lua.import('Module:Widget/Html')
+local Div = Html.Div
 
 ---@class DialogWidgetProps
 ---@field dialogClasses? string[]
@@ -21,14 +20,9 @@ local Div = HtmlWidgets.Div
 ---@field trigger? Renderable|Renderable[]
 ---@field children? Renderable|Renderable[]
 
----@class DialogWidget: Widget
----@operator call(DialogWidgetProps): DialogWidget
----@field props DialogWidgetProps
-local DialogWidget = Class.new(Widget)
-
----@return Widget?
-function DialogWidget:render()
-	local props = self.props
+---@param props DialogWidgetProps
+---@return HtmlNode?
+local function DialogWidget(props)
 	if Logic.isEmpty(props.title) or Logic.isEmpty(props.trigger) or Logic.isEmpty(props.children) then
 		return
 	end
@@ -57,4 +51,4 @@ function DialogWidget:render()
 	}
 end
 
-return DialogWidget
+return Component.component(DialogWidget)

From 4fe5fe4d26808895c254e479328d555680afa859 Mon Sep 17 00:00:00 2001
From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com>
Date: Mon, 11 May 2026 11:04:35 +0900
Subject: [PATCH 06/36] label to widget3

---
 lua/wikis/commons/Widget/Basic/Label.lua      | 26 ++++++-------------
 .../commons/Widget/Match/Page/SeriesDots.lua  |  2 +-
 .../Match/Summary/GameWinLossIndicator.lua    |  2 +-
 .../Widget/Match/Summary/VetoLabel.lua        |  2 +-
 .../Widget/Standings/MatchOverview.lua        |  2 +-
 5 files changed, 12 insertions(+), 22 deletions(-)

diff --git a/lua/wikis/commons/Widget/Basic/Label.lua b/lua/wikis/commons/Widget/Basic/Label.lua
index ea8d72a072f..583747fd8d6 100644
--- a/lua/wikis/commons/Widget/Basic/Label.lua
+++ b/lua/wikis/commons/Widget/Basic/Label.lua
@@ -7,27 +7,17 @@
 
 local Lua = require('Module:Lua')
 
-local Class = Lua.import('Module:Class')
+local Component = Lua.import('Module:Widget/Component')
+local Html = Lua.import('Module:Widget/Html')
 
-local Widget = Lua.import('Module:Widget')
-local HtmlWidgets = Lua.import('Module:Widget/Html/All')
-
----@class GenericLabelProps
----@field attributes table<string, string>?
----@field css table<string, string|number>?
----@field children Renderable|Renderable[]
+---@class GenericLabelProps: HtmlProps
 ---@field labelScheme string?
 ---@field labelScale number?
 ---@field labelType string?
 
----@class GenericLabel: Widget
----@operator call(GenericLabelProps): GenericLabel
----@field props GenericLabelProps
-local GenericLabel = Class.new(Widget)
-
----@return Widget
-function GenericLabel:render()
-	local props = self.props
+---@param props GenericLabelProps
+---@return HtmlNode
+local function GenericLabel(props)
 	if props.labelScale then
 		props.css = props.css or {}
 		props.css['--label-scale'] = props.labelScale
@@ -37,7 +27,7 @@ function GenericLabel:render()
 		props.attributes['data-label-type'] = props.labelType
 	end
 
-	return HtmlWidgets.Div{
+	return Html.Div{
 		attributes = props.attributes,
 		classes = {
 			'generic-label',
@@ -48,4 +38,4 @@ function GenericLabel:render()
 	}
 end
 
-return GenericLabel
+return Component.component(GenericLabel)
diff --git a/lua/wikis/commons/Widget/Match/Page/SeriesDots.lua b/lua/wikis/commons/Widget/Match/Page/SeriesDots.lua
index a029c041786..e9ab306f54d 100644
--- a/lua/wikis/commons/Widget/Match/Page/SeriesDots.lua
+++ b/lua/wikis/commons/Widget/Match/Page/SeriesDots.lua
@@ -35,7 +35,7 @@ local MatchPageSeriesDots = Class.new(Widget)
 
 ---@private
 ---@param result string
----@return Widget
+---@return VNode
 MatchPageSeriesDots._makeGameResultIcon = FnUtil.memoize(function (result)
 	return Label{labelType = 'result-' .. RESULT_DISPLAY_TYPES[result:lower()]}
 end)
diff --git a/lua/wikis/commons/Widget/Match/Summary/GameWinLossIndicator.lua b/lua/wikis/commons/Widget/Match/Summary/GameWinLossIndicator.lua
index 9ea8a64b724..d72352ddccd 100644
--- a/lua/wikis/commons/Widget/Match/Summary/GameWinLossIndicator.lua
+++ b/lua/wikis/commons/Widget/Match/Summary/GameWinLossIndicator.lua
@@ -24,7 +24,7 @@ local LABELS = {
 ---@operator call(table): MatchSummaryGameWinLossIndicator
 local MatchSummaryGameWinLossIndicator = Class.new(Widget)
 
----@return Widget
+---@return VNode
 function MatchSummaryGameWinLossIndicator:render()
 	local winner = self.props.winner
 
diff --git a/lua/wikis/commons/Widget/Match/Summary/VetoLabel.lua b/lua/wikis/commons/Widget/Match/Summary/VetoLabel.lua
index 9f4283510ec..06dba4def4b 100644
--- a/lua/wikis/commons/Widget/Match/Summary/VetoLabel.lua
+++ b/lua/wikis/commons/Widget/Match/Summary/VetoLabel.lua
@@ -28,7 +28,7 @@ local VetoTypes = {
 ---@field props {vetoType: VetoTypes?}
 local MatchSummaryVetoLabel = Class.new(Widget)
 
----@return Widget?
+---@return VNode?
 function MatchSummaryVetoLabel:render()
 	local vetoType = self.props.vetoType
 	if not VetoTypes[vetoType] then
diff --git a/lua/wikis/commons/Widget/Standings/MatchOverview.lua b/lua/wikis/commons/Widget/Standings/MatchOverview.lua
index abd40d17efa..27e98586fa4 100644
--- a/lua/wikis/commons/Widget/Standings/MatchOverview.lua
+++ b/lua/wikis/commons/Widget/Standings/MatchOverview.lua
@@ -98,7 +98,7 @@ function MatchOverviewWidget:_createScoreContainer(leftScore, rightScore)
 end
 
 ---@private
----@return Widget?
+---@return VNode?
 function MatchOverviewWidget:_createResultDisplay(leftScore, rightScore)
 	if self.props.match.phase == 'upcoming' then
 		return

From 5ea20ae0a0cb02b4d86fc10fd7f2fc31c0e80c2e Mon Sep 17 00:00:00 2001
From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com>
Date: Mon, 11 May 2026 11:07:07 +0900
Subject: [PATCH 07/36] slider to widget3

---
 lua/wikis/commons/Widget/Basic/Slider.lua | 35 ++++++++++-------------
 1 file changed, 15 insertions(+), 20 deletions(-)

diff --git a/lua/wikis/commons/Widget/Basic/Slider.lua b/lua/wikis/commons/Widget/Basic/Slider.lua
index 0cdb0da184f..4214aa84778 100644
--- a/lua/wikis/commons/Widget/Basic/Slider.lua
+++ b/lua/wikis/commons/Widget/Basic/Slider.lua
@@ -8,11 +8,10 @@
 local Lua = require('Module:Lua')
 
 local Array = Lua.import('Module:Array')
-local Class = Lua.import('Module:Class')
 
-local Widget = Lua.import('Module:Widget')
-local HtmlWidgets = Lua.import('Module:Widget/Html/All')
-local Div = HtmlWidgets.Div
+local Component = Lua.import('Module:Widget/Component')
+local Html = Lua.import('Module:Widget/Html')
+local Div = Html.Div
 
 ---@class SliderWidgetParameters
 ---@field id string
@@ -24,22 +23,18 @@ local Div = HtmlWidgets.Div
 ---@field title fun(value: integer): string
 ---@field childrenAtValue fun(value: integer): Widget|Widget[]|nil
 
----@class SliderWidget: Widget
----@operator call(SliderWidgetParameters): SliderWidget
----@field props SliderWidgetParameters
-local Slider = Class.new(Widget)
-
----@return Widget
-function Slider:render()
-	assert(self.props.id, 'Slider requires a unique id property')
+---@param props SliderWidgetParameters
+---@return HtmlNode
+local function Slider(props)
+	assert(props.id, 'Slider requires a unique id property')
 	-- We make the real slider in js
-	local min, max, step = self.props.min or 0, self.props.max or 100, self.props.step or 1
+	local min, max, step = props.min or 0, props.max or 100, props.step or 1
 
 	local children = {}
 	for value = min, max, step do
 		table.insert(children, {
-			content = self.props.childrenAtValue(value) or '',
-			title = self.props.title and self.props.title(value) or value,
+			content = props.childrenAtValue(value) or '',
+			title = props.title and props.title(value) or value,
 			value = value,
 		})
 	end
@@ -47,15 +42,15 @@ function Slider:render()
 	return Div{
 		classes = { 'slider' },
 		attributes = {
-			['data-id'] = self.props.id,
+			['data-id'] = props.id,
 			['data-min'] = min,
 			['data-max'] = max,
 			['data-step'] = step,
-			['data-value'] = self.props.defaultValue or self.props.min or 0,
+			['data-value'] = props.defaultValue or props.min or 0,
 		},
 		children = Array.map(children, function(child)
-			return HtmlWidgets.Div{
-				classes = { 'slider-value', 'slider-value--' .. child.value, self.props.class },
+			return Div{
+				classes = { 'slider-value', 'slider-value--' .. child.value, props.class },
 				attributes = {
 					['data-title'] = child.title,
 				},
@@ -65,4 +60,4 @@ function Slider:render()
 	}
 end
 
-return Slider
+return Component.component(Slider)

From 125ad9f8e7c3e6d1db781777359fcb7b3475c7b4 Mon Sep 17 00:00:00 2001
From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com>
Date: Mon, 11 May 2026 11:09:35 +0900
Subject: [PATCH 08/36] carousel to widget3

---
 lua/wikis/commons/Widget/Basic/Carousel.lua | 38 +++++++++------------
 1 file changed, 17 insertions(+), 21 deletions(-)

diff --git a/lua/wikis/commons/Widget/Basic/Carousel.lua b/lua/wikis/commons/Widget/Basic/Carousel.lua
index 655038121c1..527e9fc1559 100644
--- a/lua/wikis/commons/Widget/Basic/Carousel.lua
+++ b/lua/wikis/commons/Widget/Basic/Carousel.lua
@@ -8,15 +8,14 @@
 local Lua = require('Module:Lua')
 
 local Array = Lua.import('Module:Array')
-local Class = Lua.import('Module:Class')
 local Table = Lua.import('Module:Table')
 
-local Widget = Lua.import('Module:Widget')
+local Component = Lua.import('Module:Widget/Component')
 local IconWidget = Lua.import('Module:Widget/Image/Icon/Fontawesome')
 local Button = Lua.import('Module:Widget/Basic/Button')
-local HtmlWidgets = Lua.import('Module:Widget/Html/All')
-local Div = HtmlWidgets.Div
-local Span = HtmlWidgets.Span
+local Html = Lua.import('Module:Widget/Html')
+local Div = Html.Div
+local Span = Html.Span
 
 ---@class CarouselWidgetParameters
 ---@field children Renderable[]
@@ -25,34 +24,31 @@ local Span = HtmlWidgets.Span
 ---@field classes string[]?
 ---@field css table?
 
----@class CarouselWidget: Widget
----@operator call(CarouselWidgetParameters): CarouselWidget
----@field props CarouselWidgetParameters
-local Carousel = Class.new(Widget)
+---@class CarouselWidget
+local Carousel = {}
 Carousel.defaultProps = {
 	itemWidth = '200px',
 	gap = '0.5rem',
-	classes = {},
-	css = {},
 }
 
----@return Widget
-function Carousel:render()
-	assert(self.props.children, 'Carousel: children is required')
-	assert(Array.isArray(self.props.children), 'Carousel: children must be an array')
+---@param props CarouselWidgetParameters
+---@return HtmlNode
+function Carousel.render(props)
+	assert(props.children, 'Carousel: children is required')
+	assert(Array.isArray(props.children), 'Carousel: children must be an array')
 
 	local carouselCss = Table.mergeInto({
-		gap = self.props.gap,
-	}, self.props.css)
+		gap = props.gap,
+	}, props.css)
 
 	local carouselContent = Div{
 		classes = {'carousel-content'},
 		css = carouselCss,
-		children = Array.map(self.props.children, function(child)
+		children = Array.map(props.children, function(child)
 			return Div{
 				classes = {'carousel-item'},
 				css = {
-					width = self.props.itemWidth,
+					width = props.itemWidth,
 				},
 				children = {child},
 			}
@@ -87,7 +83,7 @@ function Carousel:render()
 	local rightFade = Div{classes = {'carousel-fade', 'carousel-fade--right'}}
 
 	return Div{
-		classes = Array.extend({'carousel'}, self.props.classes),
+		classes = Array.extend({'carousel'}, props.classes),
 		children = {
 			leftButton,
 			rightButton,
@@ -98,4 +94,4 @@ function Carousel:render()
 	}
 end
 
-return Carousel
+return Component.component(Carousel.render, Carousel.defaultProps)

From 271fff9242c0e2892617e87d4b42b4e8b91c98a8 Mon Sep 17 00:00:00 2001
From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com>
Date: Mon, 11 May 2026 11:11:31 +0900
Subject: [PATCH 09/36] update type

---
 lua/wikis/commons/Widget/Component.lua | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lua/wikis/commons/Widget/Component.lua b/lua/wikis/commons/Widget/Component.lua
index 7c6bfa10e04..40ebe2c66af 100644
--- a/lua/wikis/commons/Widget/Component.lua
+++ b/lua/wikis/commons/Widget/Component.lua
@@ -17,8 +17,8 @@
 
 ---@class HtmlProps
 ---@field classes? string[]
----@field css? table<string, string|number>
----@field attributes? table
+---@field css? table<string, string|number?>
+---@field attributes? table<string, string|number?>
 ---@field children? Renderable|Renderable[]
 
 ---@alias Context<T> {props:{parent: Context?, def: ContextDef<T>, value: T}}

From a3a274ebe7e2362f4b721a3a2d28277ab0f3c1ce Mon Sep 17 00:00:00 2001
From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com>
Date: Mon, 11 May 2026 11:13:28 +0900
Subject: [PATCH 10/36] box to widget3

---
 lua/wikis/commons/Widget/Basic/Box.lua | 41 +++++++++++---------------
 1 file changed, 18 insertions(+), 23 deletions(-)

diff --git a/lua/wikis/commons/Widget/Basic/Box.lua b/lua/wikis/commons/Widget/Basic/Box.lua
index 0f2e0043cd3..01d3d57aee4 100644
--- a/lua/wikis/commons/Widget/Basic/Box.lua
+++ b/lua/wikis/commons/Widget/Basic/Box.lua
@@ -8,10 +8,9 @@
 local Lua = require('Module:Lua')
 
 local Array = Lua.import('Module:Array')
-local Class = Lua.import('Module:Class')
 
-local HtmlWidgets = Lua.import('Module:Widget/Html/All')
-local Widget = Lua.import('Module:Widget')
+local Component = Lua.import('Module:Widget/Component')
+local Html = Lua.import('Module:Widget/Html')
 
 ---@class BoxProps
 ---@field children Renderable[]|Renderable
@@ -22,31 +21,27 @@ local Widget = Lua.import('Module:Widget')
 ---@field width string?
 ---@field height string?
 
----@class Box: Widget
----@operator call(BoxProps): Box
----@field props BoxProps
-local Box = Class.new(Widget)
-
----@return Widget|Renderable
-function Box:render()
-	local children = self.props.children
+---@param props BoxProps
+---@return Renderable
+local function Box(props)
+	local children = props.children
 	if not Array.isArray(children) then
-		return self.props.children
+		return props.children
 	end
-	---@cast children -Renderable
+	---@cast children Renderable[]
 
-	return HtmlWidgets.Div{
-		css = {['max-width'] = self.props.maxWidth},
+	return Html.Div{
+		css = {['max-width'] = props.maxWidth},
 		children = Array.map(children, function(child)
-			return HtmlWidgets.Div{
+			return Html.Div{
 				classes = {'template-box'},
 				css = {
-					['padding-left'] = self.props.paddingLeft,
-					['padding-bottom'] = self.props.paddingBottom,
-					['padding-right'] = self.props.paddingRight,
-					width = self.props.width,
-					height = self.props.height,
-					overflow = self.props.height and 'hidden' or nil,
+					['padding-left'] = props.paddingLeft,
+					['padding-bottom'] = props.paddingBottom,
+					['padding-right'] = props.paddingRight,
+					width = props.width,
+					height = props.height,
+					overflow = props.height and 'hidden' or nil,
 				},
 				children = child,
 			}
@@ -54,4 +49,4 @@ function Box:render()
 	}
 end
 
-return Box
+return Component.component(Box)

From 6b9c7fd57f0c039d2c12250bb5e42c3879965100 Mon Sep 17 00:00:00 2001
From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com>
Date: Mon, 11 May 2026 11:16:32 +0900
Subject: [PATCH 11/36] dropdown item to widget3

---
 .../commons/Widget/Basic/Dropdown/Item.lua    | 41 ++++++++-----------
 lua/wikis/commons/Widget/Basic/Link.lua       |  4 +-
 2 files changed, 20 insertions(+), 25 deletions(-)

diff --git a/lua/wikis/commons/Widget/Basic/Dropdown/Item.lua b/lua/wikis/commons/Widget/Basic/Dropdown/Item.lua
index 6bebed02d45..9329473844b 100644
--- a/lua/wikis/commons/Widget/Basic/Dropdown/Item.lua
+++ b/lua/wikis/commons/Widget/Basic/Dropdown/Item.lua
@@ -8,58 +8,53 @@
 local Lua = require('Module:Lua')
 
 local Array = Lua.import('Module:Array')
-local Class = Lua.import('Module:Class')
 local Logic = Lua.import('Module:Logic')
 
-local Widget = Lua.import('Module:Widget')
-local HtmlWidgets = Lua.import('Module:Widget/Html/All')
-local Div = HtmlWidgets.Div
+local Component = Lua.import('Module:Widget/Component')
+local Html = Lua.import('Module:Widget/Html')
+local Div = Html.Div
 local Link = Lua.import('Module:Widget/Basic/Link')
 local Icon = Lua.import('Module:Widget/Image/Icon/Fontawesome')
 local WidgetUtil = Lua.import('Module:Widget/Util')
 
----@class DropdownItemWidgetParameters
+---@class DropdownItemWidgetParameters: LinkWidgetParameters
 ---@field icon string|Widget?
----@field children Renderable|Renderable[]
----@field link string?
----@field linktype 'internal'|'external'|nil
 ---@field classes string[]?
 ---@field attributes table?
 
----@class DropdownItemWidget: Widget
----@operator call(DropdownItemWidgetParameters): DropdownItemWidget
----@field props DropdownItemWidgetParameters
-local DropdownItem = Class.new(Widget)
+---@class DropdownItemWidget
+local DropdownItem = {}
 DropdownItem.defaultProps = {
 	linktype = 'internal',
 }
 
----@return Widget
-function DropdownItem:render()
-	local icon = not Logic.isEmpty(self.props.icon) and
-		(type(self.props.icon) == 'string' and Icon{iconName = self.props.icon, size = 'sm'} or self.props.icon)
+---@param props DropdownItemWidgetParameters
+---@return HtmlNode
+function DropdownItem.render(props)
+	local icon = not Logic.isEmpty(props.icon) and
+		(type(props.icon) == 'string' and Icon{iconName = props.icon, size = 'sm'} or props.icon)
 
-	local children = WidgetUtil.collect(icon, self.props.children)
+	local children = WidgetUtil.collect(icon, props.children)
 
 	local item = Div{
-		classes = Array.extend('dropdown-widget__item', self.props.classes),
-		attributes = self.props.attributes,
+		classes = Array.extend('dropdown-widget__item', props.classes),
+		attributes = props.attributes,
 		children = children
 	}
 
-	if not self.props.link then
+	if not props.link then
 		return item
 	end
 
 	return Div{
 		children = {
 			Link{
-				link = self.props.link,
-				linktype = self.props.linktype,
+				link = props.link,
+				linktype = props.linktype,
 				children = {item}
 			}
 		}
 	}
 end
 
-return DropdownItem
+return Component.component(DropdownItem.render, DropdownItem.defaultProps)
diff --git a/lua/wikis/commons/Widget/Basic/Link.lua b/lua/wikis/commons/Widget/Basic/Link.lua
index d9c0c778440..5933fc0ff9e 100644
--- a/lua/wikis/commons/Widget/Basic/Link.lua
+++ b/lua/wikis/commons/Widget/Basic/Link.lua
@@ -11,8 +11,8 @@ local Component = Lua.import('Module:Widget/Component')
 local WidgetUtil = Lua.import('Module:Widget/Util')
 
 ---@class LinkWidgetParameters
----@field children Renderable|Renderable[]
----@field link string
+---@field children? Renderable|Renderable[]
+---@field link? string
 ---@field linktype? 'internal'|'external'
 
 ---@class LinkWidget

From 1a2494734a1461eb45f3446671a30a3d8c181ae6 Mon Sep 17 00:00:00 2001
From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com>
Date: Mon, 11 May 2026 11:19:46 +0900
Subject: [PATCH 12/36] dropdown container to widget3

---
 .../Widget/Basic/Dropdown/Container.lua       | 38 +++++++++----------
 1 file changed, 18 insertions(+), 20 deletions(-)

diff --git a/lua/wikis/commons/Widget/Basic/Dropdown/Container.lua b/lua/wikis/commons/Widget/Basic/Dropdown/Container.lua
index f4469c20c75..1c87166cad1 100644
--- a/lua/wikis/commons/Widget/Basic/Dropdown/Container.lua
+++ b/lua/wikis/commons/Widget/Basic/Dropdown/Container.lua
@@ -8,16 +8,15 @@
 local Lua = require('Module:Lua')
 
 local Array = Lua.import('Module:Array')
-local Class = Lua.import('Module:Class')
 local Logic = Lua.import('Module:Logic')
 
-local Widget = Lua.import('Module:Widget')
-local HtmlWidgets = Lua.import('Module:Widget/Html/All')
+local Component = Lua.import('Module:Widget/Component')
+local Html = Lua.import('Module:Widget/Html')
 local Button = Lua.import('Module:Widget/Basic/Button')
 local Icon = Lua.import('Module:Widget/Image/Icon/Fontawesome')
 local WidgetUtil = Lua.import('Module:Widget/Util')
-local Div = HtmlWidgets.Div
-local Span = HtmlWidgets.Span
+local Div = Html.Div
+local Span = Html.Span
 
 local VARIANT_CONFIG = {
 	inline = {
@@ -37,31 +36,30 @@ local VARIANT_CONFIG = {
 ---@field prefix Renderable|Renderable[]?
 ---@field label Renderable|Renderable[]?
 
----@class DropdownContainerWidget: Widget
----@operator call(DropdownContainerWidgetParameters): DropdownContainerWidget
----@field props DropdownContainerWidgetParameters
-local DropdownContainer = Class.new(Widget)
+---@class DropdownContainerWidget
+local DropdownContainer = {}
 DropdownContainer.defaultProps = {
 	variant = 'form',
 }
 
----@return Widget|nil
-function DropdownContainer:render()
-	if Logic.isEmpty(self.props.children) then
+---@param props DropdownContainerWidgetParameters
+---@return HtmlNode?
+function DropdownContainer.render(props)
+	if Logic.isEmpty(props.children) then
 		return nil
 	end
 
-	local variantConfig = assert(VARIANT_CONFIG[self.props.variant],
-		'Invalid Dropdown variant "' .. self.props.variant .. '"')
+	local variantConfig = assert(VARIANT_CONFIG[props.variant],
+		'Invalid Dropdown variant "' .. props.variant .. '"')
 
 	local toggleChildren = WidgetUtil.collect(
-		Logic.isNotEmpty(self.props.prefix) and Span{
+		Logic.isNotEmpty(props.prefix) and Span{
 			classes = {'dropdown-widget__prefix'},
-			children = self.props.prefix,
+			children = props.prefix,
 		} or nil,
 		Span{
 			classes = {'dropdown-widget__label'},
-			children = self.props.label,
+			children = props.label,
 		},
 		Span{
 			classes = {'dropdown-widget__indicator'},
@@ -82,16 +80,16 @@ function DropdownContainer:render()
 	}
 
 	return Div{
-		classes = Array.extend({'dropdown-widget', 'dropdown-widget--' .. self.props.variant}, self.props.classes),
+		classes = Array.extend({'dropdown-widget', 'dropdown-widget--' .. props.variant}, props.classes),
 		children = {
 			toggleButton,
 			Div{
 				classes = {'dropdown-widget__menu'},
 				attributes = {['aria-hidden'] = 'true'},
-				children = self.props.children
+				children = props.children
 			}
 		}
 	}
 end
 
-return DropdownContainer
+return Component.component(DropdownContainer.render, DropdownContainer.defaultProps)

From 9c021994bf8ecea5555945ebb0a2e2a838295ae1 Mon Sep 17 00:00:00 2001
From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com>
Date: Mon, 11 May 2026 11:22:19 +0900
Subject: [PATCH 13/36] fontawesome icon to widget3

---
 .../commons/Widget/Image/Icon/Fontawesome.lua    | 16 ++--------------
 1 file changed, 2 insertions(+), 14 deletions(-)

diff --git a/lua/wikis/commons/Widget/Image/Icon/Fontawesome.lua b/lua/wikis/commons/Widget/Image/Icon/Fontawesome.lua
index 64a3ba25817..c5d670db07a 100644
--- a/lua/wikis/commons/Widget/Image/Icon/Fontawesome.lua
+++ b/lua/wikis/commons/Widget/Image/Icon/Fontawesome.lua
@@ -7,19 +7,7 @@
 
 local Lua = require('Module:Lua')
 
-local Class = Lua.import('Module:Class')
-
 local Icon = Lua.import('Module:Icon')
-local WidgetIcon = Lua.import('Module:Widget/Image/Icon')
-
----@class IconFontawesomeWidget: IconWidget
----@operator call(IconProps): IconFontawesomeWidget
----@field props IconProps
-local FontawesomeIcon = Class.new(WidgetIcon)
-
----@return string?
-function FontawesomeIcon:render()
-	return Icon.makeIcon(self.props)
-end
+local Component = Lua.import('Module:Widget/Component')
 
-return FontawesomeIcon
+return Component.component(Icon.makeIcon)

From 516ade0a074ec188a5db1a31681dfd47cd31e8b5 Mon Sep 17 00:00:00 2001
From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com>
Date: Mon, 11 May 2026 11:25:50 +0900
Subject: [PATCH 14/36] image widget to widget3

---
 lua/wikis/commons/Widget/Image/Icon/Image.lua | 48 +++++++++----------
 1 file changed, 23 insertions(+), 25 deletions(-)

diff --git a/lua/wikis/commons/Widget/Image/Icon/Image.lua b/lua/wikis/commons/Widget/Image/Icon/Image.lua
index 78ef8b15cb9..a5bb2e7ddca 100644
--- a/lua/wikis/commons/Widget/Image/Icon/Image.lua
+++ b/lua/wikis/commons/Widget/Image/Icon/Image.lua
@@ -8,10 +8,9 @@
 local Lua = require('Module:Lua')
 
 local Array = Lua.import('Module:Array')
-local Class = Lua.import('Module:Class')
 local Logic = Lua.import('Module:Logic')
 
-local WidgetIcon = Lua.import('Module:Widget/Image/Icon')
+local Component = Lua.import('Module:Widget/Component')
 
 ---@class IconImageWidgetParameters
 ---@field imageLight string?
@@ -26,59 +25,58 @@ local WidgetIcon = Lua.import('Module:Widget/Image/Icon')
 ---@field verticalAlignment 'baseline'|'sub'|'super'|'top'|'text-top'|'middle'|'bottom'|'text-bottom'?
 ---@field caption string?
 
----@class IconImageWidget: IconWidget
----@operator call(IconImageWidgetParameters): IconImageWidget
----@field props IconImageWidgetParameters
-local Icon = Class.new(WidgetIcon)
+---@class IconImageWidget
+local Icon = {}
 Icon.defaultProps = {
 	link = '',
 	size = 'x20px',
-	classes = {},
 	verticalAlignment = 'middle', -- make the implicit mw default explicit
 }
 
+---@param props IconImageWidgetParameters
 ---@return string|string[]?
-function Icon:render()
-	local imageLight = self.props.imageLight
-	local imageDark = self.props.imageDark
+function Icon.render(props)
+	local imageLight = props.imageLight
+	local imageDark = props.imageDark
 	if Logic.isEmpty(imageLight) or Logic.isEmpty(imageDark) or imageLight == imageDark then
-		return self:_make(Logic.emptyOr(imageLight, imageDark))
+		return Icon._make(Logic.emptyOr(imageLight, imageDark))
 	end
 
 	return {
-		self:_make(imageLight, 'show-when-light-mode'),
-		self:_make(imageDark, 'show-when-dark-mode'),
+		Icon._make(props, imageLight, 'show-when-light-mode'),
+		Icon._make(props, imageDark, 'show-when-dark-mode'),
 	}
 end
 
+---@param props IconImageWidgetParameters
 ---@param image string?
 ---@param themeClass string?
 ---@return string?
 ---@overload fun(nil): nil
-function Icon:_make(image, themeClass)
+function Icon._make(props, image, themeClass)
 	if Logic.isEmpty(image) then
 		return
 	end
-	local classes = table.concat(Array.extend(self.props.classes, themeClass), ' ')
+	local classes = table.concat(Array.extend(props.classes, themeClass), ' ')
 
-	local border = Logic.nilIfEmpty(self.props.border)
-	assert((self.props.format == 'frameless' or not self.props.format) or not border,
+	local border = Logic.nilIfEmpty(props.border)
+	assert((props.format == 'frameless' or not props.format) or not border,
 		'border can only be used for frameless images')
 
 	local parts = Array.extend(
 		'File:' .. image,
 		border,
-		Logic.nilIfEmpty(self.props.format),
-		Logic.isNumeric(self.props.size) and (self.props.size .. 'px') or Logic.nilIfEmpty(self.props.size),
-		Logic.nilIfEmpty(self.props.horizontalAlignment),
-		self.props.verticalAlignment ~= 'middle' and self.props.verticalAlignment or nil,
-		'link=' .. self.props.link,
-		Logic.isNotEmpty(self.props.alt) and ('alt=' .. self.props.alt) or nil,
+		Logic.nilIfEmpty(props.format),
+		Logic.isNumeric(props.size) and (props.size .. 'px') or Logic.nilIfEmpty(props.size),
+		Logic.nilIfEmpty(props.horizontalAlignment),
+		props.verticalAlignment ~= 'middle' and props.verticalAlignment or nil,
+		'link=' .. props.link,
+		Logic.isNotEmpty(props.alt) and ('alt=' .. props.alt) or nil,
 		Logic.isNotEmpty(classes) and ('class=' .. classes) or nil,
-		Logic.nilIfEmpty(self.props.caption)
+		Logic.nilIfEmpty(props.caption)
 	)
 
 	return '[[' .. table.concat(parts, '|') .. ']]'
 end
 
-return Icon
+return Component.component(Icon.render, Icon.defaultProps)

From 5354d1498189e14b8496a66d86d2800dbec3937d Mon Sep 17 00:00:00 2001
From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com>
Date: Mon, 11 May 2026 11:29:04 +0900
Subject: [PATCH 15/36] access modifier

---
 lua/wikis/commons/Widget/Component.lua        | 2 ++
 lua/wikis/commons/Widget/Image/Icon/Image.lua | 1 +
 2 files changed, 3 insertions(+)

diff --git a/lua/wikis/commons/Widget/Component.lua b/lua/wikis/commons/Widget/Component.lua
index 40ebe2c66af..cb6d75dc9f3 100644
--- a/lua/wikis/commons/Widget/Component.lua
+++ b/lua/wikis/commons/Widget/Component.lua
@@ -38,6 +38,7 @@ local Renderer = Lua.import('Module:Widget/Renderer')
 local ComponentCore = {}
 
 -- Virtual Nodes (The table returned after calling a component)
+---@package
 ComponentCore.VNodeMT = {
 	-- Automatically trigger rendering
 	__tostring = Renderer.render,
@@ -78,6 +79,7 @@ local function isSingleNode(node)
 end
 
 -- Component Definitions
+---@package
 ComponentCore.ComponentMT = {
 	__call = function(self, props)
 		props = props or {}
diff --git a/lua/wikis/commons/Widget/Image/Icon/Image.lua b/lua/wikis/commons/Widget/Image/Icon/Image.lua
index a5bb2e7ddca..eeee60cc41d 100644
--- a/lua/wikis/commons/Widget/Image/Icon/Image.lua
+++ b/lua/wikis/commons/Widget/Image/Icon/Image.lua
@@ -48,6 +48,7 @@ function Icon.render(props)
 	}
 end
 
+---@private
 ---@param props IconImageWidgetParameters
 ---@param image string?
 ---@param themeClass string?

From 8a9916625ae93af38855624d977a3712353f169a Mon Sep 17 00:00:00 2001
From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com>
Date: Mon, 11 May 2026 11:31:09 +0900
Subject: [PATCH 16/36] fix type definition

---
 lua/definitions/mw.lua | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lua/definitions/mw.lua b/lua/definitions/mw.lua
index 9acbdf610f6..05f19caf904 100644
--- a/lua/definitions/mw.lua
+++ b/lua/definitions/mw.lua
@@ -183,7 +183,7 @@ function mw.html:tag(tagName, args) end
 ---@param name string
 ---@param value string|number|nil
 ---@return self
----@overload fun(self, param: {[string]: string})
+---@overload fun(self, param: {[string]: string|number|nil})
 function mw.html:attr(name, value) end
 
 ---Get the value of a html attribute previously set using html:attr() with the given name.

From bef77c292a4ba9d691f1c3ab02cdd0e2cf9d723b Mon Sep 17 00:00:00 2001
From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com>
Date: Mon, 11 May 2026 11:33:48 +0900
Subject: [PATCH 17/36] type casting

---
 lua/wikis/commons/Widget/Basic/Dropdown/Item.lua | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lua/wikis/commons/Widget/Basic/Dropdown/Item.lua b/lua/wikis/commons/Widget/Basic/Dropdown/Item.lua
index 9329473844b..087c8a81bb8 100644
--- a/lua/wikis/commons/Widget/Basic/Dropdown/Item.lua
+++ b/lua/wikis/commons/Widget/Basic/Dropdown/Item.lua
@@ -32,7 +32,7 @@ DropdownItem.defaultProps = {
 ---@return HtmlNode
 function DropdownItem.render(props)
 	local icon = not Logic.isEmpty(props.icon) and
-		(type(props.icon) == 'string' and Icon{iconName = props.icon, size = 'sm'} or props.icon)
+		(type(props.icon) == 'string' and Icon{iconName = props.icon --[[@as string]], size = 'sm'} or props.icon)
 
 	local children = WidgetUtil.collect(icon, props.children)
 

From 816ca09a09e5abdf0171fe9f2869f6601d4655eb Mon Sep 17 00:00:00 2001
From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com>
Date: Mon, 11 May 2026 11:34:41 +0900
Subject: [PATCH 18/36] fix type annotation

---
 lua/wikis/commons/Widget/Image/Icon/Image.lua | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lua/wikis/commons/Widget/Image/Icon/Image.lua b/lua/wikis/commons/Widget/Image/Icon/Image.lua
index eeee60cc41d..24898103948 100644
--- a/lua/wikis/commons/Widget/Image/Icon/Image.lua
+++ b/lua/wikis/commons/Widget/Image/Icon/Image.lua
@@ -15,9 +15,9 @@ local Component = Lua.import('Module:Widget/Component')
 ---@class IconImageWidgetParameters
 ---@field imageLight string?
 ---@field imageDark string?
----@field link string
+---@field link string?
 ---@field alt string?
----@field classes string[]
+---@field classes string[]?
 ---@field border 'border'? # only available if `format: 'frameless'?`
 ---@field format 'frameless'|'frame'|'thumb'?
 ---@field size string? # '{width}px'|'x{height}px'|'{width}x{height}px'

From a8b46465af659e55f677606a32f8d79599221642 Mon Sep 17 00:00:00 2001
From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com>
Date: Mon, 11 May 2026 11:39:06 +0900
Subject: [PATCH 19/36] datatable to widget3

---
 lua/wikis/commons/Widget/Basic/DataTable.lua | 44 ++++++++++----------
 1 file changed, 21 insertions(+), 23 deletions(-)

diff --git a/lua/wikis/commons/Widget/Basic/DataTable.lua b/lua/wikis/commons/Widget/Basic/DataTable.lua
index 29e8ee6c6b7..c0632c858b2 100644
--- a/lua/wikis/commons/Widget/Basic/DataTable.lua
+++ b/lua/wikis/commons/Widget/Basic/DataTable.lua
@@ -7,39 +7,37 @@
 
 local Lua = require('Module:Lua')
 
-local Class = Lua.import('Module:Class')
 local Logic = Lua.import('Module:Logic')
 
-local Widget = Lua.import('Module:Widget')
+local Component = Lua.import('Module:Widget/Component')
 local WidgetUtil = Lua.import('Module:Widget/Util')
-local HtmlWidgets = Lua.import('Module:Widget/Html/All')
-local Div = HtmlWidgets.Div
-local Table = HtmlWidgets.Table
+local Html = Lua.import('Module:Widget/Html')
+local Div = Html.Div
+local Table = Html.Table
 
----@class WidgetDataTable: Widget
-local DataTable = Class.new(Widget)
-DataTable.defaultProps = {
-	classes = {},
-	wrapperClasses = {},
-	sortable = false,
-}
+---@class DataTableProps: HtmlProps
+---@field sortable boolean?
+---@field tableCss? table<string, string|number?>
+---@field tableAttributes? table<string, string|number?>
+---@field wrapperClasses? string[]
 
----@return Widget
-function DataTable:render()
-	local isSortable = Logic.readBool(self.props.sortable)
+---@param props DataTableProps
+---@return HtmlNode
+local function DataTable(props)
+	local isSortable = Logic.readBool(props.sortable)
 	return Div{
 		children = {
 			Table{
-				children = self.props.children,
-				classes = WidgetUtil.collect('wikitable', isSortable and 'sortable' or nil, self.props.classes),
-				css = self.props.tableCss,
-				attributes = self.props.tableAttributes,
+				children = props.children,
+				classes = WidgetUtil.collect('wikitable', isSortable and 'sortable' or nil, props.classes),
+				css = props.tableCss,
+				attributes = props.tableAttributes,
 			},
 		},
-		classes = WidgetUtil.collect('table-responsive', self.props.wrapperClasses),
-		attributes = self.props.attributes,
-		css = self.props.css,
+		classes = WidgetUtil.collect('table-responsive', props.wrapperClasses),
+		attributes = props.attributes,
+		css = props.css,
 	}
 end
 
-return DataTable
+return Component.component(DataTable)

From 2c031fcc15cadda2495af2507dd2d0f08eb90958 Mon Sep 17 00:00:00 2001
From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com>
Date: Mon, 11 May 2026 11:47:25 +0900
Subject: [PATCH 20/36] collapsible chevron toggle to widget3

---
 lua/wikis/commons/Widget/Basic/Button.lua      |  2 +-
 .../GeneralCollapsible/ChevronToggle.lua       | 18 ++++++------------
 2 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/lua/wikis/commons/Widget/Basic/Button.lua b/lua/wikis/commons/Widget/Basic/Button.lua
index d6a4f76d74c..c6eb5e756ef 100644
--- a/lua/wikis/commons/Widget/Basic/Button.lua
+++ b/lua/wikis/commons/Widget/Basic/Button.lua
@@ -20,7 +20,7 @@ local Div = Html.Div
 ---@field title string?
 ---@field link string?
 ---@field linktype 'internal'|'external'|nil
----@field variant 'primary'|'secondary'|'themed'|'ghost'|'destructive'|nil
+---@field variant 'primary'|'secondary'|'themed'|'ghost'|'destructive'|'icon'|nil
 ---@field size 'xs'|'sm'|'md'|'lg'|nil
 ---@field grow boolean?
 ---@field aligncontent 'left'|'right'|nil
diff --git a/lua/wikis/commons/Widget/GeneralCollapsible/ChevronToggle.lua b/lua/wikis/commons/Widget/GeneralCollapsible/ChevronToggle.lua
index e3c98047382..062c0981c51 100644
--- a/lua/wikis/commons/Widget/GeneralCollapsible/ChevronToggle.lua
+++ b/lua/wikis/commons/Widget/GeneralCollapsible/ChevronToggle.lua
@@ -7,20 +7,14 @@
 
 local Lua = require('Module:Lua')
 
-local Class = Lua.import('Module:Class')
-
-local Widget = Lua.import('Module:Widget')
-local HtmlWidgets = Lua.import('Module:Widget/Html/All')
+local Component = Lua.import('Module:Widget/Component')
+local Html = Lua.import('Module:Widget/Html')
 local Button = Lua.import('Module:Widget/Basic/Button')
 local Icon = Lua.import('Module:Widget/Image/Icon/Fontawesome')
-local Span = HtmlWidgets.Span
-
----@class ChevronToggle: Widget
----@operator call(table?): ChevronToggle
-local ChevronToggle = Class.new(Widget)
+local Span = Html.Span
 
----@return Widget
-function ChevronToggle:render()
+---@return HtmlNode
+local function ChevronToggle()
 	local expandButton = Button{
 		classes = {'general-collapsible-expand-button'},
 		children = Span{
@@ -51,4 +45,4 @@ function ChevronToggle:render()
 	}
 end
 
-return ChevronToggle
+return Component.component(ChevronToggle)

From 92c4eb2fd5d0476750ef7adbd5bb66b59e575605 Mon Sep 17 00:00:00 2001
From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com>
Date: Mon, 11 May 2026 11:51:18 +0900
Subject: [PATCH 21/36] collapsible toggle to widget3

---
 .../Widget/GeneralCollapsible/Toggle.lua      | 34 +++++++++++--------
 1 file changed, 19 insertions(+), 15 deletions(-)

diff --git a/lua/wikis/commons/Widget/GeneralCollapsible/Toggle.lua b/lua/wikis/commons/Widget/GeneralCollapsible/Toggle.lua
index 0142e134286..275341950bf 100644
--- a/lua/wikis/commons/Widget/GeneralCollapsible/Toggle.lua
+++ b/lua/wikis/commons/Widget/GeneralCollapsible/Toggle.lua
@@ -7,25 +7,26 @@
 
 local Lua = require('Module:Lua')
 
-local Class = Lua.import('Module:Class')
+local Array = Lua.import('Module:Array')
 local Logic = Lua.import('Module:Logic')
 
-local Widget = Lua.import('Module:Widget')
-local HtmlWidgets = Lua.import('Module:Widget/Html/All')
+local Component = Lua.import('Module:Widget/Component')
+local Html = Lua.import('Module:Widget/Html')
 local Button = Lua.import('Module:Widget/Basic/Button')
 local Icon = Lua.import('Module:Widget/Image/Icon/Fontawesome')
-local Span = HtmlWidgets.Span
+local Span = Html.Span
 
----@class CollapsibleToggle: Widget
----@operator call(table?): CollapsibleToggle
-local CollapsibleToggle = Class.new(Widget)
+---@class CollapsibleToggleProps: HtmlProps
+---@field showButtonChildren? Renderable|Renderable[]
+---@field hideButtonChildren? Renderable|Renderable[]
 
----@return Widget
-function CollapsibleToggle:render()
+---@param props CollapsibleToggleProps
+---@return HtmlNode
+local function CollapsibleToggle(props)
 	local showButton = Button{
 		classes = {'general-collapsible-expand-button'},
 		children = Span{
-			children = Logic.emptyOr(self.props.showButtonChildren, {
+			children = Logic.emptyOr(props.showButtonChildren, {
 				Icon{iconName = 'show'},
 				' ',
 				'Show'
@@ -37,7 +38,7 @@ function CollapsibleToggle:render()
 	local hideButton = Button{
 		classes = {'general-collapsible-collapse-button'},
 		children = Span{
-			children = Logic.emptyOr(self.props.hideButtonChildren, {
+			children = Logic.emptyOr(props.hideButtonChildren, {
 				Icon{iconName = 'hide'},
 				' ',
 				'Hide'
@@ -48,9 +49,12 @@ function CollapsibleToggle:render()
 	}
 
 	return Span{
-		classes = {'general-collapsible-default-toggle', unpack(self.props.classes or {})},
-		css = self.props.css,
-		attributes = self.props.attributes,
+		classes = Array.extend(
+			'general-collapsible-default-toggle',
+			props.classes
+		),
+		css = props.css,
+		attributes = props.attributes,
 		children = {
 			showButton,
 			hideButton,
@@ -58,4 +62,4 @@ function CollapsibleToggle:render()
 	}
 end
 
-return CollapsibleToggle
+return Component.component(CollapsibleToggle)

From 45f3c3c965d9150a636985b2eb69c8f77c704c4b Mon Sep 17 00:00:00 2001
From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com>
Date: Mon, 11 May 2026 11:54:32 +0900
Subject: [PATCH 22/36] collapsible to widget3

---
 .../Widget/GeneralCollapsible/Default.lua     | 37 +++++++------------
 1 file changed, 14 insertions(+), 23 deletions(-)

diff --git a/lua/wikis/commons/Widget/GeneralCollapsible/Default.lua b/lua/wikis/commons/Widget/GeneralCollapsible/Default.lua
index 2fecc9b415c..8cdb6507873 100644
--- a/lua/wikis/commons/Widget/GeneralCollapsible/Default.lua
+++ b/lua/wikis/commons/Widget/GeneralCollapsible/Default.lua
@@ -8,54 +8,45 @@
 local Lua = require('Module:Lua')
 
 local Array = Lua.import('Module:Array')
-local Class = Lua.import('Module:Class')
 
 local CollapsibleToggle = Lua.import('Module:Widget/GeneralCollapsible/Toggle')
-local HtmlWidgets = Lua.import('Module:Widget/Html/All')
-local B = HtmlWidgets.B
-local Div = HtmlWidgets.Div
-local Widget = Lua.import('Module:Widget')
+local Component = Lua.import('Module:Widget/Component')
+local Html = Lua.import('Module:Widget/Html')
+local B = Html.B
+local Div = Html.Div
 
----@class DefaultCollapsibleProps
----@field attributes table<string, string>?
----@field classes string[]?
----@field css table<string, string|number>?
+---@class DefaultCollapsibleProps: HtmlProps
 ---@field shouldCollapse boolean?
----@field title Renderable?
+---@field title Renderable|Renderable[]?
 ---@field titleClasses string[]?
 ---@field titleWidget Renderable?
 ---@field collapseAreaClasses string[]?
 ---@field collapseAreaCss table<string, string|number>?
 ---@field children Renderable|Renderable[]?
 
----@class DefaultCollapsible: Widget
----@operator call(DefaultCollapsibleProps?): DefaultCollapsible
----@field props DefaultCollapsibleProps
-local DefaultCollapsible = Class.new(Widget)
-
----@return Widget
-function DefaultCollapsible:render()
-	local props = self.props
+---@param props DefaultCollapsibleProps
+---@return HtmlNode
+local function DefaultCollapsible(props)
 	return Div{
 		attributes = props.attributes,
 		css = props.css,
-		classes = Array.extend({},
+		classes = Array.extend(
 			'general-collapsible',
 			props.shouldCollapse and 'collapsed' or nil,
 			props.classes
 		),
 		children = {
 			props.titleWidget or Div{
-				classes = Array.extend({'general-collapsible-default-header'}, props.titleClasses),
+				classes = Array.extend('general-collapsible-default-header', props.titleClasses),
 				children = {
-					B{children = {props.title}, classes = {'general-collapsible-default-title'}},
+					B{children = props.title, classes = {'general-collapsible-default-title'}},
 					CollapsibleToggle{css = {float = 'right'}},
 				}
 			},
 			Div{
 				children = props.children,
 				css = props.collapseAreaCss,
-				classes = Array.extend({},
+				classes = Array.extend(
 					'should-collapse',
 					props.collapseAreaClasses
 				),
@@ -64,4 +55,4 @@ function DefaultCollapsible:render()
 	}
 end
 
-return DefaultCollapsible
+return Component.component(DefaultCollapsible)

From 86fbe8eba881aa449102d1800474f0fc245fca88 Mon Sep 17 00:00:00 2001
From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com>
Date: Mon, 11 May 2026 11:59:07 +0900
Subject: [PATCH 23/36] rename html props type

---
 lua/wikis/commons/Widget/Basic/Button.lua               | 2 +-
 lua/wikis/commons/Widget/Basic/DataTable.lua            | 2 +-
 lua/wikis/commons/Widget/Basic/Label.lua                | 2 +-
 lua/wikis/commons/Widget/Component.lua                  | 6 +++---
 lua/wikis/commons/Widget/GeneralCollapsible/Default.lua | 2 +-
 lua/wikis/commons/Widget/GeneralCollapsible/Toggle.lua  | 2 +-
 6 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/lua/wikis/commons/Widget/Basic/Button.lua b/lua/wikis/commons/Widget/Basic/Button.lua
index c6eb5e756ef..7b28d8ba994 100644
--- a/lua/wikis/commons/Widget/Basic/Button.lua
+++ b/lua/wikis/commons/Widget/Basic/Button.lua
@@ -16,7 +16,7 @@ local Html = Lua.import('Module:Widget/Html')
 local Link = Lua.import('Module:Widget/Basic/Link')
 local Div = Html.Div
 
----@class ButtonWidgetParameters: HtmlProps
+---@class ButtonWidgetParameters: HtmlNodeProps
 ---@field title string?
 ---@field link string?
 ---@field linktype 'internal'|'external'|nil
diff --git a/lua/wikis/commons/Widget/Basic/DataTable.lua b/lua/wikis/commons/Widget/Basic/DataTable.lua
index c0632c858b2..f7d98bc4d49 100644
--- a/lua/wikis/commons/Widget/Basic/DataTable.lua
+++ b/lua/wikis/commons/Widget/Basic/DataTable.lua
@@ -15,7 +15,7 @@ local Html = Lua.import('Module:Widget/Html')
 local Div = Html.Div
 local Table = Html.Table
 
----@class DataTableProps: HtmlProps
+---@class DataTableProps: HtmlNodeProps
 ---@field sortable boolean?
 ---@field tableCss? table<string, string|number?>
 ---@field tableAttributes? table<string, string|number?>
diff --git a/lua/wikis/commons/Widget/Basic/Label.lua b/lua/wikis/commons/Widget/Basic/Label.lua
index 583747fd8d6..319a03c93fe 100644
--- a/lua/wikis/commons/Widget/Basic/Label.lua
+++ b/lua/wikis/commons/Widget/Basic/Label.lua
@@ -10,7 +10,7 @@ local Lua = require('Module:Lua')
 local Component = Lua.import('Module:Widget/Component')
 local Html = Lua.import('Module:Widget/Html')
 
----@class GenericLabelProps: HtmlProps
+---@class GenericLabelProps: HtmlNodeProps
 ---@field labelScheme string?
 ---@field labelScale number?
 ---@field labelType string?
diff --git a/lua/wikis/commons/Widget/Component.lua b/lua/wikis/commons/Widget/Component.lua
index cb6d75dc9f3..dce063a8a27 100644
--- a/lua/wikis/commons/Widget/Component.lua
+++ b/lua/wikis/commons/Widget/Component.lua
@@ -15,7 +15,7 @@
 ---@field renderFn string|fun(props: P, context?: Context?): Renderable
 ---@field props P
 
----@class HtmlProps
+---@class HtmlNodeProps
 ---@field classes? string[]
 ---@field css? table<string, string|number?>
 ---@field attributes? table<string, string|number?>
@@ -24,12 +24,12 @@
 ---@alias Context<T> {props:{parent: Context?, def: ContextDef<T>, value: T}}
 
 ---@alias ContextNode<T> VNode<ContextParam<T>>
----@alias HtmlNode VNode<HtmlProps>
+---@alias HtmlNode VNode<HtmlNodeProps>
 ---@alias ErrorBoundaryNode VNode<ErrorParam>
 
 ---@alias Component<P> fun(props?: P, context: Context?): VNode<P>
 ---@alias ContextComponent<T> Component<ContextParam<T>>
----@alias HtmlComponent Component<HtmlProps>
+---@alias HtmlComponent Component<HtmlNodeProps>
 ---@alias ErrorBoundaryComponent Component<ErrorParam>
 
 local Lua = require('Module:Lua')
diff --git a/lua/wikis/commons/Widget/GeneralCollapsible/Default.lua b/lua/wikis/commons/Widget/GeneralCollapsible/Default.lua
index 8cdb6507873..301a1ab6f99 100644
--- a/lua/wikis/commons/Widget/GeneralCollapsible/Default.lua
+++ b/lua/wikis/commons/Widget/GeneralCollapsible/Default.lua
@@ -15,7 +15,7 @@ local Html = Lua.import('Module:Widget/Html')
 local B = Html.B
 local Div = Html.Div
 
----@class DefaultCollapsibleProps: HtmlProps
+---@class DefaultCollapsibleProps: HtmlNodeProps
 ---@field shouldCollapse boolean?
 ---@field title Renderable|Renderable[]?
 ---@field titleClasses string[]?
diff --git a/lua/wikis/commons/Widget/GeneralCollapsible/Toggle.lua b/lua/wikis/commons/Widget/GeneralCollapsible/Toggle.lua
index 275341950bf..5733d7eaa52 100644
--- a/lua/wikis/commons/Widget/GeneralCollapsible/Toggle.lua
+++ b/lua/wikis/commons/Widget/GeneralCollapsible/Toggle.lua
@@ -16,7 +16,7 @@ local Button = Lua.import('Module:Widget/Basic/Button')
 local Icon = Lua.import('Module:Widget/Image/Icon/Fontawesome')
 local Span = Html.Span
 
----@class CollapsibleToggleProps: HtmlProps
+---@class CollapsibleToggleProps: HtmlNodeProps
 ---@field showButtonChildren? Renderable|Renderable[]
 ---@field hideButtonChildren? Renderable|Renderable[]
 

From 31cf3102d02ee99b53e32dd9ec7a6f10b8f4a418 Mon Sep 17 00:00:00 2001
From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com>
Date: Mon, 11 May 2026 12:08:52 +0900
Subject: [PATCH 24/36] correctly pass props

---
 lua/wikis/commons/Widget/Image/Icon/Image.lua | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lua/wikis/commons/Widget/Image/Icon/Image.lua b/lua/wikis/commons/Widget/Image/Icon/Image.lua
index 24898103948..959abd9acd9 100644
--- a/lua/wikis/commons/Widget/Image/Icon/Image.lua
+++ b/lua/wikis/commons/Widget/Image/Icon/Image.lua
@@ -39,7 +39,7 @@ function Icon.render(props)
 	local imageLight = props.imageLight
 	local imageDark = props.imageDark
 	if Logic.isEmpty(imageLight) or Logic.isEmpty(imageDark) or imageLight == imageDark then
-		return Icon._make(Logic.emptyOr(imageLight, imageDark))
+		return Icon._make(props, Logic.emptyOr(imageLight, imageDark))
 	end
 
 	return {

From b872aadfb812c7838c326d8c1b9ca88c9e12a460 Mon Sep 17 00:00:00 2001
From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com>
Date: Mon, 11 May 2026 12:14:23 +0900
Subject: [PATCH 25/36] slightly better

---
 lua/wikis/commons/Widget/Basic/Carousel.lua | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lua/wikis/commons/Widget/Basic/Carousel.lua b/lua/wikis/commons/Widget/Basic/Carousel.lua
index 527e9fc1559..87ccf87c2f9 100644
--- a/lua/wikis/commons/Widget/Basic/Carousel.lua
+++ b/lua/wikis/commons/Widget/Basic/Carousel.lua
@@ -83,7 +83,7 @@ function Carousel.render(props)
 	local rightFade = Div{classes = {'carousel-fade', 'carousel-fade--right'}}
 
 	return Div{
-		classes = Array.extend({'carousel'}, props.classes),
+		classes = Array.extendWith({'carousel'}, props.classes),
 		children = {
 			leftButton,
 			rightButton,

From fd2902a04f92442a7e887d6c750a69d8deaafc68 Mon Sep 17 00:00:00 2001
From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com>
Date: Mon, 11 May 2026 15:54:52 +0900
Subject: [PATCH 26/36] fix dropdown

---
 lua/wikis/commons/Widget/Basic/Dropdown/Item.lua | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/lua/wikis/commons/Widget/Basic/Dropdown/Item.lua b/lua/wikis/commons/Widget/Basic/Dropdown/Item.lua
index 087c8a81bb8..c549d059321 100644
--- a/lua/wikis/commons/Widget/Basic/Dropdown/Item.lua
+++ b/lua/wikis/commons/Widget/Basic/Dropdown/Item.lua
@@ -31,8 +31,9 @@ DropdownItem.defaultProps = {
 ---@param props DropdownItemWidgetParameters
 ---@return HtmlNode
 function DropdownItem.render(props)
-	local icon = not Logic.isEmpty(props.icon) and
+	local icon = Logic.isNotEmpty(props.icon) and
 		(type(props.icon) == 'string' and Icon{iconName = props.icon --[[@as string]], size = 'sm'} or props.icon)
+		or nil
 
 	local children = WidgetUtil.collect(icon, props.children)
 

From 6759b65bfc3be8aec34adf362c6706888d240342 Mon Sep 17 00:00:00 2001
From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com>
Date: Mon, 11 May 2026 16:02:22 +0900
Subject: [PATCH 27/36] fix test

---
 lua/spec/infobox_shop_merch_spec.lua | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lua/spec/infobox_shop_merch_spec.lua b/lua/spec/infobox_shop_merch_spec.lua
index ef60c0e58d0..7959e3a2711 100644
--- a/lua/spec/infobox_shop_merch_spec.lua
+++ b/lua/spec/infobox_shop_merch_spec.lua
@@ -2,7 +2,7 @@ local ShopMerch = require('Module:Widget/Infobox/ShopMerch')
 
 local function render(args)
 	local widget = ShopMerch{args = args}
-	local rendered = widget:render()
+	local rendered = tostring(widget)
 	return rendered and mw.text.jsonEncode(rendered) or nil
 end
 

From 2d6e031266c4ffd4b00818e4f564714436e06f12 Mon Sep 17 00:00:00 2001
From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com>
Date: Mon, 11 May 2026 16:04:08 +0900
Subject: [PATCH 28/36] kick class anno

---
 lua/wikis/commons/Widget/Basic/Button.lua             | 1 -
 lua/wikis/commons/Widget/Basic/Carousel.lua           | 1 -
 lua/wikis/commons/Widget/Basic/Dropdown/Container.lua | 1 -
 lua/wikis/commons/Widget/Basic/Dropdown/Item.lua      | 1 -
 lua/wikis/commons/Widget/Image/Icon/Image.lua         | 1 -
 5 files changed, 5 deletions(-)

diff --git a/lua/wikis/commons/Widget/Basic/Button.lua b/lua/wikis/commons/Widget/Basic/Button.lua
index 7b28d8ba994..284cae4d9cd 100644
--- a/lua/wikis/commons/Widget/Basic/Button.lua
+++ b/lua/wikis/commons/Widget/Basic/Button.lua
@@ -25,7 +25,6 @@ local Div = Html.Div
 ---@field grow boolean?
 ---@field aligncontent 'left'|'right'|nil
 
----@class ButtonWidget
 local Button = {}
 Button.defaultProps = {
 	linktype = 'internal',
diff --git a/lua/wikis/commons/Widget/Basic/Carousel.lua b/lua/wikis/commons/Widget/Basic/Carousel.lua
index 87ccf87c2f9..5e5086f76bb 100644
--- a/lua/wikis/commons/Widget/Basic/Carousel.lua
+++ b/lua/wikis/commons/Widget/Basic/Carousel.lua
@@ -24,7 +24,6 @@ local Span = Html.Span
 ---@field classes string[]?
 ---@field css table?
 
----@class CarouselWidget
 local Carousel = {}
 Carousel.defaultProps = {
 	itemWidth = '200px',
diff --git a/lua/wikis/commons/Widget/Basic/Dropdown/Container.lua b/lua/wikis/commons/Widget/Basic/Dropdown/Container.lua
index 1c87166cad1..18086a18d3a 100644
--- a/lua/wikis/commons/Widget/Basic/Dropdown/Container.lua
+++ b/lua/wikis/commons/Widget/Basic/Dropdown/Container.lua
@@ -36,7 +36,6 @@ local VARIANT_CONFIG = {
 ---@field prefix Renderable|Renderable[]?
 ---@field label Renderable|Renderable[]?
 
----@class DropdownContainerWidget
 local DropdownContainer = {}
 DropdownContainer.defaultProps = {
 	variant = 'form',
diff --git a/lua/wikis/commons/Widget/Basic/Dropdown/Item.lua b/lua/wikis/commons/Widget/Basic/Dropdown/Item.lua
index c549d059321..562ac89e25d 100644
--- a/lua/wikis/commons/Widget/Basic/Dropdown/Item.lua
+++ b/lua/wikis/commons/Widget/Basic/Dropdown/Item.lua
@@ -22,7 +22,6 @@ local WidgetUtil = Lua.import('Module:Widget/Util')
 ---@field classes string[]?
 ---@field attributes table?
 
----@class DropdownItemWidget
 local DropdownItem = {}
 DropdownItem.defaultProps = {
 	linktype = 'internal',
diff --git a/lua/wikis/commons/Widget/Image/Icon/Image.lua b/lua/wikis/commons/Widget/Image/Icon/Image.lua
index 959abd9acd9..93fcc874668 100644
--- a/lua/wikis/commons/Widget/Image/Icon/Image.lua
+++ b/lua/wikis/commons/Widget/Image/Icon/Image.lua
@@ -25,7 +25,6 @@ local Component = Lua.import('Module:Widget/Component')
 ---@field verticalAlignment 'baseline'|'sub'|'super'|'top'|'text-top'|'middle'|'bottom'|'text-bottom'?
 ---@field caption string?
 
----@class IconImageWidget
 local Icon = {}
 Icon.defaultProps = {
 	link = '',

From 262e00165b9bbfa34c99c2958a978cc4b68bbd5e Mon Sep 17 00:00:00 2001
From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com>
Date: Mon, 11 May 2026 16:06:50 +0900
Subject: [PATCH 29/36] revert rendering in test

---
 lua/spec/infobox_shop_merch_spec.lua | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lua/spec/infobox_shop_merch_spec.lua b/lua/spec/infobox_shop_merch_spec.lua
index 7959e3a2711..ef60c0e58d0 100644
--- a/lua/spec/infobox_shop_merch_spec.lua
+++ b/lua/spec/infobox_shop_merch_spec.lua
@@ -2,7 +2,7 @@ local ShopMerch = require('Module:Widget/Infobox/ShopMerch')
 
 local function render(args)
 	local widget = ShopMerch{args = args}
-	local rendered = tostring(widget)
+	local rendered = widget:render()
 	return rendered and mw.text.jsonEncode(rendered) or nil
 end
 

From 82af789c45d0edf7ff54a7eb2f03eb869b3a9422 Mon Sep 17 00:00:00 2001
From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com>
Date: Mon, 11 May 2026 16:22:45 +0900
Subject: [PATCH 30/36] attempt 2

---
 lua/spec/infobox_shop_merch_spec.lua | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/lua/spec/infobox_shop_merch_spec.lua b/lua/spec/infobox_shop_merch_spec.lua
index ef60c0e58d0..53fb8296d3e 100644
--- a/lua/spec/infobox_shop_merch_spec.lua
+++ b/lua/spec/infobox_shop_merch_spec.lua
@@ -3,7 +3,15 @@ local ShopMerch = require('Module:Widget/Infobox/ShopMerch')
 local function render(args)
 	local widget = ShopMerch{args = args}
 	local rendered = widget:render()
-	return rendered and mw.text.jsonEncode(rendered) or nil
+	if not rendered then
+		return
+	end
+	for i in ipairs(rendered) do
+		if type(rendered[i]) == 'function' then
+			rendered[i] = tostring(rendered[i])
+		end
+	end
+	return mw.text.jsonEncode(rendered)
 end
 
 describe('Infobox/ShopMerch', function()

From ebf8fa30e9f8f4c4d8439267f5a416d4289c4bc2 Mon Sep 17 00:00:00 2001
From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com>
Date: Mon, 11 May 2026 16:23:18 +0900
Subject: [PATCH 31/36] cast non-nil

---
 lua/spec/infobox_shop_merch_spec.lua | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/lua/spec/infobox_shop_merch_spec.lua b/lua/spec/infobox_shop_merch_spec.lua
index 53fb8296d3e..41d44df9e61 100644
--- a/lua/spec/infobox_shop_merch_spec.lua
+++ b/lua/spec/infobox_shop_merch_spec.lua
@@ -45,12 +45,14 @@ describe('Infobox/ShopMerch', function()
 	it('uses default shop url when shoplink=true', function()
 		local output = render{shoplink = 'true'}
 		assert.is_not_nil(output)
+		---@cast output -nil
 		assert.is_truthy(output:find('https://links.liquipedia.net/tlstore', 1, true))
 	end)
 
 	it('strips leading slashes from slugs', function()
 		local output = render{shoplink = '/test'}
 		assert.is_not_nil(output)
+		---@cast output -nil
 		assert.is_truthy(output:find('https://links.liquipedia.net/test', 1, true))
 
 		local output2 = render{shoplink = '///test'}
@@ -69,6 +71,7 @@ describe('Infobox/ShopMerch', function()
 		-- 'ö' is 2 bytes in Lua, but %C3%B6 is 6 chars in URL
 		local output = render{shoplink = 'töst'}
 		assert.is_not_nil(output)
+		---@cast output -nil
 		assert.is_truthy(output:find('https://links.liquipedia.net/t%C3%B6st', 1, true))
 	end)
 

From bc96e743f73dcc5e20eb38aca268831b5f75a62e Mon Sep 17 00:00:00 2001
From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com>
Date: Mon, 11 May 2026 16:40:37 +0900
Subject: [PATCH 32/36] attempt 3

---
 lua/spec/infobox_shop_merch_spec.lua | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/lua/spec/infobox_shop_merch_spec.lua b/lua/spec/infobox_shop_merch_spec.lua
index 41d44df9e61..deb21f33049 100644
--- a/lua/spec/infobox_shop_merch_spec.lua
+++ b/lua/spec/infobox_shop_merch_spec.lua
@@ -7,9 +7,7 @@ local function render(args)
 		return
 	end
 	for i in ipairs(rendered) do
-		if type(rendered[i]) == 'function' then
-			rendered[i] = tostring(rendered[i])
-		end
+		rendered[i] = tostring(rendered[i])
 	end
 	return mw.text.jsonEncode(rendered)
 end
@@ -100,4 +98,4 @@ describe('Infobox/ShopMerch', function()
 		local expanding_slug = string.rep('ö', 500)
 		assert.has_error(function() render{shoplink = expanding_slug} end)
 	end)
-end)
\ No newline at end of file
+end)

From 5b5a9508536f97bdb906690065984300fba62ef4 Mon Sep 17 00:00:00 2001
From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com>
Date: Mon, 11 May 2026 18:48:57 +0900
Subject: [PATCH 33/36] suggestion from feedback

---
 lua/wikis/commons/Widget/Basic/Button.lua            |  7 +++----
 lua/wikis/commons/Widget/Basic/Carousel.lua          |  7 +++----
 .../commons/Widget/Basic/Dropdown/Container.lua      |  7 +++----
 lua/wikis/commons/Widget/Basic/Dropdown/Item.lua     | 11 +++++------
 lua/wikis/commons/Widget/Basic/Link.lua              | 12 +++++-------
 5 files changed, 19 insertions(+), 25 deletions(-)

diff --git a/lua/wikis/commons/Widget/Basic/Button.lua b/lua/wikis/commons/Widget/Basic/Button.lua
index 284cae4d9cd..8ee5411c2f1 100644
--- a/lua/wikis/commons/Widget/Basic/Button.lua
+++ b/lua/wikis/commons/Widget/Basic/Button.lua
@@ -25,8 +25,7 @@ local Div = Html.Div
 ---@field grow boolean?
 ---@field aligncontent 'left'|'right'|nil
 
-local Button = {}
-Button.defaultProps = {
+local defaultProps = {
 	linktype = 'internal',
 	variant = 'primary',
 	size = 'md',
@@ -36,7 +35,7 @@ Button.defaultProps = {
 
 ---@param props ButtonWidgetParameters
 ---@return HtmlNode
-function Button.render(props)
+local function Button(props)
 	--- MW Parser does not allowed the <button> tag, so we use a <div>
 	local cssClasses = {'btn'}
 	if props.variant == 'primary' then
@@ -99,4 +98,4 @@ function Button.render(props)
 	}
 end
 
-return Component.component(Button.render, Button.defaultProps)
+return Component.component(Button, defaultProps)
diff --git a/lua/wikis/commons/Widget/Basic/Carousel.lua b/lua/wikis/commons/Widget/Basic/Carousel.lua
index 5e5086f76bb..00c2fd54847 100644
--- a/lua/wikis/commons/Widget/Basic/Carousel.lua
+++ b/lua/wikis/commons/Widget/Basic/Carousel.lua
@@ -24,15 +24,14 @@ local Span = Html.Span
 ---@field classes string[]?
 ---@field css table?
 
-local Carousel = {}
-Carousel.defaultProps = {
+local defaultProps = {
 	itemWidth = '200px',
 	gap = '0.5rem',
 }
 
 ---@param props CarouselWidgetParameters
 ---@return HtmlNode
-function Carousel.render(props)
+local function Carousel(props)
 	assert(props.children, 'Carousel: children is required')
 	assert(Array.isArray(props.children), 'Carousel: children must be an array')
 
@@ -93,4 +92,4 @@ function Carousel.render(props)
 	}
 end
 
-return Component.component(Carousel.render, Carousel.defaultProps)
+return Component.component(Carousel, defaultProps)
diff --git a/lua/wikis/commons/Widget/Basic/Dropdown/Container.lua b/lua/wikis/commons/Widget/Basic/Dropdown/Container.lua
index 18086a18d3a..410b44d14f4 100644
--- a/lua/wikis/commons/Widget/Basic/Dropdown/Container.lua
+++ b/lua/wikis/commons/Widget/Basic/Dropdown/Container.lua
@@ -36,14 +36,13 @@ local VARIANT_CONFIG = {
 ---@field prefix Renderable|Renderable[]?
 ---@field label Renderable|Renderable[]?
 
-local DropdownContainer = {}
-DropdownContainer.defaultProps = {
+local defaultProps = {
 	variant = 'form',
 }
 
 ---@param props DropdownContainerWidgetParameters
 ---@return HtmlNode?
-function DropdownContainer.render(props)
+local function DropdownContainer(props)
 	if Logic.isEmpty(props.children) then
 		return nil
 	end
@@ -91,4 +90,4 @@ function DropdownContainer.render(props)
 	}
 end
 
-return Component.component(DropdownContainer.render, DropdownContainer.defaultProps)
+return Component.component(DropdownContainer, defaultProps)
diff --git a/lua/wikis/commons/Widget/Basic/Dropdown/Item.lua b/lua/wikis/commons/Widget/Basic/Dropdown/Item.lua
index 562ac89e25d..ee2140f05fe 100644
--- a/lua/wikis/commons/Widget/Basic/Dropdown/Item.lua
+++ b/lua/wikis/commons/Widget/Basic/Dropdown/Item.lua
@@ -17,19 +17,18 @@ local Link = Lua.import('Module:Widget/Basic/Link')
 local Icon = Lua.import('Module:Widget/Image/Icon/Fontawesome')
 local WidgetUtil = Lua.import('Module:Widget/Util')
 
----@class DropdownItemWidgetParameters: LinkWidgetParameters
+---@class DropdownItemProps: LinkComponentProps
 ---@field icon string|Widget?
 ---@field classes string[]?
 ---@field attributes table?
 
-local DropdownItem = {}
-DropdownItem.defaultProps = {
+local defaultProps = {
 	linktype = 'internal',
 }
 
----@param props DropdownItemWidgetParameters
+---@param props DropdownItemProps
 ---@return HtmlNode
-function DropdownItem.render(props)
+local function DropdownItem(props)
 	local icon = Logic.isNotEmpty(props.icon) and
 		(type(props.icon) == 'string' and Icon{iconName = props.icon --[[@as string]], size = 'sm'} or props.icon)
 		or nil
@@ -57,4 +56,4 @@ function DropdownItem.render(props)
 	}
 end
 
-return Component.component(DropdownItem.render, DropdownItem.defaultProps)
+return Component.component(DropdownItem, defaultProps)
diff --git a/lua/wikis/commons/Widget/Basic/Link.lua b/lua/wikis/commons/Widget/Basic/Link.lua
index 5933fc0ff9e..4f7e322b66f 100644
--- a/lua/wikis/commons/Widget/Basic/Link.lua
+++ b/lua/wikis/commons/Widget/Basic/Link.lua
@@ -10,20 +10,18 @@ local Lua = require('Module:Lua')
 local Component = Lua.import('Module:Widget/Component')
 local WidgetUtil = Lua.import('Module:Widget/Util')
 
----@class LinkWidgetParameters
+---@class LinkComponentProps
 ---@field children? Renderable|Renderable[]
 ---@field link? string
 ---@field linktype? 'internal'|'external'
 
----@class LinkWidget
-local Link = {}
-Link.defaultProps = {
+local defaultProps = {
 	linktype = 'internal',
 }
 
----@param props LinkWidgetParameters
+---@param props LinkComponentProps
 ---@return Renderable[]?
-function Link.render(props)
+local function Link(props)
 	if not props.link then
 		return
 	end
@@ -46,4 +44,4 @@ function Link.render(props)
 	)
 end
 
-return Component.component(Link.render, Link.defaultProps)
+return Component.component(Link, defaultProps)

From a87bcea03d00f9cb9d817488df27f3c5f0fdf13b Mon Sep 17 00:00:00 2001
From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com>
Date: Mon, 11 May 2026 18:53:05 +0900
Subject: [PATCH 34/36] adjust access

---
 lua/wikis/commons/Widget/Component.lua | 1 -
 1 file changed, 1 deletion(-)

diff --git a/lua/wikis/commons/Widget/Component.lua b/lua/wikis/commons/Widget/Component.lua
index dce063a8a27..d4011d1e67d 100644
--- a/lua/wikis/commons/Widget/Component.lua
+++ b/lua/wikis/commons/Widget/Component.lua
@@ -79,7 +79,6 @@ local function isSingleNode(node)
 end
 
 -- Component Definitions
----@package
 ComponentCore.ComponentMT = {
 	__call = function(self, props)
 		props = props or {}

From 538f3c29d7ca8fc8544ae030501d270ce6bf210c Mon Sep 17 00:00:00 2001
From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com>
Date: Mon, 11 May 2026 21:12:55 +0900
Subject: [PATCH 35/36] fix link widget misbehaving

---
 lua/wikis/commons/Widget/Basic/Link.lua | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/lua/wikis/commons/Widget/Basic/Link.lua b/lua/wikis/commons/Widget/Basic/Link.lua
index 4f7e322b66f..654d4985fdf 100644
--- a/lua/wikis/commons/Widget/Basic/Link.lua
+++ b/lua/wikis/commons/Widget/Basic/Link.lua
@@ -7,6 +7,8 @@
 
 local Lua = require('Module:Lua')
 
+local Logic = Lua.import('Module:Logic')
+
 local Component = Lua.import('Module:Widget/Component')
 local WidgetUtil = Lua.import('Module:Widget/Util')
 
@@ -22,7 +24,7 @@ local defaultProps = {
 ---@param props LinkComponentProps
 ---@return Renderable[]?
 local function Link(props)
-	if not props.link then
+	if Logic.isEmpty(props.link) then
 		return
 	end
 	if props.linktype == 'external' then
@@ -39,7 +41,7 @@ local function Link(props)
 		'[[',
 		props.link,
 		'|',
-		props.children or props.link,
+		Logic.emptyOr(props.children, props.link),
 		']]'
 	)
 end

From d171364dad6ff94cb169347f22f050bb28e8bc7c Mon Sep 17 00:00:00 2001
From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com>
Date: Thu, 14 May 2026 16:20:12 +0900
Subject: [PATCH 36/36] restore widget2 version of button

---
 lua/wikis/commons/Widget/Basic/Button.lua | 65 ++++++++++++-----------
 1 file changed, 34 insertions(+), 31 deletions(-)

diff --git a/lua/wikis/commons/Widget/Basic/Button.lua b/lua/wikis/commons/Widget/Basic/Button.lua
index 8ee5411c2f1..e12a02018ec 100644
--- a/lua/wikis/commons/Widget/Basic/Button.lua
+++ b/lua/wikis/commons/Widget/Basic/Button.lua
@@ -8,24 +8,28 @@
 local Lua = require('Module:Lua')
 
 local Array = Lua.import('Module:Array')
+local Class = Lua.import('Module:Class')
 local Logic = Lua.import('Module:Logic')
 local Table = Lua.import('Module:Table')
 
-local Component = Lua.import('Module:Widget/Component')
-local Html = Lua.import('Module:Widget/Html')
+local Widget = Lua.import('Module:Widget')
+local HtmlWidgets = Lua.import('Module:Widget/Html/All')
 local Link = Lua.import('Module:Widget/Basic/Link')
-local Div = Html.Div
+local Div = HtmlWidgets.Div
 
----@class ButtonWidgetParameters: HtmlNodeProps
+---@class ButtonWidgetParameters
 ---@field title string?
 ---@field link string?
 ---@field linktype 'internal'|'external'|nil
----@field variant 'primary'|'secondary'|'themed'|'ghost'|'destructive'|'icon'|nil
+---@field variant 'primary'|'secondary'|'themed'|'ghost'|'destructive'|nil
 ---@field size 'xs'|'sm'|'md'|'lg'|nil
 ---@field grow boolean?
 ---@field aligncontent 'left'|'right'|nil
 
-local defaultProps = {
+---@class ButtonWidget: Widget
+---@operator call(ButtonWidgetParameters): ButtonWidget
+local Button = Class.new(Widget)
+Button.defaultProps = {
 	linktype = 'internal',
 	variant = 'primary',
 	size = 'md',
@@ -33,69 +37,68 @@ local defaultProps = {
 	aligncontent = nil,
 }
 
----@param props ButtonWidgetParameters
----@return HtmlNode
-local function Button(props)
+---@return Widget
+function Button:render()
 	--- MW Parser does not allowed the <button> tag, so we use a <div>
 	local cssClasses = {'btn'}
-	if props.variant == 'primary' then
+	if self.props.variant == 'primary' then
 		table.insert(cssClasses, 'btn-primary')
-	elseif props.variant == 'secondary' then
+	elseif self.props.variant == 'secondary' then
 		table.insert(cssClasses, 'btn-secondary')
-	elseif props.variant == 'themed' then
+	elseif self.props.variant == 'themed' then
 		table.insert(cssClasses, 'btn-themed')
-	elseif props.variant == 'ghost' then
+	elseif self.props.variant == 'ghost' then
 		table.insert(cssClasses, 'btn-ghost')
-	elseif props.variant == 'destructive' then
+	elseif self.props.variant == 'destructive' then
 		table.insert(cssClasses, 'btn-destructive')
 	end
 
-	if props.size == 'xs' then
+	if self.props.size == 'xs' then
 		table.insert(cssClasses, 'btn-extrasmall')
-	elseif props.size == 'sm' then
+	elseif self.props.size == 'sm' then
 		table.insert(cssClasses, 'btn-small')
-	elseif props.size == 'lg' then
+	elseif self.props.size == 'lg' then
 		table.insert(cssClasses, 'btn-large')
 	end
 
 	local cssTable = {}
-	if props.grow then
+	if self.props.grow then
 		cssTable.width = '100%'
 	end
-	if props.aligncontent == 'left' then
+	if self.props.aligncontent == 'left' then
 		cssTable['justify-content'] = 'left'
-	elseif props.aligncontent == 'right' then
+	elseif self.props.aligncontent == 'right' then
 		cssTable['justify-content'] = 'right'
 	end
 
 	local button = Div{
 		css = Logic.nilIfEmpty(cssTable),
-		classes = Array.extend(cssClasses, props.classes or {}),
+		classes = Array.extend(cssClasses, self.props.classes or {}),
 		attributes = Table.merge({
-			title = props.title,
-			['aria-label'] = props.title,
+			title = self.props.title,
+			['aria-label'] = self.props.title,
 			role = 'button',
 			tabindex = '0',
-		}, props.attributes or {}),
-		children = props.children,
+		}, self.props.attributes or {}),
+		children = self.props.children,
 	}
 
-	if not props.link then
+	if not self.props.link then
 		return button
 	end
 
 	-- Have to wrap it in an extra div to prevent the mediawiki parser from messing it up
 	return Div{
-		css = props.grow and {flex = '1'} or nil,
-		classes = props.classes or {},
+		css = self.props.grow and {flex = '1'} or nil,
+		classes = self.props.classes or {},
 		children = {
 			Link{
-				link = props.link,
-				linktype = props.linktype,
+				link = self.props.link,
+				linktype = self.props.linktype,
 				children = {button},
 			}
 		}
 	}
 end
 
-return Component.component(Button, defaultProps)
+return Button