diff --git a/demo/demo.ts b/demo/demo.ts
index 6491721..c1f2b53 100644
--- a/demo/demo.ts
+++ b/demo/demo.ts
@@ -1,22 +1,21 @@
 import type {
   ConfigureAppPayload,
-  CortiEmbeddedAPI,
   Fact,
   InteractionDetails,
   CreateInteractionPayload,
   SessionConfig,
   GetStatusResponse,
   KeycloakTokenResponse,
-} from '../src/types';
+} from '../dist';
 
 interface CortiEmbeddedEventDetail {
   name: string;
   payload: unknown;
 }
 
-// Get the component with proper typing
-const component = document.getElementById('corti-component') as HTMLElement &
-  CortiEmbeddedAPI;
+// Get the component with proper typing — querySelector('corti-embedded') is
+// automatically typed as CortiEmbeddedElement via HTMLElementTagNameMap
+const component = document.querySelector('corti-embedded')
 
 // Define log entry types
 type LogType = 'info' | 'success' | 'error' | 'warning';
@@ -508,7 +507,7 @@ customElements.whenDefined('corti-embedded').then(() => {
   updateStatus();
   addLogEntry('Corti component loaded and ready', 'success');
 
-  component.addEventListener('embedded-event', (event: Event) => {
+  component?.addEventListener('embedded-event', (event: Event) => {
     const { detail } = event as CustomEvent<CortiEmbeddedEventDetail>;
     addLogEntry(
       `[EMBEDDED-EVENT] - ${detail.name}: ${JSON.stringify(detail.payload)}`,
diff --git a/demo/react-demo.tsx b/demo/react-demo.tsx
index 5361735..4fabec4 100644
--- a/demo/react-demo.tsx
+++ b/demo/react-demo.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useRef, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 import {
-  type AuthCredentials,
+  type KeycloakTokenResponse,
   type CortiEmbeddedEventDetail,
   type ConfigureAppPayload,
   CortiEmbeddedReact,
@@ -185,7 +185,7 @@ function CortiEmbeddedDemo() {
 
   const handleAuth = async () => {
     try {
-      const payload = JSON.parse(authPayload) as AuthCredentials;
+      const payload = JSON.parse(authPayload) as KeycloakTokenResponse;
       addLogEntry(
         `Sending authentication request with payload: ${JSON.stringify(payload)}`,
         'info',
diff --git a/package.json b/package.json
index 332e68a..d21a273 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
   "module": "dist/web-bundle.js",
   "exports": {
     ".": {
-      "types": "./dist/web-bundle.d.ts",
+      "types": "./dist/web-index.d.ts",
       "import": "./dist/web-bundle.js",
       "browser": "./dist/web-bundle.js",
       "default": "./dist/web-bundle.js"
diff --git a/src/types/api.ts b/src/types/api.ts
index 6339d5f..51b6c8a 100644
--- a/src/types/api.ts
+++ b/src/types/api.ts
@@ -94,13 +94,6 @@ export interface CortiEmbeddedWindowAPI {
   v1: CortiEmbeddedV1API;
 }
 
-// Extend Window interface
-declare global {
-  interface Window {
-    CortiEmbedded?: CortiEmbeddedWindowAPI;
-  }
-}
-
 /**
  * Event listener function type
  */
@@ -195,3 +188,22 @@ export interface CortiEmbeddedAPI {
    */
   hide(): void;
 }
+
+/**
+ * Type representing the corti-embedded custom element in the DOM.
+ * When this package is installed, tag-name based APIs like
+ * document.querySelector('corti-embedded') and document.createElement('corti-embedded')
+ * are automatically typed via HTMLElementTagNameMap. Other lookups such as getElementById
+ * still return HTMLElement | null and require a cast or narrowing to CortiEmbeddedElement.
+ */
+export type CortiEmbeddedElement = HTMLElement & CortiEmbeddedAPI;
+
+// Extend Window interface
+declare global {
+  interface Window {
+    CortiEmbedded?: CortiEmbeddedWindowAPI;
+  }
+  interface HTMLElementTagNameMap {
+    'corti-embedded': CortiEmbeddedElement;
+  }
+}