src/components/CompositeWidget.ts

@@ -0,0 +1,30 @@
+// components/MergedWidget.ts
+import { Widget } from './Widget';
+
+export class MergedWidget extends Widget {
+    private children: Widget[] = [];
+
+    constructor(sizeType: 'default' | 'icon' = 'default') {
+        super(sizeType);
+    }
+
+    addWidget(widget: Widget): void {
+        this.children.push(widget);
+    }
+
+    render(): HTMLElement {
+        // Clear current container contents (in case render is called more than once)
+        this.container.innerHTML = '';
+
+        for (const widget of this.children) {
+            const rendered = widget.render();
+
+            // Move child nodes (not the container itself)
+            while (rendered.firstChild) {
+                this.container.appendChild(rendered.firstChild);
+            }
+        }
+
+        return this.container;
+    }
+}

src/style.css

@@ -59,7 +59,7 @@ body {
 }
 
 .widget-header {
-    font-size: 24px;
+    font-size: 18px;
     margin-bottom: 10px;
     font-weight: bold;
 }