From d20f164fc2a88f3d8901055eefc247f2748a615f Mon Sep 17 00:00:00 2001
From: shleewhite <lee.white@hahicorp.com>
Date: Tue, 23 Jun 2026 15:56:14 -0400
Subject: [PATCH 01/12] feat: website dynamic template actually render gts
 components

---
 .../app/components/doc/code-group/index.gts   | 46 ++++++++++-
 website/app/components/dynamic-template.gjs   | 80 ++++++++++++-------
 .../showdown-extensions/content-blocks.js     |  5 +-
 .../code/code-snippets/accordion-size.gts     |  2 +-
 website/lib/markdown/index.js                 |  2 +-
 .../lib/markdown/markdown-process-demos.js    | 10 ++-
 6 files changed, 106 insertions(+), 39 deletions(-)

diff --git a/website/app/components/doc/code-group/index.gts b/website/app/components/doc/code-group/index.gts
index d5226c921c6..7c06a0b02b9 100644
--- a/website/app/components/doc/code-group/index.gts
+++ b/website/app/components/doc/code-group/index.gts
@@ -23,6 +23,7 @@ import DynamicTemplate from 'website/components/dynamic-template';
 interface DocCodeGroupSignature {
   Args: {
     filename?: string;
+    gtsFilename?: string;
     hbsSnippet?: string;
     jsSnippet?: string;
     gtsSnippet?: string;
@@ -121,8 +122,13 @@ export default class DocCodeGroup extends Component<DocCodeGroupSignature> {
 
   // NOTE: the dynamic template requires a component to render a preview. If there is not a component (ex. only a sass/yaml/bash snippet), we hide the preview by default.
   get hidePreview() {
-    // TODO: refactor dynamic template to support gts components: https://hashicorp.atlassian.net/browse/HDS-5833
-    return this.args.hbsSnippet === '' || this.args.hidePreview === 'true';
+    const hasRenderablePreview =
+      (this.args.hbsSnippet && this.args.hbsSnippet !== '') ||
+      (this.args.gtsSnippet &&
+        this.args.gtsSnippet !== '' &&
+        this.args.filename);
+
+    return !hasRenderablePreview || this.args.hidePreview === 'true';
   }
 
   get hbsSnippet() {
@@ -150,6 +156,38 @@ export default class DocCodeGroup extends Component<DocCodeGroupSignature> {
     return customSnippet ? unescapeCode(customSnippet) : '';
   }
 
+  get previewTemplateString() {
+    // For .gts view, the preview comes from a real component module (via
+    // `@componentId`), so we intentionally skip passing a runtime template.
+    if (this.currentView === 'gts' && this.args.gtsSnippet !== '') {
+      return undefined;
+    }
+
+    return this.hbsSnippet === '' ? undefined : this.hbsSnippet;
+  }
+
+  get previewComponentId() {
+    const { filename, gtsFilename } = this.args;
+
+    if (!filename) {
+      return undefined;
+    }
+
+    if (this.currentView === 'gts' && this.args.gtsSnippet !== '') {
+      if (gtsFilename && gtsFilename !== '') {
+        // .gts demos can live under a different component file than the .hbs
+        // classic demo, so prefer an explicit gts filename when provided.
+        return gtsFilename;
+      }
+
+      // Fallback: map `foo.classic` docs entries to the colocated modern
+      // component id (`foo`) used by the .gts demo implementation.
+      return filename.replace(/\.classic$/, '');
+    }
+
+    return filename;
+  }
+
   get currentSnippet() {
     if (this.currentView === 'js') {
       return { snippet: this.jsSnippet, language: 'js' };
@@ -282,8 +320,8 @@ export default class DocCodeGroup extends Component<DocCodeGroupSignature> {
       {{#if (notEq this.hidePreview true)}}
         <div class="doc-code-group__preview">
           <DynamicTemplate
-            @templateString={{this.hbsSnippet}}
-            @componentId={{@filename}}
+            @templateString={{this.previewTemplateString}}
+            @componentId={{this.previewComponentId}}
           />
         </div>
       {{/if}}
diff --git a/website/app/components/dynamic-template.gjs b/website/app/components/dynamic-template.gjs
index 0067c6830c8..f7559373ceb 100644
--- a/website/app/components/dynamic-template.gjs
+++ b/website/app/components/dynamic-template.gjs
@@ -19,58 +19,78 @@ export default class DynamicTemplate extends Component {
     let owner = getOwner(this);
     let templateMap = templateOwnerMap.get(owner);
     if (templateMap === undefined) {
-      templateMap = templateOwnerMap.set(owner, new Map());
+      templateMap = new Map();
+      templateOwnerMap.set(owner, templateMap);
     }
     this.templateMap = templateMap;
   }
 
-  get component() {
+  get resolvedComponent() {
     let owner = getOwner(this);
 
-    let { templateString } = this.args;
-    if (!templateString) {
-      return null;
+    let factory = owner.factoryFor(`component:${this.args.componentId}`);
+    if (factory?.class && typeof factory.class === 'function') {
+      return class extends factory.class {};
     }
 
-    let component = this.templateMap.get(templateString);
-    if (component === undefined) {
-      let compiledTemplate;
+    // if component couldn't be found the old way try importing it directly
+    let module;
+    try {
+      module = importSync(`./${this.args.componentId}.gts`);
+    } catch {
       try {
-        compiledTemplate = compileTemplate(templateString);
-      } catch (err) {
-        console.error(err);
-        console.error(templateString);
-        compiledTemplate = compileTemplate(`<DynamicTemplateError />`);
+        module = importSync(`./${this.args.componentId}.js`);
+      } catch {
+        // backing class doesn't exist so just ignore the error
       }
+    }
 
-      component = owner.factoryFor(`component:${this.args.componentId}`);
+    let defaultExport = module?.default;
+    if (typeof defaultExport === 'function') {
+      return defaultExport;
+    }
 
-      if (component) {
-        component = class extends component.class {};
-      } else {
-        // if component couldn't be found the old way try importing it directly
-        let module;
+    return null;
+  }
+
+  get component() {
+    let { componentId } = this.args;
+    let { templateString } = this.args;
+    let cacheKey = `${componentId || ''}::${templateString || ''}`;
+
+    let component = this.templateMap.get(cacheKey);
+    if (component === undefined) {
+      if (templateString) {
+        // .hbs examples are provided as raw template strings, so we compile
+        // them at runtime and attach them to a backing class (if one exists).
+        component = this.resolvedComponent;
+
+        let compiledTemplate;
         try {
-          module = importSync(`./docs/${this.args.componentId}.js`);
-        } catch {
-          // backing class doesn't exist so just ignore the error
+          compiledTemplate = compileTemplate(templateString);
+        } catch (err) {
+          console.error(err);
+          console.error(templateString);
+          compiledTemplate = compileTemplate(`<DynamicTemplateError />`);
         }
 
-        component = module?.default;
-      }
+        if (!component) {
+          component = class extends Component {};
+        }
 
-      if (!component) {
-        component = class extends Component {};
+        setComponentTemplate(compiledTemplate, component);
+      } else {
+        // .gts examples are precompiled modules with their own template + class,
+        // so we render the component by id instead of compiling a template string.
+        component = componentId || null;
       }
 
-      setComponentTemplate(compiledTemplate, component);
-
       // eslint-disable-next-line ember/no-side-effects
-      this.templateMap.set(templateString, component);
+      this.templateMap.set(cacheKey, component);
     }
 
     return component;
   }
 
-  <template>{{component (ensureSafeComponent this.component)}}</template>
+  <template>{{component (ensureSafeComponent this.component this)}}</template>
 }
diff --git a/website/app/shared/showdown-extensions/content-blocks.js b/website/app/shared/showdown-extensions/content-blocks.js
index 1f3fef3d8e0..7e594c6fb51 100644
--- a/website/app/shared/showdown-extensions/content-blocks.js
+++ b/website/app/shared/showdown-extensions/content-blocks.js
@@ -53,7 +53,7 @@ export const contentBlocks = function () {
 
       // NOTE: this regex must match the output created in markdown-process-demos.js
       const demoRegex = new RegExp(
-        /<\?php start="demo-block" filename="(.*?)" hbs="(.*?)" js="(.*?)" gts="(.*?)" compactGts="(.*?)" custom="(.*?)" customLang="(.*?)" hidePreview="(.*?)" expanded="(.*?)" \?>\n?/,
+        /<\?php start="demo-block" filename="(.*?)"(?: gtsFilename="(.*?)")? hbs="(.*?)" js="(.*?)" gts="(.*?)" compactGts="(.*?)" custom="(.*?)" customLang="(.*?)" hidePreview="(.*?)" expanded="(.*?)" \?>\n?/,
         'g',
       );
 
@@ -62,6 +62,7 @@ export const contentBlocks = function () {
         function (
           _match,
           filename,
+          gtsFilename,
           hbs,
           js,
           gts,
@@ -71,7 +72,7 @@ export const contentBlocks = function () {
           hidePreview,
           expanded,
         ) {
-          return `<Doc::CodeGroup @filename="${filename}" @hbsSnippet="${hbs}" @jsSnippet="${js}" @gtsSnippet="${gts}" @compactGtsSnippet="${compactGts}" @customSnippet="${custom}" @customLang="${customLang}" @hidePreview="${hidePreview}" @isExpanded="${expanded}">\n`;
+          return `<Doc::CodeGroup @filename="${filename}" @gtsFilename="${gtsFilename || ''}" @hbsSnippet="${hbs}" @jsSnippet="${js}" @gtsSnippet="${gts}" @compactGtsSnippet="${compactGts}" @customSnippet="${custom}" @customLang="${customLang}" @hidePreview="${hidePreview}" @isExpanded="${expanded}">\n`;
         },
       );
 
diff --git a/website/docs/components/accordion/partials/code/code-snippets/accordion-size.gts b/website/docs/components/accordion/partials/code/code-snippets/accordion-size.gts
index a2292d60e6f..c13bd0a28fb 100644
--- a/website/docs/components/accordion/partials/code/code-snippets/accordion-size.gts
+++ b/website/docs/components/accordion/partials/code/code-snippets/accordion-size.gts
@@ -5,7 +5,7 @@ import { HdsAccordion } from '@hashicorp/design-system-components/components';
 const LocalComponent: TemplateOnlyComponent = <template>
   <HdsAccordion @size="large" as |A|>
     <A.Item>
-      <:toggle>Item one</:toggle>
+      <:toggle>DIFFERENT COMPONENT</:toggle>
       <:content>
         Additional content for item one
       </:content>
diff --git a/website/lib/markdown/index.js b/website/lib/markdown/index.js
index 3a54a5b9aa3..9c70ae8d3b3 100644
--- a/website/lib/markdown/index.js
+++ b/website/lib/markdown/index.js
@@ -29,7 +29,7 @@ module.exports = {
   treeForApp() {
     let backingClasses = new Funnel('docs', {
       destDir: 'components',
-      include: ['**/*.js'],
+      include: ['**/*.js', '**/code-snippets/**/*.gts'],
     });
     return new MergeTrees([backingClasses]);
   },
diff --git a/website/lib/markdown/markdown-process-demos.js b/website/lib/markdown/markdown-process-demos.js
index 25d96fad2ab..3abf99d4ea0 100644
--- a/website/lib/markdown/markdown-process-demos.js
+++ b/website/lib/markdown/markdown-process-demos.js
@@ -156,6 +156,7 @@ class MarkdownReplaceDemoBlocks extends Multifilter {
           };
 
           let fileNameToForward = '';
+          let gtsFileNameToForward = '';
 
           SUPPORTED_FILE_EXTENSIONS.forEach((ext) => {
             const fileToCheck = `${fileName.trim()}${ext}`;
@@ -181,6 +182,13 @@ class MarkdownReplaceDemoBlocks extends Multifilter {
                 codeSnippets.compactGts = escapeCode(
                   stripAllIgnores(getCompactGtsSnippet(code)),
                 );
+
+                gtsFileNameToForward = filePath.match(fileNameRegex)?.[1] || '';
+
+                // if there is no classic snippet, forward the gts component path for rendering preview
+                if (!fileNameToForward) {
+                  fileNameToForward = gtsFileNameToForward;
+                }
               }
 
               if (
@@ -197,7 +205,7 @@ class MarkdownReplaceDemoBlocks extends Multifilter {
           });
 
           // NOTE: if change this, also need to change the regex in content-blocks.js
-          return `\n<?php start="demo-block" filename="${fileNameToForward}" hbs="${codeSnippets.hbs}" js="${codeSnippets.js}" gts="${codeSnippets.gts}" compactGts="${codeSnippets.compactGts}" custom="${codeSnippets.custom}" customLang="${codeSnippets.customLang}" hidePreview="${shouldHidePreview}" expanded="${isExpanded}" ?><?php end="demo-block" ?>\n`;
+          return `\n<?php start="demo-block" filename="${fileNameToForward}" gtsFilename="${gtsFileNameToForward}" hbs="${codeSnippets.hbs}" js="${codeSnippets.js}" gts="${codeSnippets.gts}" compactGts="${codeSnippets.compactGts}" custom="${codeSnippets.custom}" customLang="${codeSnippets.customLang}" hidePreview="${shouldHidePreview}" expanded="${isExpanded}" ?><?php end="demo-block" ?>\n`;
         },
       );
 

From 648068b944b16fff34ade83ec2eb534bac4a3d94 Mon Sep 17 00:00:00 2001
From: shleewhite <lee.white@hahicorp.com>
Date: Tue, 23 Jun 2026 16:12:39 -0400
Subject: [PATCH 02/12] fix: failing test by hiding previews in for engineers
 docs

---
 website/docs/getting-started/for-engineers/index.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/website/docs/getting-started/for-engineers/index.md b/website/docs/getting-started/for-engineers/index.md
index da399f27004..59a8637883e 100644
--- a/website/docs/getting-started/for-engineers/index.md
+++ b/website/docs/getting-started/for-engineers/index.md
@@ -68,11 +68,11 @@ Import the CSS by adding this configuration in `ember-cli-build.js`.
 
 If you are are using single file components (i.e., `.gts` or `.gjs` files), the components need to be individually imported into the file for them to render. All components can be imported from the `@hashicorp/design-system-components/components` path. To use a component's signature, you must import it from the definition file.
 
-[[code-snippets/sample-component expanded=true]]
+[[code-snippets/sample-component execute=false expanded=true]]
 
 In the rare cases where you need to use an HDS modifier, they are only exported from their definition file
 
-[[code-snippets/sample-imports expanded=true]]
+[[code-snippets/sample-imports execute=false expanded=true]]
 
 For more information on single file components, see the Ember docs:
 * [Intro to components](https://guides.emberjs.com/release/components/introducing-components/)

From ac0ca09e6f4cd69115dc62fc654456aa6c2c037b Mon Sep 17 00:00:00 2001
From: shleewhite <lee.white@hahicorp.com>
Date: Thu, 25 Jun 2026 17:14:45 -0400
Subject: [PATCH 03/12] fix: simplify code group logic

---
 .../app/components/doc/code-group/index.gts   | 92 ++++++++++++-------
 1 file changed, 58 insertions(+), 34 deletions(-)

diff --git a/website/app/components/doc/code-group/index.gts b/website/app/components/doc/code-group/index.gts
index 7c06a0b02b9..67e2020ed12 100644
--- a/website/app/components/doc/code-group/index.gts
+++ b/website/app/components/doc/code-group/index.gts
@@ -120,15 +120,50 @@ export default class DocCodeGroup extends Component<DocCodeGroupSignature> {
     }
   }
 
-  // NOTE: the dynamic template requires a component to render a preview. If there is not a component (ex. only a sass/yaml/bash snippet), we hide the preview by default.
+  // NOTE: the dynamic template requires an Ember component to render a preview. If there is not a component (ex. only a sass/yaml/bash snippet), we hide the preview by default.
   get hidePreview() {
-    const hasRenderablePreview =
-      (this.args.hbsSnippet && this.args.hbsSnippet !== '') ||
-      (this.args.gtsSnippet &&
-        this.args.gtsSnippet !== '' &&
-        this.args.filename);
+    if (this.args.hidePreview === 'true') {
+      return true;
+    }
+
+    const hasHbsPreview = this.hasSnippet(this.args.hbsSnippet);
+    const hasGtsPreview =
+      this.hasSnippet(this.args.gtsSnippet) && !!this.gtsPreviewComponentId;
+
+    return !(hasHbsPreview || hasGtsPreview);
+  }
+
+  private hasSnippet(snippet?: string) {
+    return !!snippet && snippet !== '';
+  }
+
+  get classicPreviewComponentId() {
+    return this.hasSnippet(this.args.filename) ? this.args.filename : undefined;
+  }
+
+  get gtsPreviewComponentId() {
+    return this.hasSnippet(this.args.gtsFilename)
+      ? this.args.gtsFilename
+      : undefined;
+  }
+
+  get previewMode() {
+    if (
+      this.currentView === 'gts' &&
+      this.hasSnippet(this.args.gtsSnippet) &&
+      this.gtsPreviewComponentId
+    ) {
+      return 'component-module';
+    }
+
+    if (
+      (this.currentView === 'hbs' || this.currentView === 'js') &&
+      this.hasSnippet(this.args.hbsSnippet)
+    ) {
+      return 'runtime-template';
+    }
 
-    return !hasRenderablePreview || this.args.hidePreview === 'true';
+    return null;
   }
 
   get hbsSnippet() {
@@ -157,35 +192,21 @@ export default class DocCodeGroup extends Component<DocCodeGroupSignature> {
   }
 
   get previewTemplateString() {
-    // For .gts view, the preview comes from a real component module (via
-    // `@componentId`), so we intentionally skip passing a runtime template.
-    if (this.currentView === 'gts' && this.args.gtsSnippet !== '') {
-      return undefined;
-    }
-
-    return this.hbsSnippet === '' ? undefined : this.hbsSnippet;
+    return this.previewMode === 'runtime-template'
+      ? this.hbsSnippet
+      : undefined;
   }
 
   get previewComponentId() {
-    const { filename, gtsFilename } = this.args;
-
-    if (!filename) {
-      return undefined;
+    if (this.previewMode === 'component-module') {
+      return this.gtsPreviewComponentId;
     }
 
-    if (this.currentView === 'gts' && this.args.gtsSnippet !== '') {
-      if (gtsFilename && gtsFilename !== '') {
-        // .gts demos can live under a different component file than the .hbs
-        // classic demo, so prefer an explicit gts filename when provided.
-        return gtsFilename;
-      }
-
-      // Fallback: map `foo.classic` docs entries to the colocated modern
-      // component id (`foo`) used by the .gts demo implementation.
-      return filename.replace(/\.classic$/, '');
+    if (this.previewMode === 'runtime-template') {
+      return this.classicPreviewComponentId;
     }
 
-    return filename;
+    return undefined;
   }
 
   get currentSnippet() {
@@ -230,25 +251,28 @@ export default class DocCodeGroup extends Component<DocCodeGroupSignature> {
   };
 
   get shouldSyncLanguageSelection() {
-    return this.args.hbsSnippet !== '' && this.args.gtsSnippet !== '';
+    return (
+      this.hasSnippet(this.args.hbsSnippet) &&
+      this.hasSnippet(this.args.gtsSnippet)
+    );
   }
 
   get languageOptions() {
     const options: Array<LanguageOption> = [];
 
-    if (this.args.hbsSnippet !== '') {
+    if (this.hasSnippet(this.args.hbsSnippet)) {
       options.push({ label: '.hbs', value: 'hbs' });
     }
 
-    if (this.args.jsSnippet !== '') {
+    if (this.hasSnippet(this.args.jsSnippet)) {
       options.push({ label: '.js', value: 'js' });
     }
 
-    if (this.args.gtsSnippet !== '') {
+    if (this.hasSnippet(this.args.gtsSnippet)) {
       options.push({ label: '.gts', value: 'gts' });
     }
 
-    if (this.args.customLang && this.args.customSnippet !== '') {
+    if (this.args.customLang && this.hasSnippet(this.args.customSnippet)) {
       options.push({ label: `.${this.args.customLang}`, value: 'custom' });
     }
 

From b98a2b053e85122e5fef8c18d7e24b3f644fc467 Mon Sep 17 00:00:00 2001
From: shleewhite <lee.white@hahicorp.com>
Date: Thu, 25 Jun 2026 17:25:28 -0400
Subject: [PATCH 04/12] fix: simplify dynamic template component

---
 website/app/components/dynamic-template.gjs | 35 +++++----------------
 1 file changed, 7 insertions(+), 28 deletions(-)

diff --git a/website/app/components/dynamic-template.gjs b/website/app/components/dynamic-template.gjs
index f7559373ceb..1e44061ac9d 100644
--- a/website/app/components/dynamic-template.gjs
+++ b/website/app/components/dynamic-template.gjs
@@ -8,7 +8,6 @@ import { ensureSafeComponent } from '@embroider/util';
 import { setComponentTemplate } from '@ember/component';
 import { getOwner } from '@ember/owner';
 import { compileTemplate } from '@ember/template-compilation';
-import { importSync } from '@embroider/macros';
 
 let templateOwnerMap = new Map();
 
@@ -25,45 +24,26 @@ export default class DynamicTemplate extends Component {
     this.templateMap = templateMap;
   }
 
-  get resolvedComponent() {
+  get backingComponentClass() {
     let owner = getOwner(this);
-
     let factory = owner.factoryFor(`component:${this.args.componentId}`);
+
     if (factory?.class && typeof factory.class === 'function') {
       return class extends factory.class {};
     }
 
-    // if component couldn't be found the old way try importing it directly
-    let module;
-    try {
-      module = importSync(`./${this.args.componentId}.gts`);
-    } catch {
-      try {
-        module = importSync(`./${this.args.componentId}.js`);
-      } catch {
-        // backing class doesn't exist so just ignore the error
-      }
-    }
-
-    let defaultExport = module?.default;
-    if (typeof defaultExport === 'function') {
-      return defaultExport;
-    }
-
     return null;
   }
 
   get component() {
-    let { componentId } = this.args;
-    let { templateString } = this.args;
-    let cacheKey = `${componentId || ''}::${templateString || ''}`;
+    const { componentId, templateString } = this.args;
+    const cacheKey = `${componentId || ''}::${templateString || ''}`;
 
     let component = this.templateMap.get(cacheKey);
     if (component === undefined) {
       if (templateString) {
-        // .hbs examples are provided as raw template strings, so we compile
-        // them at runtime and attach them to a backing class (if one exists).
-        component = this.resolvedComponent;
+        // Runtime template mode (classic Ember component): compile provided template text and attach it to a backing class when one exists for the provided component id.
+        component = this.backingComponentClass;
 
         let compiledTemplate;
         try {
@@ -80,8 +60,7 @@ export default class DynamicTemplate extends Component {
 
         setComponentTemplate(compiledTemplate, component);
       } else {
-        // .gts examples are precompiled modules with their own template + class,
-        // so we render the component by id instead of compiling a template string.
+        // Component module mode (single file component): render a precompiled component by id.
         component = componentId || null;
       }
 

From ee5bc154a1bfa0dc009d52f3d0ba2035930a83b8 Mon Sep 17 00:00:00 2001
From: shleewhite <lee.white@hahicorp.com>
Date: Thu, 25 Jun 2026 17:29:17 -0400
Subject: [PATCH 05/12] fix: simplify way demos are processed

---
 .../lib/markdown/markdown-process-demos.js    | 28 ++++++++++---------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/website/lib/markdown/markdown-process-demos.js b/website/lib/markdown/markdown-process-demos.js
index 3abf99d4ea0..bef1ecaf0cf 100644
--- a/website/lib/markdown/markdown-process-demos.js
+++ b/website/lib/markdown/markdown-process-demos.js
@@ -124,6 +124,10 @@ function getCompactGtsSnippet(code) {
   return dedentedLines.join('\n');
 }
 
+function getComponentIdFromPath(filePath) {
+  return filePath.match(fileNameRegex)?.[1] || '';
+}
+
 class MarkdownReplaceDemoBlocks extends Multifilter {
   build() {
     const inputFolder = this.inputPaths[0];
@@ -155,8 +159,8 @@ class MarkdownReplaceDemoBlocks extends Multifilter {
             customLang: '',
           };
 
-          let fileNameToForward = '';
-          let gtsFileNameToForward = '';
+          let classicFilenameToForward = '';
+          let gtsFilenameToForward = '';
 
           SUPPORTED_FILE_EXTENSIONS.forEach((ext) => {
             const fileToCheck = `${fileName.trim()}${ext}`;
@@ -168,9 +172,7 @@ class MarkdownReplaceDemoBlocks extends Multifilter {
 
               if (ext === '.classic.hbs') {
                 codeSnippets.hbs = escapeCode(stripAllIgnores(code));
-
-                // need to use the classic.hbs file path for forwarding because the DynamicTemplate relies on the hbs/js files to render the preview - so the fileName must include the .classic extension
-                fileNameToForward = filePath.match(fileNameRegex)?.[1];
+                classicFilenameToForward = getComponentIdFromPath(filePath);
               }
 
               if (ext === '.classic.js' || ext === '.js') {
@@ -182,13 +184,7 @@ class MarkdownReplaceDemoBlocks extends Multifilter {
                 codeSnippets.compactGts = escapeCode(
                   stripAllIgnores(getCompactGtsSnippet(code)),
                 );
-
-                gtsFileNameToForward = filePath.match(fileNameRegex)?.[1] || '';
-
-                // if there is no classic snippet, forward the gts component path for rendering preview
-                if (!fileNameToForward) {
-                  fileNameToForward = gtsFileNameToForward;
-                }
+                gtsFilenameToForward = getComponentIdFromPath(filePath);
               }
 
               if (
@@ -204,8 +200,14 @@ class MarkdownReplaceDemoBlocks extends Multifilter {
             }
           });
 
+          // Keep both forwarded ids explicit:
+          // - `filename` keeps classic preview lookup behavior (`*.classic`).
+          // - `gtsFilename` points to the modern component module (`*.gts`).
+          // If only a modern snippet exists, `filename` falls back to the gts id.
+          const filenameToForward = classicFilenameToForward || gtsFilenameToForward;
+
           // NOTE: if change this, also need to change the regex in content-blocks.js
-          return `\n<?php start="demo-block" filename="${fileNameToForward}" gtsFilename="${gtsFileNameToForward}" hbs="${codeSnippets.hbs}" js="${codeSnippets.js}" gts="${codeSnippets.gts}" compactGts="${codeSnippets.compactGts}" custom="${codeSnippets.custom}" customLang="${codeSnippets.customLang}" hidePreview="${shouldHidePreview}" expanded="${isExpanded}" ?><?php end="demo-block" ?>\n`;
+          return `\n<?php start="demo-block" filename="${filenameToForward}" gtsFilename="${gtsFilenameToForward}" hbs="${codeSnippets.hbs}" js="${codeSnippets.js}" gts="${codeSnippets.gts}" compactGts="${codeSnippets.compactGts}" custom="${codeSnippets.custom}" customLang="${codeSnippets.customLang}" hidePreview="${shouldHidePreview}" expanded="${isExpanded}" ?><?php end="demo-block" ?>\n`;
         },
       );
 

From 72f636af37ac31ea4564c207756426b68e1ba00f Mon Sep 17 00:00:00 2001
From: shleewhite <lee.white@hahicorp.com>
Date: Thu, 25 Jun 2026 17:32:28 -0400
Subject: [PATCH 06/12] chore: standardize naming

---
 .../showdown-extensions/content-blocks.js     | 12 ++++-----
 .../lib/markdown/markdown-process-demos.js    | 25 ++++++++++---------
 2 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/website/app/shared/showdown-extensions/content-blocks.js b/website/app/shared/showdown-extensions/content-blocks.js
index 7e594c6fb51..0eeca29cebe 100644
--- a/website/app/shared/showdown-extensions/content-blocks.js
+++ b/website/app/shared/showdown-extensions/content-blocks.js
@@ -63,16 +63,16 @@ export const contentBlocks = function () {
           _match,
           filename,
           gtsFilename,
-          hbs,
-          js,
-          gts,
-          compactGts,
-          custom,
+          hbsSnippet,
+          jsSnippet,
+          gtsSnippet,
+          compactGtsSnippet,
+          customSnippet,
           customLang,
           hidePreview,
           expanded,
         ) {
-          return `<Doc::CodeGroup @filename="${filename}" @gtsFilename="${gtsFilename || ''}" @hbsSnippet="${hbs}" @jsSnippet="${js}" @gtsSnippet="${gts}" @compactGtsSnippet="${compactGts}" @customSnippet="${custom}" @customLang="${customLang}" @hidePreview="${hidePreview}" @isExpanded="${expanded}">\n`;
+          return `<Doc::CodeGroup @filename="${filename}" @gtsFilename="${gtsFilename || ''}" @hbsSnippet="${hbsSnippet}" @jsSnippet="${jsSnippet}" @gtsSnippet="${gtsSnippet}" @compactGtsSnippet="${compactGtsSnippet}" @customSnippet="${customSnippet}" @customLang="${customLang}" @hidePreview="${hidePreview}" @isExpanded="${expanded}">\n`;
         },
       );
 
diff --git a/website/lib/markdown/markdown-process-demos.js b/website/lib/markdown/markdown-process-demos.js
index bef1ecaf0cf..2c8eb099e41 100644
--- a/website/lib/markdown/markdown-process-demos.js
+++ b/website/lib/markdown/markdown-process-demos.js
@@ -151,11 +151,11 @@ class MarkdownReplaceDemoBlocks extends Multifilter {
           const shouldHidePreview = shouldExecute === 'false' ? true : false;
 
           const codeSnippets = {
-            hbs: '',
-            js: '',
-            gts: '',
-            compactGts: '',
-            custom: '',
+            hbsSnippet: '',
+            jsSnippet: '',
+            gtsSnippet: '',
+            compactGtsSnippet: '',
+            customSnippet: '',
             customLang: '',
           };
 
@@ -171,17 +171,17 @@ class MarkdownReplaceDemoBlocks extends Multifilter {
               dependencies.push(filePath);
 
               if (ext === '.classic.hbs') {
-                codeSnippets.hbs = escapeCode(stripAllIgnores(code));
+                codeSnippets.hbsSnippet = escapeCode(stripAllIgnores(code));
                 classicFilenameToForward = getComponentIdFromPath(filePath);
               }
 
               if (ext === '.classic.js' || ext === '.js') {
-                codeSnippets.js = escapeCode(stripAllIgnores(code));
+                codeSnippets.jsSnippet = escapeCode(stripAllIgnores(code));
               }
 
               if (ext === '.gts') {
-                codeSnippets.gts = escapeCode(stripAllIgnores(code));
-                codeSnippets.compactGts = escapeCode(
+                codeSnippets.gtsSnippet = escapeCode(stripAllIgnores(code));
+                codeSnippets.compactGtsSnippet = escapeCode(
                   stripAllIgnores(getCompactGtsSnippet(code)),
                 );
                 gtsFilenameToForward = getComponentIdFromPath(filePath);
@@ -194,7 +194,7 @@ class MarkdownReplaceDemoBlocks extends Multifilter {
                 ext === '.html' ||
                 ext === '.jsx'
               ) {
-                codeSnippets.custom = escapeCode(code);
+                codeSnippets.customSnippet = escapeCode(code);
                 codeSnippets.customLang = ext.substring(1); // remove the dot from the extension
               }
             }
@@ -204,10 +204,11 @@ class MarkdownReplaceDemoBlocks extends Multifilter {
           // - `filename` keeps classic preview lookup behavior (`*.classic`).
           // - `gtsFilename` points to the modern component module (`*.gts`).
           // If only a modern snippet exists, `filename` falls back to the gts id.
-          const filenameToForward = classicFilenameToForward || gtsFilenameToForward;
+          const filenameToForward =
+            classicFilenameToForward || gtsFilenameToForward;
 
           // NOTE: if change this, also need to change the regex in content-blocks.js
-          return `\n<?php start="demo-block" filename="${filenameToForward}" gtsFilename="${gtsFilenameToForward}" hbs="${codeSnippets.hbs}" js="${codeSnippets.js}" gts="${codeSnippets.gts}" compactGts="${codeSnippets.compactGts}" custom="${codeSnippets.custom}" customLang="${codeSnippets.customLang}" hidePreview="${shouldHidePreview}" expanded="${isExpanded}" ?><?php end="demo-block" ?>\n`;
+          return `\n<?php start="demo-block" filename="${filenameToForward}" gtsFilename="${gtsFilenameToForward}" hbs="${codeSnippets.hbsSnippet}" js="${codeSnippets.jsSnippet}" gts="${codeSnippets.gtsSnippet}" compactGts="${codeSnippets.compactGtsSnippet}" custom="${codeSnippets.customSnippet}" customLang="${codeSnippets.customLang}" hidePreview="${shouldHidePreview}" expanded="${isExpanded}" ?><?php end="demo-block" ?>\n`;
         },
       );
 

From 3bd179417fbe3d892966df09046c1baed919782a Mon Sep 17 00:00:00 2001
From: shleewhite <lee.white@hahicorp.com>
Date: Thu, 25 Jun 2026 18:14:53 -0400
Subject: [PATCH 07/12] chore: fix filename arg naming

---
 website/app/components/doc/code-group/index.gts          | 6 ++++--
 website/app/shared/showdown-extensions/content-blocks.js | 6 +++---
 website/lib/markdown/markdown-process-demos.js           | 9 +--------
 3 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/website/app/components/doc/code-group/index.gts b/website/app/components/doc/code-group/index.gts
index 67e2020ed12..9cee7680848 100644
--- a/website/app/components/doc/code-group/index.gts
+++ b/website/app/components/doc/code-group/index.gts
@@ -22,8 +22,8 @@ import DynamicTemplate from 'website/components/dynamic-template';
 
 interface DocCodeGroupSignature {
   Args: {
-    filename?: string;
     gtsFilename?: string;
+    classicFilename?: string;
     hbsSnippet?: string;
     jsSnippet?: string;
     gtsSnippet?: string;
@@ -138,7 +138,9 @@ export default class DocCodeGroup extends Component<DocCodeGroupSignature> {
   }
 
   get classicPreviewComponentId() {
-    return this.hasSnippet(this.args.filename) ? this.args.filename : undefined;
+    return this.hasSnippet(this.args.classicFilename)
+      ? this.args.classicFilename
+      : undefined;
   }
 
   get gtsPreviewComponentId() {
diff --git a/website/app/shared/showdown-extensions/content-blocks.js b/website/app/shared/showdown-extensions/content-blocks.js
index 0eeca29cebe..1f6ecab61f9 100644
--- a/website/app/shared/showdown-extensions/content-blocks.js
+++ b/website/app/shared/showdown-extensions/content-blocks.js
@@ -53,7 +53,7 @@ export const contentBlocks = function () {
 
       // NOTE: this regex must match the output created in markdown-process-demos.js
       const demoRegex = new RegExp(
-        /<\?php start="demo-block" filename="(.*?)"(?: gtsFilename="(.*?)")? hbs="(.*?)" js="(.*?)" gts="(.*?)" compactGts="(.*?)" custom="(.*?)" customLang="(.*?)" hidePreview="(.*?)" expanded="(.*?)" \?>\n?/,
+        /<\?php start="demo-block" gtsFilename="(.*?)"(?: classicFilename="(.*?)")? hbs="(.*?)" js="(.*?)" gts="(.*?)" compactGts="(.*?)" custom="(.*?)" customLang="(.*?)" hidePreview="(.*?)" expanded="(.*?)" \?>\n?/,
         'g',
       );
 
@@ -61,8 +61,8 @@ export const contentBlocks = function () {
         demoRegex,
         function (
           _match,
-          filename,
           gtsFilename,
+          classicFilename,
           hbsSnippet,
           jsSnippet,
           gtsSnippet,
@@ -72,7 +72,7 @@ export const contentBlocks = function () {
           hidePreview,
           expanded,
         ) {
-          return `<Doc::CodeGroup @filename="${filename}" @gtsFilename="${gtsFilename || ''}" @hbsSnippet="${hbsSnippet}" @jsSnippet="${jsSnippet}" @gtsSnippet="${gtsSnippet}" @compactGtsSnippet="${compactGtsSnippet}" @customSnippet="${customSnippet}" @customLang="${customLang}" @hidePreview="${hidePreview}" @isExpanded="${expanded}">\n`;
+          return `<Doc::CodeGroup @gtsFilename="${gtsFilename}" @classicFilename="${classicFilename || ''}" @hbsSnippet="${hbsSnippet}" @jsSnippet="${jsSnippet}" @gtsSnippet="${gtsSnippet}" @compactGtsSnippet="${compactGtsSnippet}" @customSnippet="${customSnippet}" @customLang="${customLang}" @hidePreview="${hidePreview}" @isExpanded="${expanded}">\n`;
         },
       );
 
diff --git a/website/lib/markdown/markdown-process-demos.js b/website/lib/markdown/markdown-process-demos.js
index 2c8eb099e41..dd1aefbcdc8 100644
--- a/website/lib/markdown/markdown-process-demos.js
+++ b/website/lib/markdown/markdown-process-demos.js
@@ -200,15 +200,8 @@ class MarkdownReplaceDemoBlocks extends Multifilter {
             }
           });
 
-          // Keep both forwarded ids explicit:
-          // - `filename` keeps classic preview lookup behavior (`*.classic`).
-          // - `gtsFilename` points to the modern component module (`*.gts`).
-          // If only a modern snippet exists, `filename` falls back to the gts id.
-          const filenameToForward =
-            classicFilenameToForward || gtsFilenameToForward;
-
           // NOTE: if change this, also need to change the regex in content-blocks.js
-          return `\n<?php start="demo-block" filename="${filenameToForward}" gtsFilename="${gtsFilenameToForward}" hbs="${codeSnippets.hbsSnippet}" js="${codeSnippets.jsSnippet}" gts="${codeSnippets.gtsSnippet}" compactGts="${codeSnippets.compactGtsSnippet}" custom="${codeSnippets.customSnippet}" customLang="${codeSnippets.customLang}" hidePreview="${shouldHidePreview}" expanded="${isExpanded}" ?><?php end="demo-block" ?>\n`;
+          return `\n<?php start="demo-block" gtsFilename="${gtsFilenameToForward}" classicFilename="${classicFilenameToForward}" hbs="${codeSnippets.hbsSnippet}" js="${codeSnippets.jsSnippet}" gts="${codeSnippets.gtsSnippet}" compactGts="${codeSnippets.compactGtsSnippet}" custom="${codeSnippets.customSnippet}" customLang="${codeSnippets.customLang}" hidePreview="${shouldHidePreview}" expanded="${isExpanded}" ?><?php end="demo-block" ?>\n`;
         },
       );
 

From b245260d5f9a034ff4675cab14f7618fa4c54f31 Mon Sep 17 00:00:00 2001
From: shleewhite <lee.white@hahicorp.com>
Date: Tue, 30 Jun 2026 12:15:04 -0400
Subject: [PATCH 08/12] address feedback

---
 .../app/components/doc/code-group/index.gts   | 93 ++++++++-----------
 1 file changed, 37 insertions(+), 56 deletions(-)

diff --git a/website/app/components/doc/code-group/index.gts b/website/app/components/doc/code-group/index.gts
index 9cee7680848..25cb59a0788 100644
--- a/website/app/components/doc/code-group/index.gts
+++ b/website/app/components/doc/code-group/index.gts
@@ -44,8 +44,8 @@ const CODE_GROUP_LANGUAGE_STORAGE_KEY = 'hds-doc-code-group-language';
 const CODE_GROUP_LANGUAGE_CHANGE_EVENT = 'hds-doc-code-group-language-change';
 
 // Helper to undo code escaping for display
-const unescapeCode = (code: string) => {
-  return code.replace(/\\n/g, '\n');
+const unescapeCode = (code?: string) => {
+  return code ? code.replace(/\\n/g, '\n') : '';
 };
 
 export default class DocCodeGroup extends Component<DocCodeGroupSignature> {
@@ -126,41 +126,35 @@ export default class DocCodeGroup extends Component<DocCodeGroupSignature> {
       return true;
     }
 
-    const hasHbsPreview = this.hasSnippet(this.args.hbsSnippet);
+    const hasHbsPreview = !!this.args.hbsSnippet;
     const hasGtsPreview =
-      this.hasSnippet(this.args.gtsSnippet) && !!this.gtsPreviewComponentId;
+      !!this.args.gtsSnippet && !!this.gtsPreviewComponentId;
 
     return !(hasHbsPreview || hasGtsPreview);
   }
 
-  private hasSnippet(snippet?: string) {
-    return !!snippet && snippet !== '';
-  }
-
   get classicPreviewComponentId() {
-    return this.hasSnippet(this.args.classicFilename)
+    return this.args.classicFilename !== ''
       ? this.args.classicFilename
       : undefined;
   }
 
   get gtsPreviewComponentId() {
-    return this.hasSnippet(this.args.gtsFilename)
-      ? this.args.gtsFilename
-      : undefined;
+    return this.args.gtsFilename ? this.args.gtsFilename : undefined;
   }
 
   get previewMode() {
     if (
       this.currentView === 'gts' &&
-      this.hasSnippet(this.args.gtsSnippet) &&
-      this.gtsPreviewComponentId
+      !!this.args.gtsSnippet &&
+      !!this.gtsPreviewComponentId
     ) {
       return 'component-module';
     }
 
     if (
       (this.currentView === 'hbs' || this.currentView === 'js') &&
-      this.hasSnippet(this.args.hbsSnippet)
+      !!this.args.hbsSnippet
     ) {
       return 'runtime-template';
     }
@@ -168,34 +162,9 @@ export default class DocCodeGroup extends Component<DocCodeGroupSignature> {
     return null;
   }
 
-  get hbsSnippet() {
-    const { hbsSnippet } = this.args;
-    return hbsSnippet ? unescapeCode(hbsSnippet) : '';
-  }
-
-  get gtsSnippet() {
-    const { gtsSnippet } = this.args;
-    return gtsSnippet ? unescapeCode(gtsSnippet) : '';
-  }
-
-  get jsSnippet() {
-    const { jsSnippet } = this.args;
-    return jsSnippet ? unescapeCode(jsSnippet) : '';
-  }
-
-  get compactGtsSnippet() {
-    const { compactGtsSnippet } = this.args;
-    return compactGtsSnippet ? unescapeCode(compactGtsSnippet) : '';
-  }
-
-  get customSnippet() {
-    const { customSnippet } = this.args;
-    return customSnippet ? unescapeCode(customSnippet) : '';
-  }
-
   get previewTemplateString() {
     return this.previewMode === 'runtime-template'
-      ? this.hbsSnippet
+      ? unescapeCode(this.args.hbsSnippet)
       : undefined;
   }
 
@@ -212,27 +181,42 @@ export default class DocCodeGroup extends Component<DocCodeGroupSignature> {
   }
 
   get currentSnippet() {
+    const {
+      jsSnippet,
+      gtsSnippet,
+      hbsSnippet,
+      customSnippet,
+      customLang,
+      compactGtsSnippet,
+    } = this.args;
+
     if (this.currentView === 'js') {
-      return { snippet: this.jsSnippet, language: 'js' };
+      return { snippet: unescapeCode(jsSnippet), language: 'js' };
     }
 
     if (this.currentView === 'gts') {
       if (this.isExpanded) {
-        return { snippet: this.gtsSnippet, language: 'gts' };
+        return {
+          snippet: unescapeCode(gtsSnippet),
+          language: 'gts',
+        };
       }
 
-      // to display the compact gts snippet correctly, need to use hbs syntax highlighting instead of gts
-      return { snippet: this.compactGtsSnippet, language: 'hbs' };
+      return {
+        snippet: unescapeCode(compactGtsSnippet),
+        // to display the compact gts snippet correctly, need to use hbs syntax highlighting instead of gts
+        language: 'hbs',
+      };
     }
 
     if (this.currentView === 'custom') {
       return {
-        snippet: this.customSnippet,
-        language: this.args.customLang || 'text',
+        snippet: unescapeCode(customSnippet),
+        language: customLang || 'text',
       };
     }
 
-    return { snippet: this.hbsSnippet, language: 'hbs' };
+    return { snippet: unescapeCode(hbsSnippet), language: 'hbs' };
   }
 
   get hasFooter() {
@@ -253,28 +237,25 @@ export default class DocCodeGroup extends Component<DocCodeGroupSignature> {
   };
 
   get shouldSyncLanguageSelection() {
-    return (
-      this.hasSnippet(this.args.hbsSnippet) &&
-      this.hasSnippet(this.args.gtsSnippet)
-    );
+    return !!this.args.hbsSnippet && !!this.args.gtsSnippet;
   }
 
   get languageOptions() {
     const options: Array<LanguageOption> = [];
 
-    if (this.hasSnippet(this.args.hbsSnippet)) {
+    if (this.args.hbsSnippet) {
       options.push({ label: '.hbs', value: 'hbs' });
     }
 
-    if (this.hasSnippet(this.args.jsSnippet)) {
+    if (this.args.jsSnippet) {
       options.push({ label: '.js', value: 'js' });
     }
 
-    if (this.hasSnippet(this.args.gtsSnippet)) {
+    if (this.args.gtsSnippet) {
       options.push({ label: '.gts', value: 'gts' });
     }
 
-    if (this.args.customLang && this.hasSnippet(this.args.customSnippet)) {
+    if (this.args.customLang && !!this.args.customSnippet) {
       options.push({ label: `.${this.args.customLang}`, value: 'custom' });
     }
 

From 3ce286ad50a652af722de5c7aca1a38ce1286edc Mon Sep 17 00:00:00 2001
From: shleewhite <lee.white@hahicorp.com>
Date: Tue, 30 Jun 2026 13:07:23 -0400
Subject: [PATCH 09/12] simplify getters

---
 .../app/components/doc/code-group/index.gts   | 55 +++++--------------
 1 file changed, 15 insertions(+), 40 deletions(-)

diff --git a/website/app/components/doc/code-group/index.gts b/website/app/components/doc/code-group/index.gts
index 25cb59a0788..99a9fd7145d 100644
--- a/website/app/components/doc/code-group/index.gts
+++ b/website/app/components/doc/code-group/index.gts
@@ -127,57 +127,32 @@ export default class DocCodeGroup extends Component<DocCodeGroupSignature> {
     }
 
     const hasHbsPreview = !!this.args.hbsSnippet;
-    const hasGtsPreview =
-      !!this.args.gtsSnippet && !!this.gtsPreviewComponentId;
+    const hasGtsPreview = !!this.args.gtsSnippet && !!this.args.gtsFilename;
 
     return !(hasHbsPreview || hasGtsPreview);
   }
 
-  get classicPreviewComponentId() {
-    return this.args.classicFilename !== ''
-      ? this.args.classicFilename
-      : undefined;
-  }
-
-  get gtsPreviewComponentId() {
-    return this.args.gtsFilename ? this.args.gtsFilename : undefined;
-  }
-
-  get previewMode() {
+  get preview() {
     if (
       this.currentView === 'gts' &&
-      !!this.args.gtsSnippet &&
-      !!this.gtsPreviewComponentId
+      this.args.gtsSnippet &&
+      this.args.gtsFilename
     ) {
-      return 'component-module';
+      return {
+        componentId: this.args.gtsFilename,
+        templateString: undefined,
+      };
     }
 
     if (
       (this.currentView === 'hbs' || this.currentView === 'js') &&
-      !!this.args.hbsSnippet
+      this.args.hbsSnippet
     ) {
-      return 'runtime-template';
-    }
-
-    return null;
-  }
-
-  get previewTemplateString() {
-    return this.previewMode === 'runtime-template'
-      ? unescapeCode(this.args.hbsSnippet)
-      : undefined;
-  }
-
-  get previewComponentId() {
-    if (this.previewMode === 'component-module') {
-      return this.gtsPreviewComponentId;
-    }
-
-    if (this.previewMode === 'runtime-template') {
-      return this.classicPreviewComponentId;
+      return {
+        componentId: this.args.classicFilename,
+        templateString: this.args.hbsSnippet,
+      };
     }
-
-    return undefined;
   }
 
   get currentSnippet() {
@@ -327,8 +302,8 @@ export default class DocCodeGroup extends Component<DocCodeGroupSignature> {
       {{#if (notEq this.hidePreview true)}}
         <div class="doc-code-group__preview">
           <DynamicTemplate
-            @templateString={{this.previewTemplateString}}
-            @componentId={{this.previewComponentId}}
+            @templateString={{this.preview.templateString}}
+            @componentId={{this.preview.componentId}}
           />
         </div>
       {{/if}}

From 412288e5147d00ef085e03e5b0e180bd01e51f1b Mon Sep 17 00:00:00 2001
From: shleewhite <lee.white@hahicorp.com>
Date: Tue, 30 Jun 2026 13:35:28 -0400
Subject: [PATCH 10/12] fix: use unescaped code for template string

---
 website/app/components/doc/code-group/index.gts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/app/components/doc/code-group/index.gts b/website/app/components/doc/code-group/index.gts
index 99a9fd7145d..38e0714ea2f 100644
--- a/website/app/components/doc/code-group/index.gts
+++ b/website/app/components/doc/code-group/index.gts
@@ -150,7 +150,7 @@ export default class DocCodeGroup extends Component<DocCodeGroupSignature> {
     ) {
       return {
         componentId: this.args.classicFilename,
-        templateString: this.args.hbsSnippet,
+        templateString: unescapeCode(this.args.hbsSnippet),
       };
     }
   }

From 40a7bc54b244b8a3b9e323654bc4e2a74df60d88 Mon Sep 17 00:00:00 2001
From: shleewhite <lee.white@hahicorp.com>
Date: Wed, 1 Jul 2026 14:44:00 -0400
Subject: [PATCH 11/12] more feedback

---
 .../app/components/doc/code-group/index.gts   | 31 ++++++++++---------
 website/app/components/dynamic-template.gjs   |  4 ++-
 .../showdown-extensions/content-blocks.js     |  8 ++---
 .../code/code-snippets/accordion-size.gts     |  2 +-
 .../lib/markdown/markdown-process-demos.js    | 12 +++----
 5 files changed, 30 insertions(+), 27 deletions(-)

diff --git a/website/app/components/doc/code-group/index.gts b/website/app/components/doc/code-group/index.gts
index 38e0714ea2f..0f1c7a2a991 100644
--- a/website/app/components/doc/code-group/index.gts
+++ b/website/app/components/doc/code-group/index.gts
@@ -6,7 +6,6 @@ import Component from '@glimmer/component';
 import { registerDestructor } from '@ember/destroyable';
 import { CodeBlock } from 'ember-shiki';
 import { tracked } from '@glimmer/tracking';
-import { notEq } from 'ember-truth-helpers';
 import { modifier } from 'ember-modifier';
 import { service } from '@ember/service';
 
@@ -22,8 +21,8 @@ import DynamicTemplate from 'website/components/dynamic-template';
 
 interface DocCodeGroupSignature {
   Args: {
-    gtsFilename?: string;
-    classicFilename?: string;
+    gtsComponentId?: string;
+    classicComponentId?: string;
     hbsSnippet?: string;
     jsSnippet?: string;
     gtsSnippet?: string;
@@ -121,35 +120,37 @@ export default class DocCodeGroup extends Component<DocCodeGroupSignature> {
   }
 
   // NOTE: the dynamic template requires an Ember component to render a preview. If there is not a component (ex. only a sass/yaml/bash snippet), we hide the preview by default.
-  get hidePreview() {
+  get showPreview() {
     if (this.args.hidePreview === 'true') {
-      return true;
+      return false;
     }
 
-    const hasHbsPreview = !!this.args.hbsSnippet;
-    const hasGtsPreview = !!this.args.gtsSnippet && !!this.args.gtsFilename;
+    const hasHbsPreview =
+      !!this.args.hbsSnippet && !!this.args.classicComponentId;
+    const hasGtsPreview = !!this.args.gtsSnippet && !!this.args.gtsComponentId;
 
-    return !(hasHbsPreview || hasGtsPreview);
+    return hasHbsPreview || hasGtsPreview;
   }
 
   get preview() {
     if (
       this.currentView === 'gts' &&
       this.args.gtsSnippet &&
-      this.args.gtsFilename
+      this.args.gtsComponentId
     ) {
       return {
-        componentId: this.args.gtsFilename,
+        componentId: this.args.gtsComponentId,
         templateString: undefined,
       };
     }
 
     if (
       (this.currentView === 'hbs' || this.currentView === 'js') &&
-      this.args.hbsSnippet
+      this.args.hbsSnippet &&
+      this.args.classicComponentId
     ) {
       return {
-        componentId: this.args.classicFilename,
+        componentId: this.args.classicComponentId,
         templateString: unescapeCode(this.args.hbsSnippet),
       };
     }
@@ -157,12 +158,12 @@ export default class DocCodeGroup extends Component<DocCodeGroupSignature> {
 
   get currentSnippet() {
     const {
+      hbsSnippet,
       jsSnippet,
       gtsSnippet,
-      hbsSnippet,
+      compactGtsSnippet,
       customSnippet,
       customLang,
-      compactGtsSnippet,
     } = this.args;
 
     if (this.currentView === 'js') {
@@ -299,7 +300,7 @@ export default class DocCodeGroup extends Component<DocCodeGroupSignature> {
 
   <template>
     <div class="doc-code-group">
-      {{#if (notEq this.hidePreview true)}}
+      {{#if this.showPreview}}
         <div class="doc-code-group__preview">
           <DynamicTemplate
             @templateString={{this.preview.templateString}}
diff --git a/website/app/components/dynamic-template.gjs b/website/app/components/dynamic-template.gjs
index 1e44061ac9d..ab713a01f5a 100644
--- a/website/app/components/dynamic-template.gjs
+++ b/website/app/components/dynamic-template.gjs
@@ -61,7 +61,9 @@ export default class DynamicTemplate extends Component {
         setComponentTemplate(compiledTemplate, component);
       } else {
         // Component module mode (single file component): render a precompiled component by id.
-        component = componentId || null;
+        component = componentId
+          ? getOwner(this).factoryFor(`component:${componentId}`)?.class || null
+          : null;
       }
 
       // eslint-disable-next-line ember/no-side-effects
diff --git a/website/app/shared/showdown-extensions/content-blocks.js b/website/app/shared/showdown-extensions/content-blocks.js
index 1f6ecab61f9..5e3f6c7df02 100644
--- a/website/app/shared/showdown-extensions/content-blocks.js
+++ b/website/app/shared/showdown-extensions/content-blocks.js
@@ -53,7 +53,7 @@ export const contentBlocks = function () {
 
       // NOTE: this regex must match the output created in markdown-process-demos.js
       const demoRegex = new RegExp(
-        /<\?php start="demo-block" gtsFilename="(.*?)"(?: classicFilename="(.*?)")? hbs="(.*?)" js="(.*?)" gts="(.*?)" compactGts="(.*?)" custom="(.*?)" customLang="(.*?)" hidePreview="(.*?)" expanded="(.*?)" \?>\n?/,
+        /<\?php start="demo-block" classicComponentId="(.*?)" gtsComponentId="(.*?)" hbs="(.*?)" js="(.*?)" gts="(.*?)" compactGts="(.*?)" custom="(.*?)" customLang="(.*?)" hidePreview="(.*?)" expanded="(.*?)" \?>\n?/,
         'g',
       );
 
@@ -61,8 +61,8 @@ export const contentBlocks = function () {
         demoRegex,
         function (
           _match,
-          gtsFilename,
-          classicFilename,
+          classicComponentId,
+          gtsComponentId,
           hbsSnippet,
           jsSnippet,
           gtsSnippet,
@@ -72,7 +72,7 @@ export const contentBlocks = function () {
           hidePreview,
           expanded,
         ) {
-          return `<Doc::CodeGroup @gtsFilename="${gtsFilename}" @classicFilename="${classicFilename || ''}" @hbsSnippet="${hbsSnippet}" @jsSnippet="${jsSnippet}" @gtsSnippet="${gtsSnippet}" @compactGtsSnippet="${compactGtsSnippet}" @customSnippet="${customSnippet}" @customLang="${customLang}" @hidePreview="${hidePreview}" @isExpanded="${expanded}">\n`;
+          return `<Doc::CodeGroup @classicComponentId="${classicComponentId}" @gtsComponentId="${gtsComponentId}" @hbsSnippet="${hbsSnippet}" @jsSnippet="${jsSnippet}" @gtsSnippet="${gtsSnippet}" @compactGtsSnippet="${compactGtsSnippet}" @customSnippet="${customSnippet}" @customLang="${customLang}" @hidePreview="${hidePreview}" @isExpanded="${expanded}">\n`;
         },
       );
 
diff --git a/website/docs/components/accordion/partials/code/code-snippets/accordion-size.gts b/website/docs/components/accordion/partials/code/code-snippets/accordion-size.gts
index c13bd0a28fb..a2292d60e6f 100644
--- a/website/docs/components/accordion/partials/code/code-snippets/accordion-size.gts
+++ b/website/docs/components/accordion/partials/code/code-snippets/accordion-size.gts
@@ -5,7 +5,7 @@ import { HdsAccordion } from '@hashicorp/design-system-components/components';
 const LocalComponent: TemplateOnlyComponent = <template>
   <HdsAccordion @size="large" as |A|>
     <A.Item>
-      <:toggle>DIFFERENT COMPONENT</:toggle>
+      <:toggle>Item one</:toggle>
       <:content>
         Additional content for item one
       </:content>
diff --git a/website/lib/markdown/markdown-process-demos.js b/website/lib/markdown/markdown-process-demos.js
index dd1aefbcdc8..daab73ccee4 100644
--- a/website/lib/markdown/markdown-process-demos.js
+++ b/website/lib/markdown/markdown-process-demos.js
@@ -20,7 +20,7 @@ const demoBlockRegex =
  * Example input path: "var/folders/68/g3fv_h7538xcqf6nd48jm8m40000gn/T/broccoli-59163KsQiVU7Es4GZ/out-158-funnel/components/accordion/partials/code/code-snippets/accordion-expand-all.classic"
  */
 const fileNameRegex =
-  /((?:getting-started|foundations|components|layouts|utilities|overrides|patterns|testing).*?)\.(?:hbs|js|gts)/;
+  /((?:getting-started|foundations|components|layouts|utilities|overrides|patterns|testing).*?)(?:\.hbs|\.gts)$/;
 
 const SUPPORTED_FILE_EXTENSIONS = [
   '.classic.hbs',
@@ -159,8 +159,8 @@ class MarkdownReplaceDemoBlocks extends Multifilter {
             customLang: '',
           };
 
-          let classicFilenameToForward = '';
-          let gtsFilenameToForward = '';
+          let classicComponentIdToForward = '';
+          let gtsComponentIdToForward = '';
 
           SUPPORTED_FILE_EXTENSIONS.forEach((ext) => {
             const fileToCheck = `${fileName.trim()}${ext}`;
@@ -172,7 +172,7 @@ class MarkdownReplaceDemoBlocks extends Multifilter {
 
               if (ext === '.classic.hbs') {
                 codeSnippets.hbsSnippet = escapeCode(stripAllIgnores(code));
-                classicFilenameToForward = getComponentIdFromPath(filePath);
+                classicComponentIdToForward = getComponentIdFromPath(filePath);
               }
 
               if (ext === '.classic.js' || ext === '.js') {
@@ -184,7 +184,7 @@ class MarkdownReplaceDemoBlocks extends Multifilter {
                 codeSnippets.compactGtsSnippet = escapeCode(
                   stripAllIgnores(getCompactGtsSnippet(code)),
                 );
-                gtsFilenameToForward = getComponentIdFromPath(filePath);
+                gtsComponentIdToForward = getComponentIdFromPath(filePath);
               }
 
               if (
@@ -201,7 +201,7 @@ class MarkdownReplaceDemoBlocks extends Multifilter {
           });
 
           // NOTE: if change this, also need to change the regex in content-blocks.js
-          return `\n<?php start="demo-block" gtsFilename="${gtsFilenameToForward}" classicFilename="${classicFilenameToForward}" hbs="${codeSnippets.hbsSnippet}" js="${codeSnippets.jsSnippet}" gts="${codeSnippets.gtsSnippet}" compactGts="${codeSnippets.compactGtsSnippet}" custom="${codeSnippets.customSnippet}" customLang="${codeSnippets.customLang}" hidePreview="${shouldHidePreview}" expanded="${isExpanded}" ?><?php end="demo-block" ?>\n`;
+          return `\n<?php start="demo-block" classicComponentId="${classicComponentIdToForward}" gtsComponentId="${gtsComponentIdToForward}" hbs="${codeSnippets.hbsSnippet}" js="${codeSnippets.jsSnippet}" gts="${codeSnippets.gtsSnippet}" compactGts="${codeSnippets.compactGtsSnippet}" custom="${codeSnippets.customSnippet}" customLang="${codeSnippets.customLang}" hidePreview="${shouldHidePreview}" expanded="${isExpanded}" ?><?php end="demo-block" ?>\n`;
         },
       );
 

From 7bdcc32ef8b759068f395b9f0fb1c5d04a84dd9f Mon Sep 17 00:00:00 2001
From: shleewhite <lee.white@hahicorp.com>
Date: Thu, 2 Jul 2026 14:24:14 -0400
Subject: [PATCH 12/12] couple small fixes

---
 website/app/components/doc/code-group/index.gts |  2 +-
 website/lib/markdown/markdown-process-demos.js  | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/website/app/components/doc/code-group/index.gts b/website/app/components/doc/code-group/index.gts
index 0f1c7a2a991..24d7cc63c8e 100644
--- a/website/app/components/doc/code-group/index.gts
+++ b/website/app/components/doc/code-group/index.gts
@@ -21,8 +21,8 @@ import DynamicTemplate from 'website/components/dynamic-template';
 
 interface DocCodeGroupSignature {
   Args: {
-    gtsComponentId?: string;
     classicComponentId?: string;
+    gtsComponentId?: string;
     hbsSnippet?: string;
     jsSnippet?: string;
     gtsSnippet?: string;
diff --git a/website/lib/markdown/markdown-process-demos.js b/website/lib/markdown/markdown-process-demos.js
index daab73ccee4..f063025e096 100644
--- a/website/lib/markdown/markdown-process-demos.js
+++ b/website/lib/markdown/markdown-process-demos.js
@@ -159,8 +159,8 @@ class MarkdownReplaceDemoBlocks extends Multifilter {
             customLang: '',
           };
 
-          let classicComponentIdToForward = '';
-          let gtsComponentIdToForward = '';
+          let classicComponentId = '';
+          let gtsComponentId = '';
 
           SUPPORTED_FILE_EXTENSIONS.forEach((ext) => {
             const fileToCheck = `${fileName.trim()}${ext}`;
@@ -172,7 +172,7 @@ class MarkdownReplaceDemoBlocks extends Multifilter {
 
               if (ext === '.classic.hbs') {
                 codeSnippets.hbsSnippet = escapeCode(stripAllIgnores(code));
-                classicComponentIdToForward = getComponentIdFromPath(filePath);
+                classicComponentId = getComponentIdFromPath(filePath);
               }
 
               if (ext === '.classic.js' || ext === '.js') {
@@ -184,7 +184,7 @@ class MarkdownReplaceDemoBlocks extends Multifilter {
                 codeSnippets.compactGtsSnippet = escapeCode(
                   stripAllIgnores(getCompactGtsSnippet(code)),
                 );
-                gtsComponentIdToForward = getComponentIdFromPath(filePath);
+                gtsComponentId = getComponentIdFromPath(filePath);
               }
 
               if (
@@ -201,7 +201,7 @@ class MarkdownReplaceDemoBlocks extends Multifilter {
           });
 
           // NOTE: if change this, also need to change the regex in content-blocks.js
-          return `\n<?php start="demo-block" classicComponentId="${classicComponentIdToForward}" gtsComponentId="${gtsComponentIdToForward}" hbs="${codeSnippets.hbsSnippet}" js="${codeSnippets.jsSnippet}" gts="${codeSnippets.gtsSnippet}" compactGts="${codeSnippets.compactGtsSnippet}" custom="${codeSnippets.customSnippet}" customLang="${codeSnippets.customLang}" hidePreview="${shouldHidePreview}" expanded="${isExpanded}" ?><?php end="demo-block" ?>\n`;
+          return `\n<?php start="demo-block" classicComponentId="${classicComponentId}" gtsComponentId="${gtsComponentId}" hbs="${codeSnippets.hbsSnippet}" js="${codeSnippets.jsSnippet}" gts="${codeSnippets.gtsSnippet}" compactGts="${codeSnippets.compactGtsSnippet}" custom="${codeSnippets.customSnippet}" customLang="${codeSnippets.customLang}" hidePreview="${shouldHidePreview}" expanded="${isExpanded}" ?><?php end="demo-block" ?>\n`;
         },
       );