diff --git a/.gitignore b/.gitignore
index 862d03e0..c1f34122 100644
--- a/.gitignore
+++ b/.gitignore
@@ -75,3 +75,7 @@ test-results/
 playwright-report/
 blob-report/
 playwright/.cache/
+
+# Web components metadata
+packages/web-components/components-metadata.json
+packages/web-components/custom-elements.json
diff --git a/docs/components/[component].paths.ts b/docs/components/[component].paths.ts
index 6d603f8a..5fa372ff 100644
--- a/docs/components/[component].paths.ts
+++ b/docs/components/[component].paths.ts
@@ -16,8 +16,7 @@ export default {
 
     const docsDir = path.resolve(dirname, "..");
     const workspaceDir = path.join(docsDir, "..");
-    const distDir = path.join(workspaceDir, "dist");
-    const metadataFile = path.join(distDir, "components-metadata.json");
+    const metadataFile = path.join(workspaceDir, "packages/web-components/components-metadata.json");
 
     const metadata = JSON.parse(
       fs.readFileSync(metadataFile).toString(),
diff --git a/docs/sidebar.ts b/docs/sidebar.ts
index efbbf26f..919a700c 100644
--- a/docs/sidebar.ts
+++ b/docs/sidebar.ts
@@ -7,8 +7,7 @@ import { type Metadata } from "../types/docs.ts";
 const { dirname } = getFileMeta(import.meta.url);
 
 const workspaceDir = path.join(dirname, "..");
-const distDir = path.join(workspaceDir, "dist");
-const metadataFile = path.join(distDir, "components-metadata.json");
+const metadataFile = path.join(workspaceDir, "packages/web-components/components-metadata.json");
 
 const getSidebarItems = (): DefaultTheme.Sidebar => {
   return (
diff --git a/package.json b/package.json
index 6b2432cf..8eb68dd7 100644
--- a/package.json
+++ b/package.json
@@ -37,11 +37,10 @@
     "docs:vitepress:dev": "pnpm --filter docs run dev",
     "docs:vitepress:build": "pnpm --filter docs run build",
     "docs:vitepress:preview": "pnpm --filter docs run preview",
-    "docs:dev": "run-s analyze docs:gen:metadata docs:vitepress:dev",
-    "docs:build": "run-s analyze docs:gen:metadata docs:vitepress:build",
+    "docs:dev": "run-s gen:metadata docs:vitepress:dev",
+    "docs:build": "run-s gen:metadata docs:vitepress:build",
     "docs:preview": "run-s docs:vitepress:preview",
-    "docs:gen:metadata": "tsx ./scripts/generate-docs-metadata.ts",
-    "analyze": "tsx ./scripts/generate-cem.ts"
+    "gen:metadata": "pnpm --filter @tapsioss/web-components run gen:metadata"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.10.2",
diff --git a/packages/react-components/scripts/generate.ts b/packages/react-components/scripts/generate.ts
index 5517ca91..cc654f55 100644
--- a/packages/react-components/scripts/generate.ts
+++ b/packages/react-components/scripts/generate.ts
@@ -1,5 +1,4 @@
 /* eslint-disable no-console */
-import type { Package } from "custom-elements-manifest";
 import Mustache from "mustache";
 import { exec } from "node:child_process";
 import * as fs from "node:fs";
@@ -10,39 +9,76 @@ import { chain } from "stream-chain";
 import Parser from "stream-json/Parser";
 import StreamValues from "stream-json/streamers/StreamValues";
 import { fileExists, getFileMeta } from "../../../scripts/utils.ts";
+import { type Component, type Metadata } from "../../../types/docs.ts";
 
 const asyncExec = promisify(exec);
 
+const COMPONENT_NAMESPACE = "ComponentNamespace";
+const LIT_REACT_NAMESPACE = "LitReact";
+
 const { dirname } = getFileMeta(import.meta.url);
 
 const packageDir = path.resolve(dirname, "..");
-const workspaceDir = path.resolve(packageDir, "../../");
 const srcDir = path.join(packageDir, "src");
 const templatesDir = path.join(packageDir, "templates");
-const webComponentsSrcDir = path.join(
-  workspaceDir,
-  "packages/web-components/src",
-);
 
 const barrelFilePath = path.join(srcDir, "index.ts");
-const cemGeneratorPath = path.join(workspaceDir, "scripts/generate-cem.ts");
+
 const componentTemplatePath = path.join(templatesDir, "component.txt");
-const cemPath = path.join(workspaceDir, "dist/custom-elements.json");
+const metadataPath = path.resolve(packageDir, "../web-components/components-metadata.json");
 
 const START_COMMENT = "/* START: AUTO-GENERATED [DO_NOT_REMOVE] */";
 const END_COMMENT = "/* END: AUTO-GENERATED [DO_NOT_REMOVE] */";
 
-const generateImports = (
-  elementClass: string,
-  moduleResolutionRegistryPath: string,
-) => {
+const getComponentImports = (component: Component) => {
   return [
-    `import { createComponent } from "@lit/react";`,
+    `import * as ${LIT_REACT_NAMESPACE} from "@lit/react";`,
     `import * as React from "react";`,
-    `import { ${elementClass} } from "${moduleResolutionRegistryPath}";`,
+    `import * as ${COMPONENT_NAMESPACE} from "${component.importPaths.webComponents}";`,
   ].join("\n");
 };
 
+const getComponentCode = async (component: Component): Promise<string> => {
+  const componentTemplateStr = await fs.promises.readFile(
+    componentTemplatePath,
+    { encoding: "utf-8" },
+  );
+
+  const events = `{ ${
+    component.events
+      ?.map(event => {
+        const eventName = event.name;
+        const eventClass = event.type.text;
+
+        const eventNameInReact = [
+          `on`,
+          String(eventName).charAt(0).toUpperCase() +
+            String(eventName).slice(1),
+        ].join("");
+
+        if (eventClass === "Event") {
+          return null;
+        }
+
+        return `${eventNameInReact}: '${eventName}' as ${LIT_REACT_NAMESPACE}.EventName<${COMPONENT_NAMESPACE}.${eventClass}>`;
+      })
+      .filter(event => event !== null)
+      .join(",") || ""
+  } }`;
+
+  return Mustache.render(
+    componentTemplateStr,
+    {
+      componentName: component.name.replace("Tapsi", ""),
+      elementTag: component.tagName,
+      elementClass: `${COMPONENT_NAMESPACE}.${component.name}`,
+      events,
+    },
+    {},
+    { escape: v => v as string },
+  );
+};
+
 const generateExports = (componentName: string) => {
   return [
     `const ${componentName} = __${componentName};\n`,
@@ -50,105 +86,39 @@ const generateExports = (componentName: string) => {
   ].join("\n");
 };
 
-type ComponentData = Array<{
-  webComponentResolutionPath: string;
-  elementTag: string;
-  elementClassName: string;
-  componentName: string;
-  componentCode: string;
-}>;
-
-const transformToCEM = new Transform({
+const transformToComponentsMetadata = new Transform({
   objectMode: true,
   transform(
     chunk: {
       key: PropertyKey;
-      value: Package;
+      value: Metadata;
     },
     _,
     callback,
   ) {
-    callback(null, chunk.value);
-  },
-});
-
-const transformToComponentData = new Transform({
-  objectMode: true,
-  async transform(chunk: Package, _, callback) {
-    const streamData: ComponentData = [];
-
-    for (const module of chunk.modules) {
-      if (module.kind !== "javascript-module") continue;
-
-      const moduleSrc = module.path;
-      const moduleDir = path.dirname(moduleSrc);
-      const relativePath = path.relative(webComponentsSrcDir, moduleDir);
-
-      const ceDefinitions = (module.exports ?? []).filter(
-        ex => ex.kind === "custom-element-definition",
-      );
-
-      if (ceDefinitions.length === 0) {
-        console.error(`No "custom-element-definition" found for ${moduleSrc}.`);
-
-        continue;
-      }
-
-      const webComponentResolutionPath = `@tapsioss/web-components/${relativePath}`;
-
-      for (const ceDefinition of ceDefinitions) {
-        const elementTag = ceDefinition.name;
-        const elementClassName = ceDefinition.declaration.name;
-        const componentName = elementClassName.replace("Tapsi", "");
-
-        const componentTemplateStr = await fs.promises.readFile(
-          componentTemplatePath,
-          { encoding: "utf-8" },
-        );
-
-        const componentCode = Mustache.render(
-          componentTemplateStr,
-          {
-            componentName,
-            elementTag,
-            elementClass: elementClassName,
-            events: JSON.stringify({}, null, 2),
-          },
-          {},
-          { escape: v => v as string },
-        );
-
-        streamData.push({
-          webComponentResolutionPath,
-          elementTag,
-          elementClassName,
-          componentName,
-          componentCode,
-        });
-      }
-    }
-
-    callback(null, streamData);
+    callback(null, chunk.value.components);
   },
 });
 
 const transformToComponentModule = new Transform({
   objectMode: true,
-  async transform(chunk: ComponentData, _, callback) {
+  async transform(chunk: Component[], _, callback) {
     for (const component of chunk) {
-      const {
-        componentCode,
-        componentName,
-        elementClassName,
-        webComponentResolutionPath,
-      } = component;
+      const componentName = component.name.replace("Tapsi", "");
 
       const modulePath = path.join(srcDir, `${componentName}.ts`);
       const moduleExists = fileExists(modulePath);
 
+      const componentCode = await getComponentCode(component);
+
       if (moduleExists) {
         const tempModulePath = path.join(srcDir, `${componentName}.temp.ts`);
 
+        const readModule = fs.createReadStream(modulePath, {
+          encoding: "utf-8",
+          autoClose: true,
+        });
+
         const injectComponentCode = new Transform({
           transform(chunk: Buffer, _, callback) {
             const lines = chunk.toString("utf-8").split("\n");
@@ -178,11 +148,6 @@ const transformToComponentModule = new Transform({
           },
         });
 
-        const readModule = fs.createReadStream(modulePath, {
-          encoding: "utf-8",
-          autoClose: true,
-        });
-
         const writeToTemp = fs.createWriteStream(tempModulePath, {
           encoding: "utf-8",
           flags: "w",
@@ -197,7 +162,7 @@ const transformToComponentModule = new Transform({
           });
       } else {
         const moduleContent = [
-          generateImports(elementClassName, webComponentResolutionPath),
+          getComponentImports(component),
           "\n",
           START_COMMENT,
           componentCode,
@@ -233,7 +198,7 @@ const transformToComponentModule = new Transform({
 void (async () => {
   console.time("generate");
   const { stdout, stderr } = await asyncExec(
-    ["tsx", cemGeneratorPath].join(" "),
+    "pnpm --filter @tapsioss/web-components run gen:metadata",
   );
 
   if (stderr) console.error(stderr);
@@ -243,7 +208,7 @@ void (async () => {
 
   if (fileExists(barrelFilePath)) await fs.promises.rm(barrelFilePath);
 
-  fs.createReadStream(cemPath, {
+  fs.createReadStream(metadataPath, {
     autoClose: true,
     encoding: "utf-8",
   })
@@ -251,8 +216,7 @@ void (async () => {
       chain([
         Parser.make(),
         StreamValues.make(),
-        transformToCEM,
-        transformToComponentData,
+        transformToComponentsMetadata,
         transformToComponentModule,
       ] as const),
     )
diff --git a/packages/react-components/src/Avatar.ts b/packages/react-components/src/Avatar.ts
index 7861c5e5..633a65e8 100644
--- a/packages/react-components/src/Avatar.ts
+++ b/packages/react-components/src/Avatar.ts
@@ -1,14 +1,15 @@
-import { createComponent } from "@lit/react";
-import { TapsiAvatar } from "@tapsioss/web-components/avatar";
+import * as LitReact from "@lit/react";
+import * as ComponentNamespace from "@tapsioss/web-components/avatar";
 import * as React from "react";
 
 /* START: AUTO-GENERATED [DO_NOT_REMOVE] */
-const __Avatar = createComponent({
+const __Avatar = LitReact.createComponent({
   tagName: "tapsi-avatar",
-  elementClass: TapsiAvatar,
+  elementClass: ComponentNamespace.TapsiAvatar,
   react: React,
   events: {},
 });
+
 /* END: AUTO-GENERATED [DO_NOT_REMOVE] */
 
 const Avatar = __Avatar;
diff --git a/packages/react-components/src/Badge.ts b/packages/react-components/src/Badge.ts
index 0582b013..8edf6649 100644
--- a/packages/react-components/src/Badge.ts
+++ b/packages/react-components/src/Badge.ts
@@ -1,14 +1,15 @@
-import { createComponent } from "@lit/react";
-import { TapsiBadge } from "@tapsioss/web-components/badge";
+import * as LitReact from "@lit/react";
+import * as ComponentNamespace from "@tapsioss/web-components/badge";
 import * as React from "react";
 
 /* START: AUTO-GENERATED [DO_NOT_REMOVE] */
-const __Badge = createComponent({
+const __Badge = LitReact.createComponent({
   tagName: "tapsi-badge",
-  elementClass: TapsiBadge,
+  elementClass: ComponentNamespace.TapsiBadge,
   react: React,
   events: {},
 });
+
 /* END: AUTO-GENERATED [DO_NOT_REMOVE] */
 
 const Badge = __Badge;
diff --git a/packages/react-components/src/BadgeWrapper.ts b/packages/react-components/src/BadgeWrapper.ts
index 81932538..237abea9 100644
--- a/packages/react-components/src/BadgeWrapper.ts
+++ b/packages/react-components/src/BadgeWrapper.ts
@@ -1,14 +1,15 @@
-import { createComponent } from "@lit/react";
-import { TapsiBadgeWrapper } from "@tapsioss/web-components/badge-wrapper";
+import * as LitReact from "@lit/react";
+import * as ComponentNamespace from "@tapsioss/web-components/badge-wrapper";
 import * as React from "react";
 
 /* START: AUTO-GENERATED [DO_NOT_REMOVE] */
-const __BadgeWrapper = createComponent({
+const __BadgeWrapper = LitReact.createComponent({
   tagName: "tapsi-badge-wrapper",
-  elementClass: TapsiBadgeWrapper,
+  elementClass: ComponentNamespace.TapsiBadgeWrapper,
   react: React,
   events: {},
 });
+
 /* END: AUTO-GENERATED [DO_NOT_REMOVE] */
 
 const BadgeWrapper = __BadgeWrapper;
diff --git a/packages/react-components/src/Banner.ts b/packages/react-components/src/Banner.ts
index 278a768d..579220f5 100644
--- a/packages/react-components/src/Banner.ts
+++ b/packages/react-components/src/Banner.ts
@@ -1,14 +1,15 @@
-import { createComponent } from "@lit/react";
-import { TapsiBanner } from "@tapsioss/web-components/banner";
+import * as LitReact from "@lit/react";
+import * as ComponentNamespace from "@tapsioss/web-components/banner";
 import * as React from "react";
 
 /* START: AUTO-GENERATED [DO_NOT_REMOVE] */
-const __Banner = createComponent({
+const __Banner = LitReact.createComponent({
   tagName: "tapsi-banner",
-  elementClass: TapsiBanner,
+  elementClass: ComponentNamespace.TapsiBanner,
   react: React,
   events: {},
 });
+
 /* END: AUTO-GENERATED [DO_NOT_REMOVE] */
 
 const Banner = __Banner;
diff --git a/packages/react-components/src/BottomNavigation.ts b/packages/react-components/src/BottomNavigation.ts
index 9d596fdd..36c4d886 100644
--- a/packages/react-components/src/BottomNavigation.ts
+++ b/packages/react-components/src/BottomNavigation.ts
@@ -1,14 +1,18 @@
-import { createComponent } from "@lit/react";
-import { TapsiBottomNavigation } from "@tapsioss/web-components/bottom-navigation";
+import * as LitReact from "@lit/react";
+import * as ComponentNamespace from "@tapsioss/web-components/bottom-navigation";
 import * as React from "react";
 
 /* START: AUTO-GENERATED [DO_NOT_REMOVE] */
-const __BottomNavigation = createComponent({
+const __BottomNavigation = LitReact.createComponent({
   tagName: "tapsi-bottom-navigation",
-  elementClass: TapsiBottomNavigation,
+  elementClass: ComponentNamespace.TapsiBottomNavigation,
   react: React,
-  events: {},
+  events: {
+    onActivechange:
+      "activechange" as LitReact.EventName<ComponentNamespace.ActiveChangeEvent>,
+  },
 });
+
 /* END: AUTO-GENERATED [DO_NOT_REMOVE] */
 
 const BottomNavigation = __BottomNavigation;
diff --git a/packages/react-components/src/BottomNavigationItem.ts b/packages/react-components/src/BottomNavigationItem.ts
index 4ac5756d..d3e2e298 100644
--- a/packages/react-components/src/BottomNavigationItem.ts
+++ b/packages/react-components/src/BottomNavigationItem.ts
@@ -1,14 +1,15 @@
-import { createComponent } from "@lit/react";
-import { TapsiBottomNavigationItem } from "@tapsioss/web-components/bottom-navigation";
+import * as LitReact from "@lit/react";
+import * as ComponentNamespace from "@tapsioss/web-components/bottom-navigation";
 import * as React from "react";
 
 /* START: AUTO-GENERATED [DO_NOT_REMOVE] */
-const __BottomNavigationItem = createComponent({
+const __BottomNavigationItem = LitReact.createComponent({
   tagName: "tapsi-bottom-navigation-item",
-  elementClass: TapsiBottomNavigationItem,
+  elementClass: ComponentNamespace.TapsiBottomNavigationItem,
   react: React,
   events: {},
 });
+
 /* END: AUTO-GENERATED [DO_NOT_REMOVE] */
 
 const BottomNavigationItem = __BottomNavigationItem;
diff --git a/packages/react-components/src/BottomSheet.ts b/packages/react-components/src/BottomSheet.ts
index d0048e26..fb2d8ae2 100644
--- a/packages/react-components/src/BottomSheet.ts
+++ b/packages/react-components/src/BottomSheet.ts
@@ -1,14 +1,23 @@
-import { createComponent } from "@lit/react";
-import { TapsiBottomSheet } from "@tapsioss/web-components/bottom-sheet";
+import * as LitReact from "@lit/react";
+import * as ComponentNamespace from "@tapsioss/web-components/bottom-sheet";
 import * as React from "react";
 
 /* START: AUTO-GENERATED [DO_NOT_REMOVE] */
-const __BottomSheet = createComponent({
+const __BottomSheet = LitReact.createComponent({
   tagName: "tapsi-bottom-sheet",
-  elementClass: TapsiBottomSheet,
+  elementClass: ComponentNamespace.TapsiBottomSheet,
   react: React,
-  events: {},
+  events: {
+    onSnapped: "snapped" as LitReact.EventName<ComponentNamespace.SnappedEvent>,
+    onOpening: "opening" as LitReact.EventName<ComponentNamespace.OpeningEvent>,
+    onClosing: "closing" as LitReact.EventName<ComponentNamespace.ClosingEvent>,
+    onOpened: "opened" as LitReact.EventName<ComponentNamespace.OpenedEvent>,
+    onClosed: "closed" as LitReact.EventName<ComponentNamespace.ClosedEvent>,
+    onHide: "hide" as LitReact.EventName<ComponentNamespace.HideEvent>,
+    onShow: "show" as LitReact.EventName<ComponentNamespace.ShowEvent>,
+  },
 });
+
 /* END: AUTO-GENERATED [DO_NOT_REMOVE] */
 
 const BottomSheet = __BottomSheet;
diff --git a/packages/react-components/src/Button.ts b/packages/react-components/src/Button.ts
index 1b52014a..d2531a8c 100644
--- a/packages/react-components/src/Button.ts
+++ b/packages/react-components/src/Button.ts
@@ -1,14 +1,15 @@
-import { createComponent } from "@lit/react";
-import { TapsiButton } from "@tapsioss/web-components/button/standard";
+import * as LitReact from "@lit/react";
+import * as ComponentNamespace from "@tapsioss/web-components/button/standard";
 import * as React from "react";
 
 /* START: AUTO-GENERATED [DO_NOT_REMOVE] */
-const __Button = createComponent({
+const __Button = LitReact.createComponent({
   tagName: "tapsi-button",
-  elementClass: TapsiButton,
+  elementClass: ComponentNamespace.TapsiButton,
   react: React,
   events: {},
 });
+
 /* END: AUTO-GENERATED [DO_NOT_REMOVE] */
 
 const Button = __Button;
diff --git a/packages/react-components/src/ButtonGroup.ts b/packages/react-components/src/ButtonGroup.ts
index a10f622e..5cc5f6ed 100644
--- a/packages/react-components/src/ButtonGroup.ts
+++ b/packages/react-components/src/ButtonGroup.ts
@@ -1,14 +1,15 @@
-import { createComponent } from "@lit/react";
-import { TapsiButtonGroup } from "@tapsioss/web-components/button-group";
+import * as LitReact from "@lit/react";
+import * as ComponentNamespace from "@tapsioss/web-components/button-group";
 import * as React from "react";
 
 /* START: AUTO-GENERATED [DO_NOT_REMOVE] */
-const __ButtonGroup = createComponent({
+const __ButtonGroup = LitReact.createComponent({
   tagName: "tapsi-button-group",
-  elementClass: TapsiButtonGroup,
+  elementClass: ComponentNamespace.TapsiButtonGroup,
   react: React,
   events: {},
 });
+
 /* END: AUTO-GENERATED [DO_NOT_REMOVE] */
 
 const ButtonGroup = __ButtonGroup;
diff --git a/packages/react-components/src/ChatBubbleIn.ts b/packages/react-components/src/ChatBubbleIn.ts
index a72c32e2..f1ad3a04 100644
--- a/packages/react-components/src/ChatBubbleIn.ts
+++ b/packages/react-components/src/ChatBubbleIn.ts
@@ -1,14 +1,15 @@
-import { createComponent } from "@lit/react";
-import { TapsiChatBubbleIn } from "@tapsioss/web-components/chat-bubble/in";
+import * as LitReact from "@lit/react";
+import * as ComponentNamespace from "@tapsioss/web-components/chat-bubble/in";
 import * as React from "react";
 
 /* START: AUTO-GENERATED [DO_NOT_REMOVE] */
-const __ChatBubbleIn = createComponent({
+const __ChatBubbleIn = LitReact.createComponent({
   tagName: "tapsi-chat-bubble-in",
-  elementClass: TapsiChatBubbleIn,
+  elementClass: ComponentNamespace.TapsiChatBubbleIn,
   react: React,
   events: {},
 });
+
 /* END: AUTO-GENERATED [DO_NOT_REMOVE] */
 
 const ChatBubbleIn = __ChatBubbleIn;
diff --git a/packages/react-components/src/ChatBubbleOut.ts b/packages/react-components/src/ChatBubbleOut.ts
index ea5580cf..c29f538f 100644
--- a/packages/react-components/src/ChatBubbleOut.ts
+++ b/packages/react-components/src/ChatBubbleOut.ts
@@ -1,14 +1,15 @@
-import { createComponent } from "@lit/react";
-import { TapsiChatBubbleOut } from "@tapsioss/web-components/chat-bubble/out";
+import * as LitReact from "@lit/react";
+import * as ComponentNamespace from "@tapsioss/web-components/chat-bubble/out";
 import * as React from "react";
 
 /* START: AUTO-GENERATED [DO_NOT_REMOVE] */
-const __ChatBubbleOut = createComponent({
+const __ChatBubbleOut = LitReact.createComponent({
   tagName: "tapsi-chat-bubble-out",
-  elementClass: TapsiChatBubbleOut,
+  elementClass: ComponentNamespace.TapsiChatBubbleOut,
   react: React,
   events: {},
 });
+
 /* END: AUTO-GENERATED [DO_NOT_REMOVE] */
 
 const ChatBubbleOut = __ChatBubbleOut;
diff --git a/packages/react-components/src/Checkbox.ts b/packages/react-components/src/Checkbox.ts
index c730a468..4ffae6cb 100644
--- a/packages/react-components/src/Checkbox.ts
+++ b/packages/react-components/src/Checkbox.ts
@@ -1,14 +1,15 @@
-import { createComponent } from "@lit/react";
-import { TapsiCheckbox } from "@tapsioss/web-components/checkbox";
+import * as LitReact from "@lit/react";
+import * as ComponentNamespace from "@tapsioss/web-components/checkbox";
 import * as React from "react";
 
 /* START: AUTO-GENERATED [DO_NOT_REMOVE] */
-const __Checkbox = createComponent({
+const __Checkbox = LitReact.createComponent({
   tagName: "tapsi-checkbox",
-  elementClass: TapsiCheckbox,
+  elementClass: ComponentNamespace.TapsiCheckbox,
   react: React,
   events: {},
 });
+
 /* END: AUTO-GENERATED [DO_NOT_REMOVE] */
 
 const Checkbox = __Checkbox;
diff --git a/packages/react-components/src/Chip.ts b/packages/react-components/src/Chip.ts
index b398f6d3..f3e961f4 100644
--- a/packages/react-components/src/Chip.ts
+++ b/packages/react-components/src/Chip.ts
@@ -1,14 +1,19 @@
-import { createComponent } from "@lit/react";
-import { TapsiChip } from "@tapsioss/web-components/chip";
+import * as LitReact from "@lit/react";
+import * as ComponentNamespace from "@tapsioss/web-components/chip";
 import * as React from "react";
 
 /* START: AUTO-GENERATED [DO_NOT_REMOVE] */
-const __Chip = createComponent({
+const __Chip = LitReact.createComponent({
   tagName: "tapsi-chip",
-  elementClass: TapsiChip,
+  elementClass: ComponentNamespace.TapsiChip,
   react: React,
-  events: {},
+  events: {
+    onSelect: "select" as LitReact.EventName<ComponentNamespace.SelectEvent>,
+    onDeselect:
+      "deselect" as LitReact.EventName<ComponentNamespace.DeselectEvent>,
+  },
 });
+
 /* END: AUTO-GENERATED [DO_NOT_REMOVE] */
 
 const Chip = __Chip;
diff --git a/packages/react-components/src/ChipGroup.ts b/packages/react-components/src/ChipGroup.ts
index df9dd222..51731bee 100644
--- a/packages/react-components/src/ChipGroup.ts
+++ b/packages/react-components/src/ChipGroup.ts
@@ -1,14 +1,18 @@
-import { createComponent } from "@lit/react";
-import { TapsiChipGroup } from "@tapsioss/web-components/chip-group";
+import * as LitReact from "@lit/react";
+import * as ComponentNamespace from "@tapsioss/web-components/chip-group";
 import * as React from "react";
 
 /* START: AUTO-GENERATED [DO_NOT_REMOVE] */
-const __ChipGroup = createComponent({
+const __ChipGroup = LitReact.createComponent({
   tagName: "tapsi-chip-group",
-  elementClass: TapsiChipGroup,
+  elementClass: ComponentNamespace.TapsiChipGroup,
   react: React,
-  events: {},
+  events: {
+    onSelectchange:
+      "selectchange" as LitReact.EventName<ComponentNamespace.SelectChangeEvent>,
+  },
 });
+
 /* END: AUTO-GENERATED [DO_NOT_REMOVE] */
 
 const ChipGroup = __ChipGroup;
diff --git a/packages/react-components/src/Divider.ts b/packages/react-components/src/Divider.ts
index 85756baa..e23bcbe4 100644
--- a/packages/react-components/src/Divider.ts
+++ b/packages/react-components/src/Divider.ts
@@ -1,14 +1,15 @@
-import { createComponent } from "@lit/react";
-import { TapsiDivider } from "@tapsioss/web-components/divider";
+import * as LitReact from "@lit/react";
+import * as ComponentNamespace from "@tapsioss/web-components/divider";
 import * as React from "react";
 
 /* START: AUTO-GENERATED [DO_NOT_REMOVE] */
-const __Divider = createComponent({
+const __Divider = LitReact.createComponent({
   tagName: "tapsi-divider",
-  elementClass: TapsiDivider,
+  elementClass: ComponentNamespace.TapsiDivider,
   react: React,
   events: {},
 });
+
 /* END: AUTO-GENERATED [DO_NOT_REMOVE] */
 
 const Divider = __Divider;
diff --git a/packages/react-components/src/EmptyState.ts b/packages/react-components/src/EmptyState.ts
index 36799605..02ce3317 100644
--- a/packages/react-components/src/EmptyState.ts
+++ b/packages/react-components/src/EmptyState.ts
@@ -1,14 +1,15 @@
-import { createComponent } from "@lit/react";
-import { TapsiEmptyState } from "@tapsioss/web-components/empty-state";
+import * as LitReact from "@lit/react";
+import * as ComponentNamespace from "@tapsioss/web-components/empty-state";
 import * as React from "react";
 
 /* START: AUTO-GENERATED [DO_NOT_REMOVE] */
-const __EmptyState = createComponent({
+const __EmptyState = LitReact.createComponent({
   tagName: "tapsi-empty-state",
-  elementClass: TapsiEmptyState,
+  elementClass: ComponentNamespace.TapsiEmptyState,
   react: React,
   events: {},
 });
+
 /* END: AUTO-GENERATED [DO_NOT_REMOVE] */
 
 const EmptyState = __EmptyState;
diff --git a/packages/react-components/src/FileInput.ts b/packages/react-components/src/FileInput.ts
index d5f5bdbe..6b6ce17a 100644
--- a/packages/react-components/src/FileInput.ts
+++ b/packages/react-components/src/FileInput.ts
@@ -1,14 +1,17 @@
-import { createComponent } from "@lit/react";
-import { TapsiFileInput } from "@tapsioss/web-components/file-input";
+import * as LitReact from "@lit/react";
+import * as ComponentNamespace from "@tapsioss/web-components/file-input";
 import * as React from "react";
 
 /* START: AUTO-GENERATED [DO_NOT_REMOVE] */
-const __FileInput = createComponent({
+const __FileInput = LitReact.createComponent({
   tagName: "tapsi-file-input",
-  elementClass: TapsiFileInput,
+  elementClass: ComponentNamespace.TapsiFileInput,
   react: React,
-  events: {},
+  events: {
+    onRetry: "retry" as LitReact.EventName<ComponentNamespace.RetryEvent>,
+  },
 });
+
 /* END: AUTO-GENERATED [DO_NOT_REMOVE] */
 
 const FileInput = __FileInput;
diff --git a/packages/react-components/src/IconButton.ts b/packages/react-components/src/IconButton.ts
index 301bbd7a..efb8ee25 100644
--- a/packages/react-components/src/IconButton.ts
+++ b/packages/react-components/src/IconButton.ts
@@ -1,14 +1,15 @@
-import { createComponent } from "@lit/react";
-import { TapsiIconButton } from "@tapsioss/web-components/button/icon-button";
+import * as LitReact from "@lit/react";
+import * as ComponentNamespace from "@tapsioss/web-components/button/icon-button";
 import * as React from "react";
 
 /* START: AUTO-GENERATED [DO_NOT_REMOVE] */
-const __IconButton = createComponent({
+const __IconButton = LitReact.createComponent({
   tagName: "tapsi-icon-button",
-  elementClass: TapsiIconButton,
+  elementClass: ComponentNamespace.TapsiIconButton,
   react: React,
   events: {},
 });
+
 /* END: AUTO-GENERATED [DO_NOT_REMOVE] */
 
 const IconButton = __IconButton;
diff --git a/packages/react-components/src/Modal.ts b/packages/react-components/src/Modal.ts
index 59a2c808..808ffdbb 100644
--- a/packages/react-components/src/Modal.ts
+++ b/packages/react-components/src/Modal.ts
@@ -1,14 +1,18 @@
-import { createComponent } from "@lit/react";
-import { TapsiModal } from "@tapsioss/web-components/modal";
+import * as LitReact from "@lit/react";
+import * as ComponentNamespace from "@tapsioss/web-components/modal";
 import * as React from "react";
 
 /* START: AUTO-GENERATED [DO_NOT_REMOVE] */
-const __Modal = createComponent({
+const __Modal = LitReact.createComponent({
   tagName: "tapsi-modal",
-  elementClass: TapsiModal,
+  elementClass: ComponentNamespace.TapsiModal,
   react: React,
-  events: {},
+  events: {
+    onShow: "show" as LitReact.EventName<ComponentNamespace.ShowEvent>,
+    onHide: "hide" as LitReact.EventName<ComponentNamespace.HideEvent>,
+  },
 });
+
 /* END: AUTO-GENERATED [DO_NOT_REMOVE] */
 
 const Modal = __Modal;
diff --git a/packages/react-components/src/Notice.ts b/packages/react-components/src/Notice.ts
index 1714a05b..3124b841 100644
--- a/packages/react-components/src/Notice.ts
+++ b/packages/react-components/src/Notice.ts
@@ -1,14 +1,18 @@
-import { createComponent } from "@lit/react";
-import { TapsiNotice } from "@tapsioss/web-components/notice";
+import * as LitReact from "@lit/react";
+import * as ComponentNamespace from "@tapsioss/web-components/notice";
 import * as React from "react";
 
 /* START: AUTO-GENERATED [DO_NOT_REMOVE] */
-const __Notice = createComponent({
+const __Notice = LitReact.createComponent({
   tagName: "tapsi-notice",
-  elementClass: TapsiNotice,
+  elementClass: ComponentNamespace.TapsiNotice,
   react: React,
-  events: {},
+  events: {
+    onShow: "show" as LitReact.EventName<ComponentNamespace.ShowEvent>,
+    onHide: "hide" as LitReact.EventName<ComponentNamespace.HideEvent>,
+  },
 });
+
 /* END: AUTO-GENERATED [DO_NOT_REMOVE] */
 
 const Notice = __Notice;
diff --git a/packages/react-components/src/PinInput.ts b/packages/react-components/src/PinInput.ts
index 95c170d1..e5cd6b4b 100644
--- a/packages/react-components/src/PinInput.ts
+++ b/packages/react-components/src/PinInput.ts
@@ -1,14 +1,18 @@
-import { createComponent } from "@lit/react";
-import { TapsiPinInput } from "@tapsioss/web-components/pin-input";
+import * as LitReact from "@lit/react";
+import * as ComponentNamespace from "@tapsioss/web-components/pin-input";
 import * as React from "react";
 
 /* START: AUTO-GENERATED [DO_NOT_REMOVE] */
-const __PinInput = createComponent({
+const __PinInput = LitReact.createComponent({
   tagName: "tapsi-pin-input",
-  elementClass: TapsiPinInput,
+  elementClass: ComponentNamespace.TapsiPinInput,
   react: React,
-  events: {},
+  events: {
+    onComplete:
+      "complete" as LitReact.EventName<ComponentNamespace.CompleteEvent>,
+  },
 });
+
 /* END: AUTO-GENERATED [DO_NOT_REMOVE] */
 
 const PinInput = __PinInput;
diff --git a/packages/react-components/src/Pinwheel.ts b/packages/react-components/src/Pinwheel.ts
index b159798f..754f85a8 100644
--- a/packages/react-components/src/Pinwheel.ts
+++ b/packages/react-components/src/Pinwheel.ts
@@ -1,14 +1,15 @@
-import { createComponent } from "@lit/react";
-import { TapsiPinwheel } from "@tapsioss/web-components/pinwheel";
+import * as LitReact from "@lit/react";
+import * as ComponentNamespace from "@tapsioss/web-components/pinwheel";
 import * as React from "react";
 
 /* START: AUTO-GENERATED [DO_NOT_REMOVE] */
-const __Pinwheel = createComponent({
+const __Pinwheel = LitReact.createComponent({
   tagName: "tapsi-pinwheel",
-  elementClass: TapsiPinwheel,
+  elementClass: ComponentNamespace.TapsiPinwheel,
   react: React,
   events: {},
 });
+
 /* END: AUTO-GENERATED [DO_NOT_REMOVE] */
 
 const Pinwheel = __Pinwheel;
diff --git a/packages/react-components/src/PinwheelGroup.ts b/packages/react-components/src/PinwheelGroup.ts
index a434e720..54caf9a7 100644
--- a/packages/react-components/src/PinwheelGroup.ts
+++ b/packages/react-components/src/PinwheelGroup.ts
@@ -1,14 +1,15 @@
-import { createComponent } from "@lit/react";
-import { TapsiPinwheelGroup } from "@tapsioss/web-components/pinwheel-group";
+import * as LitReact from "@lit/react";
+import * as ComponentNamespace from "@tapsioss/web-components/pinwheel-group";
 import * as React from "react";
 
 /* START: AUTO-GENERATED [DO_NOT_REMOVE] */
-const __PinwheelGroup = createComponent({
+const __PinwheelGroup = LitReact.createComponent({
   tagName: "tapsi-pinwheel-group",
-  elementClass: TapsiPinwheelGroup,
+  elementClass: ComponentNamespace.TapsiPinwheelGroup,
   react: React,
   events: {},
 });
+
 /* END: AUTO-GENERATED [DO_NOT_REMOVE] */
 
 const PinwheelGroup = __PinwheelGroup;
diff --git a/packages/react-components/src/PinwheelItem.ts b/packages/react-components/src/PinwheelItem.ts
index c16e9f40..94138ff0 100644
--- a/packages/react-components/src/PinwheelItem.ts
+++ b/packages/react-components/src/PinwheelItem.ts
@@ -1,14 +1,15 @@
-import { createComponent } from "@lit/react";
-import { TapsiPinwheelItem } from "@tapsioss/web-components/pinwheel";
+import * as LitReact from "@lit/react";
+import * as ComponentNamespace from "@tapsioss/web-components/pinwheel";
 import * as React from "react";
 
 /* START: AUTO-GENERATED [DO_NOT_REMOVE] */
-const __PinwheelItem = createComponent({
+const __PinwheelItem = LitReact.createComponent({
   tagName: "tapsi-pinwheel-item",
-  elementClass: TapsiPinwheelItem,
+  elementClass: ComponentNamespace.TapsiPinwheelItem,
   react: React,
   events: {},
 });
+
 /* END: AUTO-GENERATED [DO_NOT_REMOVE] */
 
 const PinwheelItem = __PinwheelItem;
diff --git a/packages/react-components/src/ProgressIndicator.ts b/packages/react-components/src/ProgressIndicator.ts
index 4c308b5f..3fd6770c 100644
--- a/packages/react-components/src/ProgressIndicator.ts
+++ b/packages/react-components/src/ProgressIndicator.ts
@@ -1,14 +1,15 @@
-import { createComponent } from "@lit/react";
-import { TapsiProgressIndicator } from "@tapsioss/web-components/progress-indicator";
+import * as LitReact from "@lit/react";
+import * as ComponentNamespace from "@tapsioss/web-components/progress-indicator";
 import * as React from "react";
 
 /* START: AUTO-GENERATED [DO_NOT_REMOVE] */
-const __ProgressIndicator = createComponent({
+const __ProgressIndicator = LitReact.createComponent({
   tagName: "tapsi-progress-indicator",
-  elementClass: TapsiProgressIndicator,
+  elementClass: ComponentNamespace.TapsiProgressIndicator,
   react: React,
   events: {},
 });
+
 /* END: AUTO-GENERATED [DO_NOT_REMOVE] */
 
 const ProgressIndicator = __ProgressIndicator;
diff --git a/packages/react-components/src/Radio.ts b/packages/react-components/src/Radio.ts
index 20c1dcec..2ab2b095 100644
--- a/packages/react-components/src/Radio.ts
+++ b/packages/react-components/src/Radio.ts
@@ -1,14 +1,15 @@
-import { createComponent } from "@lit/react";
-import { TapsiRadio } from "@tapsioss/web-components/radio";
+import * as LitReact from "@lit/react";
+import * as ComponentNamespace from "@tapsioss/web-components/radio";
 import * as React from "react";
 
 /* START: AUTO-GENERATED [DO_NOT_REMOVE] */
-const __Radio = createComponent({
+const __Radio = LitReact.createComponent({
   tagName: "tapsi-radio",
-  elementClass: TapsiRadio,
+  elementClass: ComponentNamespace.TapsiRadio,
   react: React,
   events: {},
 });
+
 /* END: AUTO-GENERATED [DO_NOT_REMOVE] */
 
 const Radio = __Radio;
diff --git a/packages/react-components/src/RateSlider.ts b/packages/react-components/src/RateSlider.ts
index 7042db13..110087c3 100644
--- a/packages/react-components/src/RateSlider.ts
+++ b/packages/react-components/src/RateSlider.ts
@@ -1,14 +1,15 @@
-import { createComponent } from "@lit/react";
-import { TapsiRateSlider } from "@tapsioss/web-components/rate-slider";
+import * as LitReact from "@lit/react";
+import * as ComponentNamespace from "@tapsioss/web-components/rate-slider";
 import * as React from "react";
 
 /* START: AUTO-GENERATED [DO_NOT_REMOVE] */
-const __RateSlider = createComponent({
+const __RateSlider = LitReact.createComponent({
   tagName: "tapsi-rate-slider",
-  elementClass: TapsiRateSlider,
+  elementClass: ComponentNamespace.TapsiRateSlider,
   react: React,
   events: {},
 });
+
 /* END: AUTO-GENERATED [DO_NOT_REMOVE] */
 
 const RateSlider = __RateSlider;
diff --git a/packages/react-components/src/SegmentedView.ts b/packages/react-components/src/SegmentedView.ts
index 56a70650..ac56d3e3 100644
--- a/packages/react-components/src/SegmentedView.ts
+++ b/packages/react-components/src/SegmentedView.ts
@@ -1,14 +1,18 @@
-import { createComponent } from "@lit/react";
-import { TapsiSegmentedView } from "@tapsioss/web-components/segmented-view";
+import * as LitReact from "@lit/react";
+import * as ComponentNamespace from "@tapsioss/web-components/segmented-view";
 import * as React from "react";
 
 /* START: AUTO-GENERATED [DO_NOT_REMOVE] */
-const __SegmentedView = createComponent({
+const __SegmentedView = LitReact.createComponent({
   tagName: "tapsi-segmented-view",
-  elementClass: TapsiSegmentedView,
+  elementClass: ComponentNamespace.TapsiSegmentedView,
   react: React,
-  events: {},
+  events: {
+    onActivechange:
+      "activechange" as LitReact.EventName<ComponentNamespace.ActiveChangeEvent>,
+  },
 });
+
 /* END: AUTO-GENERATED [DO_NOT_REMOVE] */
 
 const SegmentedView = __SegmentedView;
diff --git a/packages/react-components/src/SegmentedViewItem.ts b/packages/react-components/src/SegmentedViewItem.ts
index 328c0ab3..c2840717 100644
--- a/packages/react-components/src/SegmentedViewItem.ts
+++ b/packages/react-components/src/SegmentedViewItem.ts
@@ -1,14 +1,15 @@
-import { createComponent } from "@lit/react";
-import { TapsiSegmentedViewItem } from "@tapsioss/web-components/segmented-view";
+import * as LitReact from "@lit/react";
+import * as ComponentNamespace from "@tapsioss/web-components/segmented-view";
 import * as React from "react";
 
 /* START: AUTO-GENERATED [DO_NOT_REMOVE] */
-const __SegmentedViewItem = createComponent({
+const __SegmentedViewItem = LitReact.createComponent({
   tagName: "tapsi-segmented-view-item",
-  elementClass: TapsiSegmentedViewItem,
+  elementClass: ComponentNamespace.TapsiSegmentedViewItem,
   react: React,
   events: {},
 });
+
 /* END: AUTO-GENERATED [DO_NOT_REMOVE] */
 
 const SegmentedViewItem = __SegmentedViewItem;
diff --git a/packages/react-components/src/Skeleton.ts b/packages/react-components/src/Skeleton.ts
index a6fb6f81..6abf8239 100644
--- a/packages/react-components/src/Skeleton.ts
+++ b/packages/react-components/src/Skeleton.ts
@@ -1,14 +1,15 @@
-import { createComponent } from "@lit/react";
-import { TapsiSkeleton } from "@tapsioss/web-components/skeleton";
+import * as LitReact from "@lit/react";
+import * as ComponentNamespace from "@tapsioss/web-components/skeleton";
 import * as React from "react";
 
 /* START: AUTO-GENERATED [DO_NOT_REMOVE] */
-const __Skeleton = createComponent({
+const __Skeleton = LitReact.createComponent({
   tagName: "tapsi-skeleton",
-  elementClass: TapsiSkeleton,
+  elementClass: ComponentNamespace.TapsiSkeleton,
   react: React,
   events: {},
 });
+
 /* END: AUTO-GENERATED [DO_NOT_REMOVE] */
 
 const Skeleton = __Skeleton;
diff --git a/packages/react-components/src/Snackbar.ts b/packages/react-components/src/Snackbar.ts
index e6c719bc..3bd2240a 100644
--- a/packages/react-components/src/Snackbar.ts
+++ b/packages/react-components/src/Snackbar.ts
@@ -1,14 +1,18 @@
-import { createComponent } from "@lit/react";
-import { TapsiSnackbar } from "@tapsioss/web-components/snackbar";
+import * as LitReact from "@lit/react";
+import * as ComponentNamespace from "@tapsioss/web-components/snackbar";
 import * as React from "react";
 
 /* START: AUTO-GENERATED [DO_NOT_REMOVE] */
-const __Snackbar = createComponent({
+const __Snackbar = LitReact.createComponent({
   tagName: "tapsi-snackbar",
-  elementClass: TapsiSnackbar,
+  elementClass: ComponentNamespace.TapsiSnackbar,
   react: React,
-  events: {},
+  events: {
+    onShow: "show" as LitReact.EventName<ComponentNamespace.ShowEvent>,
+    onHide: "hide" as LitReact.EventName<ComponentNamespace.HideEvent>,
+  },
 });
+
 /* END: AUTO-GENERATED [DO_NOT_REMOVE] */
 
 const Snackbar = __Snackbar;
diff --git a/packages/react-components/src/Spinner.ts b/packages/react-components/src/Spinner.ts
index 82bfcafb..257e7c5b 100644
--- a/packages/react-components/src/Spinner.ts
+++ b/packages/react-components/src/Spinner.ts
@@ -1,14 +1,15 @@
-import { createComponent } from "@lit/react";
-import { TapsiSpinner } from "@tapsioss/web-components/spinner";
+import * as LitReact from "@lit/react";
+import * as ComponentNamespace from "@tapsioss/web-components/spinner";
 import * as React from "react";
 
 /* START: AUTO-GENERATED [DO_NOT_REMOVE] */
-const __Spinner = createComponent({
+const __Spinner = LitReact.createComponent({
   tagName: "tapsi-spinner",
-  elementClass: TapsiSpinner,
+  elementClass: ComponentNamespace.TapsiSpinner,
   react: React,
   events: {},
 });
+
 /* END: AUTO-GENERATED [DO_NOT_REMOVE] */
 
 const Spinner = __Spinner;
diff --git a/packages/react-components/src/Stepper.ts b/packages/react-components/src/Stepper.ts
index c069f603..2738ebe5 100644
--- a/packages/react-components/src/Stepper.ts
+++ b/packages/react-components/src/Stepper.ts
@@ -1,14 +1,15 @@
-import { createComponent } from "@lit/react";
-import { TapsiStepper } from "@tapsioss/web-components/stepper";
+import * as LitReact from "@lit/react";
+import * as ComponentNamespace from "@tapsioss/web-components/stepper";
 import * as React from "react";
 
 /* START: AUTO-GENERATED [DO_NOT_REMOVE] */
-const __Stepper = createComponent({
+const __Stepper = LitReact.createComponent({
   tagName: "tapsi-stepper",
-  elementClass: TapsiStepper,
+  elementClass: ComponentNamespace.TapsiStepper,
   react: React,
   events: {},
 });
+
 /* END: AUTO-GENERATED [DO_NOT_REMOVE] */
 
 const Stepper = __Stepper;
diff --git a/packages/react-components/src/Switch.ts b/packages/react-components/src/Switch.ts
index 1f763821..914faecb 100644
--- a/packages/react-components/src/Switch.ts
+++ b/packages/react-components/src/Switch.ts
@@ -1,14 +1,15 @@
-import { createComponent } from "@lit/react";
-import { TapsiSwitch } from "@tapsioss/web-components/switch";
+import * as LitReact from "@lit/react";
+import * as ComponentNamespace from "@tapsioss/web-components/switch";
 import * as React from "react";
 
 /* START: AUTO-GENERATED [DO_NOT_REMOVE] */
-const __Switch = createComponent({
+const __Switch = LitReact.createComponent({
   tagName: "tapsi-switch",
-  elementClass: TapsiSwitch,
+  elementClass: ComponentNamespace.TapsiSwitch,
   react: React,
   events: {},
 });
+
 /* END: AUTO-GENERATED [DO_NOT_REMOVE] */
 
 const Switch = __Switch;
diff --git a/packages/react-components/src/TextArea.ts b/packages/react-components/src/TextArea.ts
index a56433a7..c9da1b7c 100644
--- a/packages/react-components/src/TextArea.ts
+++ b/packages/react-components/src/TextArea.ts
@@ -1,14 +1,15 @@
-import { createComponent } from "@lit/react";
-import { TapsiTextArea } from "@tapsioss/web-components/text-area";
+import * as LitReact from "@lit/react";
+import * as ComponentNamespace from "@tapsioss/web-components/text-area";
 import * as React from "react";
 
 /* START: AUTO-GENERATED [DO_NOT_REMOVE] */
-const __TextArea = createComponent({
+const __TextArea = LitReact.createComponent({
   tagName: "tapsi-text-area",
-  elementClass: TapsiTextArea,
+  elementClass: ComponentNamespace.TapsiTextArea,
   react: React,
   events: {},
 });
+
 /* END: AUTO-GENERATED [DO_NOT_REMOVE] */
 
 const TextArea = __TextArea;
diff --git a/packages/react-components/src/TextField.ts b/packages/react-components/src/TextField.ts
index a7955f9a..9b1acb0a 100644
--- a/packages/react-components/src/TextField.ts
+++ b/packages/react-components/src/TextField.ts
@@ -1,14 +1,15 @@
-import { createComponent } from "@lit/react";
-import { TapsiTextField } from "@tapsioss/web-components/text-field";
+import * as LitReact from "@lit/react";
+import * as ComponentNamespace from "@tapsioss/web-components/text-field";
 import * as React from "react";
 
 /* START: AUTO-GENERATED [DO_NOT_REMOVE] */
-const __TextField = createComponent({
+const __TextField = LitReact.createComponent({
   tagName: "tapsi-text-field",
-  elementClass: TapsiTextField,
+  elementClass: ComponentNamespace.TapsiTextField,
   react: React,
   events: {},
 });
+
 /* END: AUTO-GENERATED [DO_NOT_REMOVE] */
 
 const TextField = __TextField;
diff --git a/packages/react-components/src/Tooltip.ts b/packages/react-components/src/Tooltip.ts
index a3ff4f85..7c789d86 100644
--- a/packages/react-components/src/Tooltip.ts
+++ b/packages/react-components/src/Tooltip.ts
@@ -1,14 +1,18 @@
-import { createComponent } from "@lit/react";
-import { TapsiTooltip } from "@tapsioss/web-components/tooltip";
+import * as LitReact from "@lit/react";
+import * as ComponentNamespace from "@tapsioss/web-components/tooltip";
 import * as React from "react";
 
 /* START: AUTO-GENERATED [DO_NOT_REMOVE] */
-const __Tooltip = createComponent({
+const __Tooltip = LitReact.createComponent({
   tagName: "tapsi-tooltip",
-  elementClass: TapsiTooltip,
+  elementClass: ComponentNamespace.TapsiTooltip,
   react: React,
-  events: {},
+  events: {
+    onShow: "show" as LitReact.EventName<ComponentNamespace.ShowEvent>,
+    onHide: "hide" as LitReact.EventName<ComponentNamespace.HideEvent>,
+  },
 });
+
 /* END: AUTO-GENERATED [DO_NOT_REMOVE] */
 
 const Tooltip = __Tooltip;
diff --git a/packages/react-components/templates/component.txt b/packages/react-components/templates/component.txt
index acb60aee..4cb3b3a0 100644
--- a/packages/react-components/templates/component.txt
+++ b/packages/react-components/templates/component.txt
@@ -1,6 +1,6 @@
-const __{{componentName}} = createComponent({
+const __{{componentName}} = LitReact.createComponent({
   tagName: "{{elementTag}}",
   elementClass: {{elementClass}},
   react: React,
   events: {{events}},
-});
\ No newline at end of file
+});
diff --git a/packages/web-components/package.json b/packages/web-components/package.json
index 72a3589f..6907f4ed 100644
--- a/packages/web-components/package.json
+++ b/packages/web-components/package.json
@@ -3,9 +3,8 @@
   "version": "0.8.0",
   "type": "module",
   "files": [
-    "./dist/**/*.js",
-    "./dist/**/*.d.ts",
-    "./dist/**/package.json"
+    "./dist",
+    "custom-elements.json"
   ],
   "exports": {
     "./*": {
@@ -16,11 +15,13 @@
   "scripts": {
     "clear": "shx rm -rf dist",
     "prebuild": "pnpm run clear",
-    "build": "tsc --project ./tsconfig.build.json",
+    "build": "run-p gen:metadata bulld:compile",
+    "bulld:compile": "tsc --project ./tsconfig.build.json",
     "predev": "pnpm run clear",
     "test": "playwright test",
     "dev": "tsc --watch --project ./tsconfig.dev.json",
-    "release": "pnpm publish . --tag latest --access public"
+    "release": "pnpm publish . --tag latest --access public",
+    "gen:metadata": "tsx scripts/generate-metadata.ts"
   },
   "dependencies": {
     "@floating-ui/dom": "^1.6.11",
@@ -30,5 +31,6 @@
   },
   "devDependencies": {
     "@internals/test-helpers": "workspace:*"
-  }
+  },
+  "customElements": "custom-elements.json"
 }
diff --git a/scripts/generate-docs-metadata.ts b/packages/web-components/scripts/generate-metadata.ts
similarity index 72%
rename from scripts/generate-docs-metadata.ts
rename to packages/web-components/scripts/generate-metadata.ts
index d9e1843d..e3664a83 100644
--- a/scripts/generate-docs-metadata.ts
+++ b/packages/web-components/scripts/generate-metadata.ts
@@ -4,36 +4,50 @@ import {
   type Declaration,
   type Package,
 } from "custom-elements-manifest";
+import { exec } from "node:child_process";
 import * as fs from "node:fs";
 import * as path from "node:path";
+import { promisify } from "node:util";
 import { type DefaultTheme } from "vitepress";
-import type { Component, ImportPaths } from "../types/docs.ts";
-import { getFileMeta } from "./utils.ts";
+import { getFileMeta } from "../../../scripts/utils.ts";
+import type { Component, ImportPaths, Metadata } from "../../../types/docs.ts";
 
-const { dirname } = getFileMeta(import.meta.url);
-const workspaceDir = path.resolve(dirname, "..");
-const webComponentsSrcDir = path.join(
-  workspaceDir,
-  "packages/web-components/src",
-);
-
-const workspaceDistDir = path.join(workspaceDir, "dist");
-const metadataFile = path.join(workspaceDistDir, "components-metadata.json");
-const cemFile = path.join(workspaceDistDir, "custom-elements.json");
+const asyncExec = promisify(exec);
 
-const cem = JSON.parse(fs.readFileSync(cemFile, "utf8")) as Package;
+const { dirname } = getFileMeta(import.meta.url);
+const packageDir = path.join(dirname, "..");
+const packageSrcDir = path.join(packageDir, "src");
+
+const metadataFile = path.join(packageDir, "components-metadata.json");
+
+const generateCem = async (): Promise<Package> => {
+  const globs: string[] = [
+    `${packageSrcDir}/**/index.ts`,
+    `${packageSrcDir}/**/*/index.ts`,
+    `!${packageSrcDir}/utils/**`,
+    `!${packageSrcDir}/internals/**`,
+  ];
+
+  const { stderr: cemAnalyzeStderr, stdout: cemAnalyzeStdout } =
+    await asyncExec(
+      [
+        "cem",
+        "analyze",
+        "--litelement",
+        "--packagejson",
+        globs.map(g => `--globs ${g}`).join(" "),
+      ].join(" "),
+    );
 
-const getKebabCaseComponentName = (component: Declaration) => {
-  if (!("tagName" in component) || !component.tagName) return null;
+  if (cemAnalyzeStdout) console.log(cemAnalyzeStdout);
+  if (cemAnalyzeStderr) console.error(cemAnalyzeStderr);
 
-  const tagName = component.tagName;
+  const cemFile = path.join(packageDir, "custom-elements.json");
 
-  return tagName.replace("tapsi-", "");
+  return JSON.parse(fs.readFileSync(cemFile, "utf8")) as Package;
 };
 
-void (() => {
-  console.log("🧩 generating docs metadata...");
-
+const generateMetadataFromCem = (cem: Package): Metadata => {
   const sidebarItemsMap: Record<string, DefaultTheme.SidebarItem> = {};
   const components: Component[] = [];
 
@@ -49,7 +63,7 @@ void (() => {
   filteredModules.forEach(module => {
     const moduleSrc = module.path;
     const moduleDir = path.dirname(moduleSrc);
-    const relativePath = path.relative(webComponentsSrcDir, moduleDir);
+    const relativePath = path.relative(packageSrcDir, moduleDir);
 
     if (!relativePath) return;
 
@@ -159,17 +173,27 @@ void (() => {
 
   const sidebarItems = [iconsSidebarItem, componentSidebarItems];
 
-  fs.writeFileSync(
-    metadataFile,
-    JSON.stringify(
-      {
-        components,
-        sidebarItems,
-      },
-      null,
-      2,
-    ),
-  );
+  return {
+    sidebarItems,
+    components,
+  };
+};
+
+const getKebabCaseComponentName = (component: Declaration) => {
+  if (!("tagName" in component) || !component.tagName) return null;
+
+  const tagName = component.tagName;
+
+  return tagName.replace("tapsi-", "");
+};
+
+void (async () => {
+  console.log("🧩 generating metadata...");
+
+  const cem = await generateCem();
+  const metadata = generateMetadataFromCem(cem);
+
+  fs.writeFileSync(metadataFile, JSON.stringify(metadata, null, 2));
 
   console.log("✅ docs metadata generated.");
 })();
diff --git a/packages/web-components/src/bottom-navigation/index.ts b/packages/web-components/src/bottom-navigation/index.ts
index a2293bde..5ec6aa70 100644
--- a/packages/web-components/src/bottom-navigation/index.ts
+++ b/packages/web-components/src/bottom-navigation/index.ts
@@ -2,11 +2,7 @@ import { customElement } from "lit/decorators.js";
 import bottomNavigationStyles from "./bottom-navigation.style.ts";
 import { BottomNavigation } from "./bottom-navigation.ts";
 import { type ActiveChangeEvent } from "./events.ts";
-import {
-  type ActivateEvent,
-  BottomNavigationItem,
-  Slots as ItemSlots,
-} from "./item/index.ts";
+import { BottomNavigationItem, Slots as ItemSlots } from "./item/index.ts";
 import itemStyles from "./item/item.style.ts";
 
 export { Slots } from "./constants.ts";
@@ -22,44 +18,12 @@ export { ItemSlots };
  * @slot icon - The slot for the icon element.
  * @slot - The default slot for the content/label.
  *
- * @fires {ActivateEvent} activate - Fired when the item activates (bubbles).
- *
  * @prop {boolean} [active=false] - Indicates whether the item is active or not.
  * @prop {string} [value=""] - The value associated with the item. This value has to be unique among sibling items.
  */
 @customElement("tapsi-bottom-navigation-item")
 export class TapsiBottomNavigationItem extends BottomNavigationItem {
   public static override readonly styles = [itemStyles];
-
-  /**
-   * @internal
-   */
-  declare addEventListener: <K extends keyof TapsiBottomNavigationItemEventMap>(
-    type: K,
-    listener: (
-      this: TapsiBottomNavigationItem,
-      ev: TapsiBottomNavigationItemEventMap[K],
-    ) => void,
-    options?: boolean | AddEventListenerOptions,
-  ) => void;
-
-  /**
-   * @internal
-   */
-  declare removeEventListener: <
-    K extends keyof TapsiBottomNavigationItemEventMap,
-  >(
-    type: K,
-    listener: (
-      this: TapsiBottomNavigationItem,
-      ev: TapsiBottomNavigationItemEventMap[K],
-    ) => void,
-    options?: boolean | EventListenerOptions,
-  ) => void;
-}
-
-interface TapsiBottomNavigationItemEventMap extends HTMLElementEventMap {
-  [ActivateEvent.type]: ActivateEvent;
 }
 
 /**
diff --git a/packages/web-components/src/segmented-view/index.ts b/packages/web-components/src/segmented-view/index.ts
index ebcda2af..efffa09c 100644
--- a/packages/web-components/src/segmented-view/index.ts
+++ b/packages/web-components/src/segmented-view/index.ts
@@ -1,10 +1,6 @@
 import { customElement } from "lit/decorators.js";
 import { type ActiveChangeEvent } from "./events.ts";
-import {
-  type ActivateEvent,
-  Slots as ItemSlots,
-  SegmentedViewItem,
-} from "./item/index.ts";
+import { Slots as ItemSlots, SegmentedViewItem } from "./item/index.ts";
 import itemStyles from "./item/item.style.ts";
 import segmentedViewStyles from "./segmented-view.style.ts";
 import { SegmentedView } from "./segmented-view.ts";
@@ -20,8 +16,6 @@ export { ItemSlots };
  *
  * @slot - The default slot for the content/label.
  *
- * @fires {ActivateEvent} activate - Fired when the item activates (bubbles).
- *
  * @prop {boolean} [active=false] - Indicates whether the item is active or not.
  * @prop {string} [value=""] - The value associated with the item. This value has to be unique among sibling items.
  * @prop {"sm" | "md"} [size="md"] - The size of the item.
@@ -36,34 +30,6 @@ export { ItemSlots };
 @customElement("tapsi-segmented-view-item")
 export class TapsiSegmentedViewItem extends SegmentedViewItem {
   public static override readonly styles = [itemStyles];
-
-  /**
-   * @internal
-   */
-  declare addEventListener: <K extends keyof TapsiSegmentedViewItemEventMap>(
-    type: K,
-    listener: (
-      this: TapsiSegmentedViewItem,
-      ev: TapsiSegmentedViewItemEventMap[K],
-    ) => void,
-    options?: boolean | AddEventListenerOptions,
-  ) => void;
-
-  /**
-   * @internal
-   */
-  declare removeEventListener: <K extends keyof TapsiSegmentedViewItemEventMap>(
-    type: K,
-    listener: (
-      this: TapsiSegmentedViewItem,
-      ev: TapsiSegmentedViewItemEventMap[K],
-    ) => void,
-    options?: boolean | EventListenerOptions,
-  ) => void;
-}
-
-interface TapsiSegmentedViewItemEventMap extends HTMLElementEventMap {
-  [ActivateEvent.type]: ActivateEvent;
 }
 
 /**
diff --git a/scripts/generate-cem.ts b/scripts/generate-cem.ts
deleted file mode 100644
index 9b75fe91..00000000
--- a/scripts/generate-cem.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-/* eslint-disable no-console */
-import { exec } from "node:child_process";
-import * as path from "node:path";
-import { cwd } from "node:process";
-import { promisify } from "node:util";
-import { getFileMeta } from "./utils.ts";
-
-const { dirname } = getFileMeta(import.meta.url);
-
-const workspaceDir = path.resolve(dirname, "..");
-const distDir = path.relative(cwd(), path.join(workspaceDir, "dist"));
-
-const entrypoint = path.resolve(workspaceDir, "./packages/web-components/src");
-
-const globs: string[] = [
-  `${entrypoint}/**/index.ts`,
-  `${entrypoint}/**/*/index.ts`,
-  `!${entrypoint}/utils/**`,
-  `!${entrypoint}/internals/**`,
-];
-
-void (async () => {
-  console.log("🧩 generating custom elements manifest...");
-
-  const asyncExec = promisify(exec);
-
-  await asyncExec(`shx rm -rf ${distDir}`);
-  await asyncExec(
-    [
-      "cem",
-      "analyze",
-      "--litelement",
-      "--outdir",
-      distDir,
-      globs.map(g => `--globs ${g}`).join(" "),
-    ].join(" "),
-  );
-
-  console.log("✅ custom elements manifest generated.");
-})();
-/* eslint-enable no-console */