diff --git a/.changeset/huge-mice-build.md b/.changeset/huge-mice-build.md
new file mode 100644
index 0000000000..b7479523a0
--- /dev/null
+++ b/.changeset/huge-mice-build.md
@@ -0,0 +1,4 @@
+---
+"@patternfly/pfe-tools": patch
+---
+**Dev Server**: load lightdom shim files
diff --git a/.changeset/legal-chairs-double.md b/.changeset/legal-chairs-double.md
new file mode 100644
index 0000000000..fc4f2d1a67
--- /dev/null
+++ b/.changeset/legal-chairs-double.md
@@ -0,0 +1,4 @@
+---
+"@patternfly/pfe-tools": patch
+---
+**Dev Server**: reload on typescript file changes
diff --git a/.changeset/shaky-cats-share.md b/.changeset/shaky-cats-share.md
new file mode 100644
index 0000000000..8d0fd49f18
--- /dev/null
+++ b/.changeset/shaky-cats-share.md
@@ -0,0 +1,4 @@
+---
+"@patternfly/create-element": patch
+---
+Element generator now generates demo files with inlined script and styles
diff --git a/elements/package.json b/elements/package.json
index 516c6b50fa..4110cfa127 100644
--- a/elements/package.json
+++ b/elements/package.json
@@ -126,6 +126,7 @@
     "Steven Spriggs <sspriggs@redhat.com",
     "castastrophe (https://github.com/castastrophe)",
     "Wes Ruvalcaba",
+    "Rohit Bharmal (https://github.com/Rohit2601)",
     "Ajinyka Shinde <sajinkya359@gmail.com>"
   ],
   "dependencies": {
diff --git a/elements/pf-text-area/docs/pf-text-area.md b/elements/pf-text-area/docs/pf-text-area.md
index 3c555f467b..a8f40467bb 100644
--- a/elements/pf-text-area/docs/pf-text-area.md
+++ b/elements/pf-text-area/docs/pf-text-area.md
@@ -2,7 +2,43 @@
   <pf-text-area></pf-text-area>
 {% endrenderOverview %}
 
-{% band header="Usage" %}{% endband %}
+{% band header="Usage" %}
+ ### Basic
+ {% htmlexample %}
+ <label for="text">Text Area : </label>
+ <pf-text-area id="text"></pf-text-area>
+ {% endhtmlexample %}
+
+ ### With Placeholder 
+  {% htmlexample %}
+  <label for="text">Text Area : </label>
+  <pf-text-area id="text" placeholder="placeholder"></pf-text-area>
+  {% endhtmlexample %}
+
+ ### Required 
+  {% htmlexample %}
+   <label for="text">Text Area : </label>
+   <pf-text-area id="text" placeholder="placeholder" required="true" ></pf-text-area>
+  {% endhtmlexample %}
+
+ ### Disabled state
+  {% htmlexample %}
+  <label for="text">Text Area : </label>
+  <pf-text-area id="text" placeholder="placeholder" disabled="true" ></pf-text-area>
+  {% endhtmlexample %}
+
+  ### Resize Vertical
+  {% htmlexample %}
+  <label for="text">Text Area : </label>
+  <pf-text-area id="text" placeholder="placeholder" resize='vertical'></pf-text-area>
+  {% endhtmlexample %}
+
+  ### Resize Horizontal
+  {% htmlexample %}
+  <label for="text">Text Area : </label>
+  <pf-text-area id="text" placeholder="placeholder" resize='horizontal'></pf-text-area>
+  {% endhtmlexample %}
+{% endband %}
 
 {% renderSlots %}{% endrenderSlots %}
 
diff --git a/elements/pf-text-input/docs/pf-text-input.md b/elements/pf-text-input/docs/pf-text-input.md
index 951e8dd49e..a87b14cd4b 100644
--- a/elements/pf-text-input/docs/pf-text-input.md
+++ b/elements/pf-text-input/docs/pf-text-input.md
@@ -2,7 +2,13 @@
   <pf-text-input></pf-text-input>
 {% endrenderOverview %}
 
-{% band header="Usage" %}{% endband %}
+{% band header="Usage" %}
+  ### Basic
+  {% htmlexample %}
+  <label for="input-box">Input: </label>
+  <pf-text-input id="input-box" type="text" placeholder="Placeholder"></pf-text-input> 
+  {% endhtmlexample %}
+{% endband %}
 
 {% renderSlots %}{% endrenderSlots %}
 
diff --git a/package-lock.json b/package-lock.json
index 161c4d6a69..a12a47cf2e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2417,9 +2417,9 @@
       }
     },
     "node_modules/@lit/react": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@lit/react/-/react-1.0.4.tgz",
-      "integrity": "sha512-6HBvk3AwF46z17fTkZp5F7/EdCJW9xqqQgYKr3sQGgoEJv0TKV1voWydG4UQQA2RWkoD4SHjy08snSpzyoyd0w==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@lit/react/-/react-1.0.5.tgz",
+      "integrity": "sha512-RSHhrcuSMa4vzhqiTenzXvtQ6QDq3hSPsnHHO3jaPmmvVFeoNNm4DHoQ0zLdKAUvY3wP3tTENSUf7xpyVfrDEA==",
       "dev": true,
       "peerDependencies": {
         "@types/react": "17 || 18"
@@ -4130,12 +4130,12 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "7.6.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-7.6.0.tgz",
-      "integrity": "sha512-ngttyfExA5PsHSx0rdFgnADMYQi+Zkeiv4/ZxGYUWd0nLs63Ha0ksmp8VMxAIC0wtCFxMos7Lt3PszJssG/E6w==",
+      "version": "7.14.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-7.14.1.tgz",
+      "integrity": "sha512-gPrFSsoYcsffYXTOZ+hT7fyJr95rdVe4kGVX1ps/dJ+DfmlnjFN/GcMxXcVkeHDKqsq6uAcVaQaIi3cFffmAbA==",
       "dependencies": {
-        "@typescript-eslint/types": "7.6.0",
-        "@typescript-eslint/visitor-keys": "7.6.0"
+        "@typescript-eslint/types": "7.14.1",
+        "@typescript-eslint/visitor-keys": "7.14.1"
       },
       "engines": {
         "node": "^18.18.0 || >=20.0.0"
@@ -4146,9 +4146,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "7.6.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.6.0.tgz",
-      "integrity": "sha512-h02rYQn8J+MureCvHVVzhl69/GAfQGPQZmOMjG1KfCl7o3HtMSlPaPUAPu6lLctXI5ySRGIYk94clD/AUMCUgQ==",
+      "version": "7.14.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.14.1.tgz",
+      "integrity": "sha512-mL7zNEOQybo5R3AavY+Am7KLv8BorIv7HCYS5rKoNZKQD9tsfGUpO4KdAn3sSUvTiS4PQkr2+K0KJbxj8H9NDg==",
       "engines": {
         "node": "^18.18.0 || >=20.0.0"
       },
@@ -4158,12 +4158,12 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "7.6.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-7.6.0.tgz",
-      "integrity": "sha512-+7Y/GP9VuYibecrCQWSKgl3GvUM5cILRttpWtnAu8GNL9j11e4tbuGZmZjJ8ejnKYyBRb2ddGQ3rEFCq3QjMJw==",
+      "version": "7.14.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-7.14.1.tgz",
+      "integrity": "sha512-k5d0VuxViE2ulIO6FbxxSZaxqDVUyMbXcidC8rHvii0I56XZPv8cq+EhMns+d/EVIL41sMXqRbK3D10Oza1bbA==",
       "dependencies": {
-        "@typescript-eslint/types": "7.6.0",
-        "@typescript-eslint/visitor-keys": "7.6.0",
+        "@typescript-eslint/types": "7.14.1",
+        "@typescript-eslint/visitor-keys": "7.14.1",
         "debug": "^4.3.4",
         "globby": "^11.1.0",
         "is-glob": "^4.0.3",
@@ -4226,11 +4226,11 @@
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "7.6.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.6.0.tgz",
-      "integrity": "sha512-4eLB7t+LlNUmXzfOu1VAIAdkjbu5xNSerURS9X/S5TUKWFRpXRQZbmtPqgKmYx8bj3J0irtQXSiWAOY82v+cgw==",
+      "version": "7.14.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.14.1.tgz",
+      "integrity": "sha512-Crb+F75U1JAEtBeQGxSKwI60hZmmzaqA3z9sYsVm8X7W5cwLEm5bRe0/uXS6+MR/y8CVpKSR/ontIAIEPFcEkA==",
       "dependencies": {
-        "@typescript-eslint/types": "7.6.0",
+        "@typescript-eslint/types": "7.14.1",
         "eslint-visitor-keys": "^3.4.3"
       },
       "engines": {
@@ -4333,9 +4333,9 @@
       }
     },
     "node_modules/@web/dev-server-core/node_modules/ws": {
-      "version": "7.5.9",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
-      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
+      "version": "7.5.10",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
+      "integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
       "engines": {
         "node": ">=8.3.0"
       },
@@ -16322,13 +16322,13 @@
       }
     },
     "node_modules/typescript-eslint": {
-      "version": "7.6.0",
-      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-7.6.0.tgz",
-      "integrity": "sha512-LY6vH6F1l5jpGqRtU+uK4+mOecIb4Cd4kaz1hAiJrgnNiHUA8wiw8BkJyYS+MRLM69F1QuSKwtGlQqnGl1Rc6w==",
+      "version": "7.14.1",
+      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-7.14.1.tgz",
+      "integrity": "sha512-Eo1X+Y0JgGPspcANKjeR6nIqXl4VL5ldXLc15k4m9upq+eY5fhU2IueiEZL6jmHrKH8aCfbIvM/v3IrX5Hg99w==",
       "dependencies": {
-        "@typescript-eslint/eslint-plugin": "7.6.0",
-        "@typescript-eslint/parser": "7.6.0",
-        "@typescript-eslint/utils": "7.6.0"
+        "@typescript-eslint/eslint-plugin": "7.14.1",
+        "@typescript-eslint/parser": "7.14.1",
+        "@typescript-eslint/utils": "7.14.1"
       },
       "engines": {
         "node": "^18.18.0 || >=20.0.0"
@@ -16347,20 +16347,18 @@
       }
     },
     "node_modules/typescript-eslint/node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "7.6.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.6.0.tgz",
-      "integrity": "sha512-gKmTNwZnblUdnTIJu3e9kmeRRzV2j1a/LUO27KNNAnIC5zjy1aSvXSRp4rVNlmAoHlQ7HzX42NbKpcSr4jF80A==",
+      "version": "7.14.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.14.1.tgz",
+      "integrity": "sha512-aAJd6bIf2vvQRjUG3ZkNXkmBpN+J7Wd0mfQiiVCJMu9Z5GcZZdcc0j8XwN/BM97Fl7e3SkTXODSk4VehUv7CGw==",
       "dependencies": {
         "@eslint-community/regexpp": "^4.10.0",
-        "@typescript-eslint/scope-manager": "7.6.0",
-        "@typescript-eslint/type-utils": "7.6.0",
-        "@typescript-eslint/utils": "7.6.0",
-        "@typescript-eslint/visitor-keys": "7.6.0",
-        "debug": "^4.3.4",
+        "@typescript-eslint/scope-manager": "7.14.1",
+        "@typescript-eslint/type-utils": "7.14.1",
+        "@typescript-eslint/utils": "7.14.1",
+        "@typescript-eslint/visitor-keys": "7.14.1",
         "graphemer": "^1.4.0",
         "ignore": "^5.3.1",
         "natural-compare": "^1.4.0",
-        "semver": "^7.6.0",
         "ts-api-utils": "^1.3.0"
       },
       "engines": {
@@ -16381,12 +16379,12 @@
       }
     },
     "node_modules/typescript-eslint/node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/type-utils": {
-      "version": "7.6.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-7.6.0.tgz",
-      "integrity": "sha512-NxAfqAPNLG6LTmy7uZgpK8KcuiS2NZD/HlThPXQRGwz6u7MDBWRVliEEl1Gj6U7++kVJTpehkhZzCJLMK66Scw==",
+      "version": "7.14.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-7.14.1.tgz",
+      "integrity": "sha512-/MzmgNd3nnbDbOi3LfasXWWe292+iuo+umJ0bCCMCPc1jLO/z2BQmWUUUXvXLbrQey/JgzdF/OV+I5bzEGwJkQ==",
       "dependencies": {
-        "@typescript-eslint/typescript-estree": "7.6.0",
-        "@typescript-eslint/utils": "7.6.0",
+        "@typescript-eslint/typescript-estree": "7.14.1",
+        "@typescript-eslint/utils": "7.14.1",
         "debug": "^4.3.4",
         "ts-api-utils": "^1.3.0"
       },
@@ -16407,14 +16405,14 @@
       }
     },
     "node_modules/typescript-eslint/node_modules/@typescript-eslint/parser": {
-      "version": "7.6.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.6.0.tgz",
-      "integrity": "sha512-usPMPHcwX3ZoPWnBnhhorc14NJw9J4HpSXQX4urF2TPKG0au0XhJoZyX62fmvdHONUkmyUe74Hzm1//XA+BoYg==",
-      "dependencies": {
-        "@typescript-eslint/scope-manager": "7.6.0",
-        "@typescript-eslint/types": "7.6.0",
-        "@typescript-eslint/typescript-estree": "7.6.0",
-        "@typescript-eslint/visitor-keys": "7.6.0",
+      "version": "7.14.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.14.1.tgz",
+      "integrity": "sha512-8lKUOebNLcR0D7RvlcloOacTOWzOqemWEWkKSVpMZVF/XVcwjPR+3MD08QzbW9TCGJ+DwIc6zUSGZ9vd8cO1IA==",
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "7.14.1",
+        "@typescript-eslint/types": "7.14.1",
+        "@typescript-eslint/typescript-estree": "7.14.1",
+        "@typescript-eslint/visitor-keys": "7.14.1",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -16434,17 +16432,14 @@
       }
     },
     "node_modules/typescript-eslint/node_modules/@typescript-eslint/utils": {
-      "version": "7.6.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-7.6.0.tgz",
-      "integrity": "sha512-x54gaSsRRI+Nwz59TXpCsr6harB98qjXYzsRxGqvA5Ue3kQH+FxS7FYU81g/omn22ML2pZJkisy6Q+ElK8pBCA==",
+      "version": "7.14.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-7.14.1.tgz",
+      "integrity": "sha512-CMmVVELns3nak3cpJhZosDkm63n+DwBlDX8g0k4QUa9BMnF+lH2lr3d130M1Zt1xxmB3LLk3NV7KQCq86ZBBhQ==",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.4.0",
-        "@types/json-schema": "^7.0.15",
-        "@types/semver": "^7.5.8",
-        "@typescript-eslint/scope-manager": "7.6.0",
-        "@typescript-eslint/types": "7.6.0",
-        "@typescript-eslint/typescript-estree": "7.6.0",
-        "semver": "^7.6.0"
+        "@typescript-eslint/scope-manager": "7.14.1",
+        "@typescript-eslint/types": "7.14.1",
+        "@typescript-eslint/typescript-estree": "7.14.1"
       },
       "engines": {
         "node": "^18.18.0 || >=20.0.0"
@@ -17256,7 +17251,7 @@
     },
     "tools/pfe-tools": {
       "name": "@patternfly/pfe-tools",
-      "version": "2.0.2",
+      "version": "2.0.3",
       "license": "MIT",
       "dependencies": {
         "@11ty/eleventy": "^2.0.1",
diff --git a/tools/create-element/generator/element.ts b/tools/create-element/generator/element.ts
index 864328414b..11d2942d49 100644
--- a/tools/create-element/generator/element.ts
+++ b/tools/create-element/generator/element.ts
@@ -29,8 +29,6 @@ const $$ = $({ stderr: 'inherit' });
 enum FileKey {
   component = 'component',
   demo = 'demo',
-  demoCss = 'demoCss',
-  demoScript = 'demoScript',
   docs = 'docs',
   readme = 'readme',
   style = 'style',
@@ -63,8 +61,6 @@ const getFilePathsRelativeToPackageDir =
   memoize((options: GenerateElementOptions): Record<FileKey, string> => ({
     component: `${options.tagName}.ts`,
     demo: `demo/${options.tagName}.html`,
-    demoCss: `demo/demo.css`,
-    demoScript: `demo/${options.tagName}.js`,
     docs: `docs/${options.tagName}.md`,
     readme: 'README.md',
     style: `${options.tagName}.${options.css === 'postcss' ? '.postcss.css' : options.css}`,
diff --git a/tools/create-element/templates/element/demo/demo.css b/tools/create-element/templates/element/demo/demo.css
deleted file mode 100644
index 083a3e05a5..0000000000
--- a/tools/create-element/templates/element/demo/demo.css
+++ /dev/null
@@ -1,3 +0,0 @@
-<%= tagName %> {
-  /* insert demo styles */
-}
diff --git a/tools/create-element/templates/element/demo/element.html b/tools/create-element/templates/element/demo/element.html
index caa192cec1..d0e0f9885d 100644
--- a/tools/create-element/templates/element/demo/element.html
+++ b/tools/create-element/templates/element/demo/element.html
@@ -1,4 +1,12 @@
-<link rel="stylesheet" href="demo.css">
-<script type="module" src="<%= tagName %>.js"></script>
-
 <<%= tagName %>></<%= tagName %>>
+
+<script type="module">
+  import '<%= importSpecifier %>';
+</script>
+
+<style>
+<%= tagName %> {
+  /* insert demo styles */
+}
+</style>
+
diff --git a/tools/create-element/templates/element/demo/element.js b/tools/create-element/templates/element/demo/element.js
deleted file mode 100644
index 8b4e7a999b..0000000000
--- a/tools/create-element/templates/element/demo/element.js
+++ /dev/null
@@ -1 +0,0 @@
-import '<%= importSpecifier %>';
diff --git a/tools/pfe-tools/dev-server/config.ts b/tools/pfe-tools/dev-server/config.ts
index f9981f08e5..7c59b1ca61 100644
--- a/tools/pfe-tools/dev-server/config.ts
+++ b/tools/pfe-tools/dev-server/config.ts
@@ -1,6 +1,6 @@
 import type { Plugin } from '@web/dev-server-core';
 import type { DevServerConfig } from '@web/dev-server';
-import type { Context, Next } from 'koa';
+import type { Middleware, Context, Next } from 'koa';
 
 import { readdir, stat } from 'node:fs/promises';
 import { fileURLToPath } from 'node:url';
@@ -80,6 +80,18 @@ async function cacheBusterMiddleware(ctx: Context, next: Next) {
   }
 }
 
+function liveReloadTsChangesMiddleware(
+  config: ReturnType<typeof normalizeOptions>,
+): Middleware {
+  return function(ctx, next) {
+    if (!ctx.path.includes('node_modules') && ctx.path.match(new RegExp(`/^${config?.elementsDir}\\/.*.js/`))) {
+      ctx.redirect(ctx.path.replace('.js', '.ts'));
+    } else {
+      return next();
+    }
+  };
+}
+
 /**
  * Creates a default config for PFE's dev server.
  */
@@ -96,6 +108,7 @@ export function pfeDevServerConfig(options?: PfeDevServerConfigOptions): DevServ
     middleware: [
       cors,
       cacheBusterMiddleware,
+      liveReloadTsChangesMiddleware(config),
       ...config?.middleware ?? [],
     ],
 
diff --git a/tools/pfe-tools/dev-server/plugins/pfe-dev-server.ts b/tools/pfe-tools/dev-server/plugins/pfe-dev-server.ts
index 34046e7be2..d539ea218b 100644
--- a/tools/pfe-tools/dev-server/plugins/pfe-dev-server.ts
+++ b/tools/pfe-tools/dev-server/plugins/pfe-dev-server.ts
@@ -104,11 +104,11 @@ function getRouter(options: PfeDevServerInternalConfig) {
 
   // Redirect `components/jazz-hands/*-lightdom.css` to `elements/pf-jazz-hands/*-lightdom.css`
   // NOTE: don't put subresources in /demo called `*-lightdom.css` , or this will break
-      .get(`/${componentSubpath}/:element/(demo/)?:fileName-lightdom.css`, async (ctx, next) => {
+      .get(`/${componentSubpath}/:element/(demo/)?:fileName.css`, async (ctx, next) => {
         const { element, fileName } = ctx.params;
-        if (!element.startsWith(tagPrefix)) {
+        if (!element.startsWith(tagPrefix) && fileName.includes('lightdom')) {
           const prefixedElement = deslugify(element);
-          ctx.redirect(`/${elementsDir}/${prefixedElement}/${fileName}-lightdom.css`);
+          ctx.redirect(`/${elementsDir}/${prefixedElement}/${fileName}.css`);
         } else {
           return next();
         }