From 26ea76231977a470aa9fa0b5026258b70fb49e84 Mon Sep 17 00:00:00 2001
From: Patrick Pircher <patrick.pircher@ibm.com>
Date: Thu, 6 Aug 2026 00:28:26 +0200
Subject: [PATCH 1/6] docs(docs-app): correct shadow-demo comments; note kolay
 wrapDemos status

`shadow-demo-element.ts` still claimed it imports the app's stylesheets into
each shadow root "mirroring `<Shadowed includeStyles>`". It stopped doing that
in 1d7bfa33 ("do not add host styles"), which left the `STYLESHEET_SELECTOR`
constant dead and the comment wrong. Drop the constant and describe what
actually supplies the CSS: demos render `<ThemeSupport />` themselves, so the
Carbon stylesheets land inside the shadow root as an inline `<style>`, and
`:root` theme tokens inherit across the boundary as custom properties.

Also record why `rehype-shadow-demo.ts` stays hand-rolled. kolay merged a
generic `wrapDemos` rehype plugin (universal-ember/kolay#361, unreleased as of
kolay 5.4.0 - it ships in the pending 6.0.0), but it wraps the demo placeholder
in a component invocation rather than renaming it. repl-sdk grafts each
compiled demo in afterwards via `element.querySelector('#<placeholderId>')`,
which does not cross a shadow boundary, so a shadow-DOM wrapper would hide the
placeholder and trip repl-sdk's "Could not find placeholder / target element"
assertion. Renaming the placeholder keeps it in the light DOM, which is why the
current implementation works.

Comments only - no behavior change.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Signed-off-by: Patrick Pircher <patrick.pircher@ibm.com>
---
 .../app/docs-support/rehype-shadow-demo.ts     | 18 ++++++++++++++++--
 .../app/docs-support/shadow-demo-element.ts    | 14 ++++++++++----
 2 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/docs-app/app/docs-support/rehype-shadow-demo.ts b/docs-app/app/docs-support/rehype-shadow-demo.ts
index 6038929d5..b02e054c8 100644
--- a/docs-app/app/docs-support/rehype-shadow-demo.ts
+++ b/docs-app/app/docs-support/rehype-shadow-demo.ts
@@ -48,8 +48,22 @@ function forEachRawNode(node: unknown, visit: (node: RawNode) => void) {
  * Rather than teaching repl-sdk's compiler about shadow roots, this plugin
  * renames each live demo's placeholder tag to `<carbon-shadow-demo>` (a
  * custom element registered in `shadow-demo-element.ts`), which performs the
- * actual `attachShadow` + style-import once the demo's rendered element is
- * appended into it. Fences marked `no-shadow` are left as plain `<div>`s.
+ * actual `attachShadow` once the demo's rendered element is appended into
+ * it. Fences marked `no-shadow` are left as plain `<div>`s.
+ *
+ * Kolay has since grown a generic `wrapDemos` rehype plugin (`kolay/wrap-demos`,
+ * merged in universal-ember/kolay#361, unreleased as of kolay 5.4.0 - it ships
+ * in the pending 6.0.0). It is *not* a drop-in replacement for this: it wraps
+ * the placeholder in a component invocation (`<Shadowed>{placeholder}</Shadowed>`)
+ * rather than renaming it, which puts the placeholder inside the wrapper's
+ * shadow root. repl-sdk grafts each compiled demo in afterwards via
+ * `element.querySelector('#<placeholderId>')` (see repl-sdk's
+ * `src/compilers/markdown.js` / `src/compilers/ember/gmd.js`), and that lookup
+ * does not cross a shadow boundary - so a shadow-DOM wrapper would trip its
+ * "Could not find placeholder / target element" assertion. Renaming the
+ * placeholder itself, as below, keeps it in the light DOM and is why this
+ * works. `wrapDemos` is still useful for non-isolating chrome (borders,
+ * labels) once kolay 6 lands.
  */
 export function rehypeShadowDemo() {
   return (tree: unknown, file: VFileLike) => {
diff --git a/docs-app/app/docs-support/shadow-demo-element.ts b/docs-app/app/docs-support/shadow-demo-element.ts
index ae4c4b96d..0ac1ecd42 100644
--- a/docs-app/app/docs-support/shadow-demo-element.ts
+++ b/docs-app/app/docs-support/shadow-demo-element.ts
@@ -1,10 +1,16 @@
-const STYLESHEET_SELECTOR = 'link[rel="stylesheet"]';
 const TAG_NAME = 'carbon-shadow-demo';
 
 /**
- * Style-isolates a live glimdown demo in its own shadow root, importing the
- * app's stylesheets (mirroring ember-primitives' `<Shadowed includeStyles>`)
- * so the isolated demo still picks up Carbon's styling.
+ * Style-isolates a live glimdown demo in its own shadow root.
+ *
+ * Nothing is imported into the shadow root on our behalf: this used to copy
+ * the document's `<link rel="stylesheet">` tags in as `@import`s (mirroring
+ * ember-primitives' `<Shadowed includeStyles>`), but that was dropped again
+ * because the demos that need Carbon's CSS already inline it themselves --
+ * they render `<ThemeSupport />` (see `theme-support.gts`), which emits a
+ * `<style>` with the Carbon stylesheets *inside* the demo, and therefore
+ * inside this shadow root. Theme tokens defined on `:root` reach here too,
+ * since custom properties inherit through the shadow boundary.
  *
  * repl-sdk's gmd compiler renders each demo by `appendChild`-ing it into the
  * placeholder element some time after this element connects (see

From 9751849833a1febc80191f90c2b727a7fafb39f1 Mon Sep 17 00:00:00 2001
From: Patrick Pircher <patrick.pircher@ibm.com>
Date: Fri, 14 Aug 2026 10:24:39 +0200
Subject: [PATCH 2/6] feat(docs-app): support build-time .gjs.md docs, convert
 Tag + List Item

Start of moving docs-app component docs off runtime-compiled .md (kolay's
in-browser REPL) to build-time-compiled .gjs.md, following up on this PR's
own investigation into kolay's wrapDemos status.

Two infra gaps had to close first, both scoped to build-time docs only:

- rehypeShadowDemo renames each demo placeholder div to a custom element,
  which kolay's build-time compiler can't find (it string-replaces the
  placeholder's literal `</div>`, which no longer exists), silently
  producing empty demos. Give it an opt-in `forBuildTimeInjection` mode
  that keeps an inner `<div>` for the injector to target; the runtime call
  site is untouched and emits byte-identical output.
- Demo fences import `carbon-components-ember/components` and
  `carbon-components-ember/helpers`, which only resolve at runtime via
  setupKolay's dynamic module map (the package's real exports are the
  `/index` forms). Alias them for the build-time path, plus a `docs-support`
  alias backing `ThemeSupport`/`didInsert` and a `scope` string so
  `<ThemeSwitcher />`/`<APIDocs>`/etc. resolve at the top level of a
  `.gjs.md` file, mirroring the runtime `topLevelScope`.

Converts tags.md and list/item.md (one flat, one nested-folder page) as a
verified spike - browser-checked (not just glint/build) against an
unconverted control page, since an empty demo looks identical to a known
docs-app live-preview flake otherwise. notifications.md is intentionally
left as .md: its demo uses setOwner() on a plain class for @service
injection, which has no build-time equivalent without rewriting it as a
real Component.

Remaining ~58 .md docs still need converting; recipe and gotchas recorded
in .pjp-runner/todo.md for follow-up work.

Signed-off-by: Patrick Pircher <patrick.pircher@ibm.com>
---
 docs-app/app/docs-support/index.ts            |  8 ++++
 .../app/docs-support/rehype-shadow-demo.ts    | 16 +++++++-
 .../list/{item.md => item.gjs.md}             |  0
 .../2-components/{tags.md => tags.gjs.md}     |  0
 docs-app/vite.config.mjs                      | 38 +++++++++++++++++++
 5 files changed, 60 insertions(+), 2 deletions(-)
 create mode 100644 docs-app/app/docs-support/index.ts
 rename docs-app/app/templates/2-components/list/{item.md => item.gjs.md} (100%)
 rename docs-app/app/templates/2-components/{tags.md => tags.gjs.md} (100%)

diff --git a/docs-app/app/docs-support/index.ts b/docs-app/app/docs-support/index.ts
new file mode 100644
index 000000000..6c5ba5260
--- /dev/null
+++ b/docs-app/app/docs-support/index.ts
@@ -0,0 +1,8 @@
+// Real ES module backing the `docs-support` bare specifier that live demo
+// fences import from. Runtime `.md` docs resolve that specifier through
+// setupKolay's dynamic `modules` map (see routes/application.ts); build-time
+// `.gjs.md` docs go through real imports instead, resolved via the
+// `resolve.alias` entry in vite.config.mjs pointing at this file.
+export { default as ThemeSupport } from './theme-support';
+export { default as ThemeSwitcher } from './theme-switcher';
+export { default as didInsert } from '@ember/render-modifiers/modifiers/did-insert';
diff --git a/docs-app/app/docs-support/rehype-shadow-demo.ts b/docs-app/app/docs-support/rehype-shadow-demo.ts
index b02e054c8..e5afb6a5e 100644
--- a/docs-app/app/docs-support/rehype-shadow-demo.ts
+++ b/docs-app/app/docs-support/rehype-shadow-demo.ts
@@ -65,7 +65,7 @@ function forEachRawNode(node: unknown, visit: (node: RawNode) => void) {
  * works. `wrapDemos` is still useful for non-isolating chrome (borders,
  * labels) once kolay 6 lands.
  */
-export function rehypeShadowDemo() {
+export function rehypeShadowDemo({ forBuildTimeInjection = false } = {}) {
   return (tree: unknown, file: VFileLike) => {
     const liveCode = file.data?.liveCode ?? [];
     const shadowed = new Set(
@@ -85,7 +85,19 @@ export function rehypeShadowDemo() {
 
       if (!id || !shadowed.has(id)) return;
 
-      node.value = `<carbon-shadow-demo id="${id}" class="${className}"></carbon-shadow-demo>`;
+      // kolay's build-time `.gjs.md` compiler (gjs-md.js's
+      // rehypeInjectComponentInvocation) finds this node by its `id` and
+      // injects the demo's compiled component invocation by string-replacing
+      // the node's *literal* `</div>` - it doesn't re-run the placeholder
+      // regex, so it doesn't know about `<carbon-shadow-demo>`. An inner
+      // `<div>` gives it something to match, and CarbonShadowDemo re-parents
+      // any child into the shadow root regardless of its tag, so the extra
+      // wrapper is otherwise inert. Runtime `.md` grafts by `id` directly
+      // onto `<carbon-shadow-demo>` (see shadow-demo-element.ts), so it does
+      // not need this and keeps the original two-attribute form.
+      node.value = forBuildTimeInjection
+        ? `<carbon-shadow-demo id="${id}" class="${className}"><div></div></carbon-shadow-demo>`
+        : `<carbon-shadow-demo id="${id}" class="${className}"></carbon-shadow-demo>`;
     });
   };
 }
diff --git a/docs-app/app/templates/2-components/list/item.md b/docs-app/app/templates/2-components/list/item.gjs.md
similarity index 100%
rename from docs-app/app/templates/2-components/list/item.md
rename to docs-app/app/templates/2-components/list/item.gjs.md
diff --git a/docs-app/app/templates/2-components/tags.md b/docs-app/app/templates/2-components/tags.gjs.md
similarity index 100%
rename from docs-app/app/templates/2-components/tags.md
rename to docs-app/app/templates/2-components/tags.gjs.md
diff --git a/docs-app/vite.config.mjs b/docs-app/vite.config.mjs
index a203bee72..92a214568 100644
--- a/docs-app/vite.config.mjs
+++ b/docs-app/vite.config.mjs
@@ -6,6 +6,20 @@ import { transformAsync } from '@babel/core';
 import { defineConfig } from "vite";
 import { resolve, dirname, basename, join } from "path";
 
+import { rehypeShadowDemo } from "./app/docs-support/rehype-shadow-demo";
+
+// Components invocable at the top level of a build-time `.gjs.md` doc (e.g.
+// `<ThemeSwitcher />` above the first heading), mirroring the `topLevelScope`
+// passed to `setupKolay` for runtime `.md` docs in routes/application.ts.
+// Bare imports here must be real, resolvable module specifiers -- unlike
+// `setupKolay`'s `modules` map, there's no dynamic runtime lookup at build
+// time.
+const kolayScope = `
+import ThemeSwitcher from 'docs-app/docs-support/theme-switcher';
+import { APIDocs, ComponentSignature, ModifierSignature } from 'docs-app/routes/api-docs';
+import { Callout } from '@universal-ember/docs-support';
+`;
+
 function astroturf() {
 
   const astroturfFiles = {};
@@ -81,6 +95,26 @@ export default defineConfig((/* { mode } */) => {
         "ember-source",
         "@ember/test-waiters",
       ],
+      alias: [
+        // Backs the `docs-support` bare specifier that live demo fences
+        // import `ThemeSupport`/`didInsert`/etc. from. Runtime `.md` docs
+        // resolve it dynamically via setupKolay's `modules` map instead (see
+        // routes/application.ts); this alias is only exercised by build-time
+        // `.gjs.md` docs.
+        { find: "docs-support", replacement: resolve("./app/docs-support/index.ts") },
+        // Demo fences conventionally import from these two extension-less
+        // specifiers, but the addon's package.json `exports` only maps
+        // `./*` to `dist/*.js` -- there is no `dist/components.js` or
+        // `dist/helpers.js`, only `dist/components/index.js` and
+        // `dist/helpers/index.js`. Runtime `.md` docs never hit real module
+        // resolution for these (setupKolay's `modules` map short-circuits
+        // it with the `/index` forms), so build-time `.gjs.md` docs need
+        // the same specifiers aliased to their real, resolvable form.
+        // Anchored `RegExp`s so already-correct `/index` (or `/icon`, etc.)
+        // specifiers elsewhere in the app don't also match and recurse.
+        { find: /^carbon-components-ember\/components$/, replacement: "carbon-components-ember/components/index" },
+        { find: /^carbon-components-ember\/helpers$/, replacement: "carbon-components-ember/helpers/index" },
+      ],
     },
     plugins: [
       // Runs a classic ember-cli prebuild so @embroider/core's resolver has
@@ -98,6 +132,10 @@ export default defineConfig((/* { mode } */) => {
         // that group, so there is no separate top-level `src` option.
         groups: [],
         packages: ["carbon-components-ember"],
+        // Applies to build-time `.gjs.md` docs only; runtime `.md` docs get
+        // their own copies of these via setupKolay in routes/application.ts.
+        scope: kolayScope,
+        rehypePlugins: [[rehypeShadowDemo, { forBuildTimeInjection: true }]],
       }),
       babel({
         babelHelpers: "runtime",

From 1f33d63cc89fa8969c625b211a427ed2c95d237c Mon Sep 17 00:00:00 2001
From: Patrick Pircher <patrick.pircher@ibm.com>
Date: Fri, 14 Aug 2026 13:02:34 +0200
Subject: [PATCH 3/6] feat(docs-app): convert flat 2-components/*.md docs to
 .gjs.md

Applies the recipe from the Tag/List Item spike (previous commit) to the
remaining 32 flat top-level component docs, moving them off the
runtime-compiled REPL onto kolay's build-time .gjs.md compiler. Each file
browser-verified (Playwright, headless build of dist) to confirm its live
demos actually render component markup inside their shadow root, not just
that glint/build stay green - an empty demo looks identical to a known
docs-app live-preview flake otherwise.

pagination.md's "sizes" demo used `@onPageChanged={{() => {}}}`, an inline
arrow expression inside a mustache that kolay's runtime REPL tolerated but
the real ember-template-compiler used for build-time .gjs.md does not
(`Expecting 'OPEN_SEXPR', ... got 'CLOSE_SEXPR'`). Fixed to use the same
`const noop = () => null` + `{{noop}}` pattern already used by the other two
demos in that file.

Remaining nested-folder docs (form/, list/, select/, etc.) and
1-get-started/index.md are left for a follow-up batch; notifications.md
stays .md pending its Context class becoming a real Component (see
.pjp-runner/todo.md).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Signed-off-by: Patrick Pircher <patrick.pircher@ibm.com>
---
 .../2-components/{accordion.md => accordion.gjs.md}    |  0
 .../{breadcrumbs.md => breadcrumbs.gjs.md}             |  0
 .../2-components/{button.md => button.gjs.md}          |  0
 .../2-components/{charts.md => charts.gjs.md}          |  0
 .../2-components/{checkbox.md => checkbox.gjs.md}      |  0
 .../{code-snippet.md => code-snippet.gjs.md}           |  0
 .../{confirm-dialog.md => confirm-dialog.gjs.md}       |  0
 .../2-components/{data-table.md => data-table.gjs.md}  |  0
 .../templates/2-components/{grid.md => grid.gjs.md}    |  0
 .../templates/2-components/{icon.md => icon.gjs.md}    |  0
 .../templates/2-components/{link.md => link.gjs.md}    |  0
 .../2-components/{loading.md => loading.gjs.md}        |  0
 .../templates/2-components/{menu.md => menu.gjs.md}    |  0
 .../{number-input.md => number-input.gjs.md}           |  0
 .../{overflow-menu.md => overflow-menu.gjs.md}         |  0
 .../2-components/{pagination.md => pagination.gjs.md}  | 10 ++++++----
 .../2-components/{popover.md => popover.gjs.md}        |  0
 .../2-components/{portal.md => portal.gjs.md}          |  0
 .../{radio-button.md => radio-button.gjs.md}           |  0
 .../2-components/{search.md => search.gjs.md}          |  0
 .../2-components/{slider.md => slider.gjs.md}          |  0
 .../templates/2-components/{stack.md => stack.gjs.md}  |  0
 .../templates/2-components/{tabs.md => tabs.gjs.md}    |  0
 .../2-components/{text-area.md => text-area.gjs.md}    |  0
 .../templates/2-components/{text.md => text.gjs.md}    |  0
 .../templates/2-components/{theme.md => theme.gjs.md}  |  0
 .../templates/2-components/{tile.md => tile.gjs.md}    |  0
 .../{time-picker.md => time-picker.gjs.md}             |  0
 .../2-components/{toggle.md => toggle.gjs.md}          |  0
 .../2-components/{toggletip.md => toggletip.gjs.md}    |  0
 .../2-components/{tooltip.md => tooltip.gjs.md}        |  0
 .../2-components/{tree-view.md => tree-view.gjs.md}    |  0
 .../2-components/{ui-shell.md => ui-shell.gjs.md}      |  0
 33 files changed, 6 insertions(+), 4 deletions(-)
 rename docs-app/app/templates/2-components/{accordion.md => accordion.gjs.md} (100%)
 rename docs-app/app/templates/2-components/{breadcrumbs.md => breadcrumbs.gjs.md} (100%)
 rename docs-app/app/templates/2-components/{button.md => button.gjs.md} (100%)
 rename docs-app/app/templates/2-components/{charts.md => charts.gjs.md} (100%)
 rename docs-app/app/templates/2-components/{checkbox.md => checkbox.gjs.md} (100%)
 rename docs-app/app/templates/2-components/{code-snippet.md => code-snippet.gjs.md} (100%)
 rename docs-app/app/templates/2-components/{confirm-dialog.md => confirm-dialog.gjs.md} (100%)
 rename docs-app/app/templates/2-components/{data-table.md => data-table.gjs.md} (100%)
 rename docs-app/app/templates/2-components/{grid.md => grid.gjs.md} (100%)
 rename docs-app/app/templates/2-components/{icon.md => icon.gjs.md} (100%)
 rename docs-app/app/templates/2-components/{link.md => link.gjs.md} (100%)
 rename docs-app/app/templates/2-components/{loading.md => loading.gjs.md} (100%)
 rename docs-app/app/templates/2-components/{menu.md => menu.gjs.md} (100%)
 rename docs-app/app/templates/2-components/{number-input.md => number-input.gjs.md} (100%)
 rename docs-app/app/templates/2-components/{overflow-menu.md => overflow-menu.gjs.md} (100%)
 rename docs-app/app/templates/2-components/{pagination.md => pagination.gjs.md} (92%)
 rename docs-app/app/templates/2-components/{popover.md => popover.gjs.md} (100%)
 rename docs-app/app/templates/2-components/{portal.md => portal.gjs.md} (100%)
 rename docs-app/app/templates/2-components/{radio-button.md => radio-button.gjs.md} (100%)
 rename docs-app/app/templates/2-components/{search.md => search.gjs.md} (100%)
 rename docs-app/app/templates/2-components/{slider.md => slider.gjs.md} (100%)
 rename docs-app/app/templates/2-components/{stack.md => stack.gjs.md} (100%)
 rename docs-app/app/templates/2-components/{tabs.md => tabs.gjs.md} (100%)
 rename docs-app/app/templates/2-components/{text-area.md => text-area.gjs.md} (100%)
 rename docs-app/app/templates/2-components/{text.md => text.gjs.md} (100%)
 rename docs-app/app/templates/2-components/{theme.md => theme.gjs.md} (100%)
 rename docs-app/app/templates/2-components/{tile.md => tile.gjs.md} (100%)
 rename docs-app/app/templates/2-components/{time-picker.md => time-picker.gjs.md} (100%)
 rename docs-app/app/templates/2-components/{toggle.md => toggle.gjs.md} (100%)
 rename docs-app/app/templates/2-components/{toggletip.md => toggletip.gjs.md} (100%)
 rename docs-app/app/templates/2-components/{tooltip.md => tooltip.gjs.md} (100%)
 rename docs-app/app/templates/2-components/{tree-view.md => tree-view.gjs.md} (100%)
 rename docs-app/app/templates/2-components/{ui-shell.md => ui-shell.gjs.md} (100%)

diff --git a/docs-app/app/templates/2-components/accordion.md b/docs-app/app/templates/2-components/accordion.gjs.md
similarity index 100%
rename from docs-app/app/templates/2-components/accordion.md
rename to docs-app/app/templates/2-components/accordion.gjs.md
diff --git a/docs-app/app/templates/2-components/breadcrumbs.md b/docs-app/app/templates/2-components/breadcrumbs.gjs.md
similarity index 100%
rename from docs-app/app/templates/2-components/breadcrumbs.md
rename to docs-app/app/templates/2-components/breadcrumbs.gjs.md
diff --git a/docs-app/app/templates/2-components/button.md b/docs-app/app/templates/2-components/button.gjs.md
similarity index 100%
rename from docs-app/app/templates/2-components/button.md
rename to docs-app/app/templates/2-components/button.gjs.md
diff --git a/docs-app/app/templates/2-components/charts.md b/docs-app/app/templates/2-components/charts.gjs.md
similarity index 100%
rename from docs-app/app/templates/2-components/charts.md
rename to docs-app/app/templates/2-components/charts.gjs.md
diff --git a/docs-app/app/templates/2-components/checkbox.md b/docs-app/app/templates/2-components/checkbox.gjs.md
similarity index 100%
rename from docs-app/app/templates/2-components/checkbox.md
rename to docs-app/app/templates/2-components/checkbox.gjs.md
diff --git a/docs-app/app/templates/2-components/code-snippet.md b/docs-app/app/templates/2-components/code-snippet.gjs.md
similarity index 100%
rename from docs-app/app/templates/2-components/code-snippet.md
rename to docs-app/app/templates/2-components/code-snippet.gjs.md
diff --git a/docs-app/app/templates/2-components/confirm-dialog.md b/docs-app/app/templates/2-components/confirm-dialog.gjs.md
similarity index 100%
rename from docs-app/app/templates/2-components/confirm-dialog.md
rename to docs-app/app/templates/2-components/confirm-dialog.gjs.md
diff --git a/docs-app/app/templates/2-components/data-table.md b/docs-app/app/templates/2-components/data-table.gjs.md
similarity index 100%
rename from docs-app/app/templates/2-components/data-table.md
rename to docs-app/app/templates/2-components/data-table.gjs.md
diff --git a/docs-app/app/templates/2-components/grid.md b/docs-app/app/templates/2-components/grid.gjs.md
similarity index 100%
rename from docs-app/app/templates/2-components/grid.md
rename to docs-app/app/templates/2-components/grid.gjs.md
diff --git a/docs-app/app/templates/2-components/icon.md b/docs-app/app/templates/2-components/icon.gjs.md
similarity index 100%
rename from docs-app/app/templates/2-components/icon.md
rename to docs-app/app/templates/2-components/icon.gjs.md
diff --git a/docs-app/app/templates/2-components/link.md b/docs-app/app/templates/2-components/link.gjs.md
similarity index 100%
rename from docs-app/app/templates/2-components/link.md
rename to docs-app/app/templates/2-components/link.gjs.md
diff --git a/docs-app/app/templates/2-components/loading.md b/docs-app/app/templates/2-components/loading.gjs.md
similarity index 100%
rename from docs-app/app/templates/2-components/loading.md
rename to docs-app/app/templates/2-components/loading.gjs.md
diff --git a/docs-app/app/templates/2-components/menu.md b/docs-app/app/templates/2-components/menu.gjs.md
similarity index 100%
rename from docs-app/app/templates/2-components/menu.md
rename to docs-app/app/templates/2-components/menu.gjs.md
diff --git a/docs-app/app/templates/2-components/number-input.md b/docs-app/app/templates/2-components/number-input.gjs.md
similarity index 100%
rename from docs-app/app/templates/2-components/number-input.md
rename to docs-app/app/templates/2-components/number-input.gjs.md
diff --git a/docs-app/app/templates/2-components/overflow-menu.md b/docs-app/app/templates/2-components/overflow-menu.gjs.md
similarity index 100%
rename from docs-app/app/templates/2-components/overflow-menu.md
rename to docs-app/app/templates/2-components/overflow-menu.gjs.md
diff --git a/docs-app/app/templates/2-components/pagination.md b/docs-app/app/templates/2-components/pagination.gjs.md
similarity index 92%
rename from docs-app/app/templates/2-components/pagination.md
rename to docs-app/app/templates/2-components/pagination.gjs.md
index 827c64e30..2932441fc 100644
--- a/docs-app/app/templates/2-components/pagination.md
+++ b/docs-app/app/templates/2-components/pagination.gjs.md
@@ -70,12 +70,14 @@ Pagination supports `xs`, `sm`, `md` and `lg` sizes via the `@size` argument.
 import { Pagination } from 'carbon-components-ember/components';
 import { ThemeSupport } from 'docs-support';
 
+const noop = () => null;
+
 <template>
     <ThemeSupport />
-    <Pagination @size='xs' @length={{100}} @onPageChanged={{() => {}}} />
-    <Pagination @size='sm' @length={{100}} @onPageChanged={{() => {}}} />
-    <Pagination @size='md' @length={{100}} @onPageChanged={{() => {}}} />
-    <Pagination @size='lg' @length={{100}} @onPageChanged={{() => {}}} />
+    <Pagination @size='xs' @length={{100}} @onPageChanged={{noop}} />
+    <Pagination @size='sm' @length={{100}} @onPageChanged={{noop}} />
+    <Pagination @size='md' @length={{100}} @onPageChanged={{noop}} />
+    <Pagination @size='lg' @length={{100}} @onPageChanged={{noop}} />
 </template>
 ```
 
diff --git a/docs-app/app/templates/2-components/popover.md b/docs-app/app/templates/2-components/popover.gjs.md
similarity index 100%
rename from docs-app/app/templates/2-components/popover.md
rename to docs-app/app/templates/2-components/popover.gjs.md
diff --git a/docs-app/app/templates/2-components/portal.md b/docs-app/app/templates/2-components/portal.gjs.md
similarity index 100%
rename from docs-app/app/templates/2-components/portal.md
rename to docs-app/app/templates/2-components/portal.gjs.md
diff --git a/docs-app/app/templates/2-components/radio-button.md b/docs-app/app/templates/2-components/radio-button.gjs.md
similarity index 100%
rename from docs-app/app/templates/2-components/radio-button.md
rename to docs-app/app/templates/2-components/radio-button.gjs.md
diff --git a/docs-app/app/templates/2-components/search.md b/docs-app/app/templates/2-components/search.gjs.md
similarity index 100%
rename from docs-app/app/templates/2-components/search.md
rename to docs-app/app/templates/2-components/search.gjs.md
diff --git a/docs-app/app/templates/2-components/slider.md b/docs-app/app/templates/2-components/slider.gjs.md
similarity index 100%
rename from docs-app/app/templates/2-components/slider.md
rename to docs-app/app/templates/2-components/slider.gjs.md
diff --git a/docs-app/app/templates/2-components/stack.md b/docs-app/app/templates/2-components/stack.gjs.md
similarity index 100%
rename from docs-app/app/templates/2-components/stack.md
rename to docs-app/app/templates/2-components/stack.gjs.md
diff --git a/docs-app/app/templates/2-components/tabs.md b/docs-app/app/templates/2-components/tabs.gjs.md
similarity index 100%
rename from docs-app/app/templates/2-components/tabs.md
rename to docs-app/app/templates/2-components/tabs.gjs.md
diff --git a/docs-app/app/templates/2-components/text-area.md b/docs-app/app/templates/2-components/text-area.gjs.md
similarity index 100%
rename from docs-app/app/templates/2-components/text-area.md
rename to docs-app/app/templates/2-components/text-area.gjs.md
diff --git a/docs-app/app/templates/2-components/text.md b/docs-app/app/templates/2-components/text.gjs.md
similarity index 100%
rename from docs-app/app/templates/2-components/text.md
rename to docs-app/app/templates/2-components/text.gjs.md
diff --git a/docs-app/app/templates/2-components/theme.md b/docs-app/app/templates/2-components/theme.gjs.md
similarity index 100%
rename from docs-app/app/templates/2-components/theme.md
rename to docs-app/app/templates/2-components/theme.gjs.md
diff --git a/docs-app/app/templates/2-components/tile.md b/docs-app/app/templates/2-components/tile.gjs.md
similarity index 100%
rename from docs-app/app/templates/2-components/tile.md
rename to docs-app/app/templates/2-components/tile.gjs.md
diff --git a/docs-app/app/templates/2-components/time-picker.md b/docs-app/app/templates/2-components/time-picker.gjs.md
similarity index 100%
rename from docs-app/app/templates/2-components/time-picker.md
rename to docs-app/app/templates/2-components/time-picker.gjs.md
diff --git a/docs-app/app/templates/2-components/toggle.md b/docs-app/app/templates/2-components/toggle.gjs.md
similarity index 100%
rename from docs-app/app/templates/2-components/toggle.md
rename to docs-app/app/templates/2-components/toggle.gjs.md
diff --git a/docs-app/app/templates/2-components/toggletip.md b/docs-app/app/templates/2-components/toggletip.gjs.md
similarity index 100%
rename from docs-app/app/templates/2-components/toggletip.md
rename to docs-app/app/templates/2-components/toggletip.gjs.md
diff --git a/docs-app/app/templates/2-components/tooltip.md b/docs-app/app/templates/2-components/tooltip.gjs.md
similarity index 100%
rename from docs-app/app/templates/2-components/tooltip.md
rename to docs-app/app/templates/2-components/tooltip.gjs.md
diff --git a/docs-app/app/templates/2-components/tree-view.md b/docs-app/app/templates/2-components/tree-view.gjs.md
similarity index 100%
rename from docs-app/app/templates/2-components/tree-view.md
rename to docs-app/app/templates/2-components/tree-view.gjs.md
diff --git a/docs-app/app/templates/2-components/ui-shell.md b/docs-app/app/templates/2-components/ui-shell.gjs.md
similarity index 100%
rename from docs-app/app/templates/2-components/ui-shell.md
rename to docs-app/app/templates/2-components/ui-shell.gjs.md

From da65d63046ffbdde8ce578c150f517434756c236 Mon Sep 17 00:00:00 2001
From: Patrick Pircher <patrick.pircher@ibm.com>
Date: Fri, 14 Aug 2026 13:15:40 +0200
Subject: [PATCH 4/6] feat(docs-app): convert nested-folder
 2-components/**/*.md docs to .gjs.md

Continues the flat-file batch: converts the form/, indicator/, layout/,
list/, select/, skeleton/, and text-input/ subfolders (22 files) to
build-time .gjs.md, following the same recipe. Each browser-verified
(Playwright against a built dist) to confirm live demos render real content
in their shadow root.

progress/bar.md is left as .md: invoking bare <ProgressBar /> in a built
.gjs.md page throws "Cannot destructure property 'compilable' of 'component'
as it is null" during template compilation, regardless of args. Bisected via
scratch pages to confirm it's not markdown content, not IconMap/registerIcon
state (nothing in the library ever calls registerIcon, so that registry is
always empty and unrelated), and not the generic <Icon> component in
isolation (a standalone <Icon @icon='...' /> demo builds and renders fine).
ProgressBar is the only component in the library that invokes the generic
<Icon @icon='...'> string-keyed component from within a conditional block,
so the bug is scoped to how kolay's build-time per-page compiler resolves
that specific nested-conditional-component pattern from a precompiled
library template. Needs deeper investigation into kolay/embroider's
component resolution for this case; noted in .pjp-runner/todo.md.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Signed-off-by: Patrick Pircher <patrick.pircher@ibm.com>
---
 .../app/templates/2-components/form/{group.md => group.gjs.md}    | 0
 .../app/templates/2-components/form/{input.md => input.gjs.md}    | 0
 docs-app/app/templates/2-components/form/{item.md => item.gjs.md} | 0
 .../app/templates/2-components/form/{label.md => label.gjs.md}    | 0
 .../app/templates/2-components/indicator/{icon.md => icon.gjs.md} | 0
 .../templates/2-components/indicator/{shape.md => shape.gjs.md}   | 0
 .../2-components/layout/{direction.md => direction.gjs.md}        | 0
 .../app/templates/2-components/layout/{index.md => index.gjs.md}  | 0
 .../app/templates/2-components/list/{index.md => index.gjs.md}    | 0
 .../templates/2-components/list/{ordered.md => ordered.gjs.md}    | 0
 .../2-components/list/{structured.md => structured.gjs.md}        | 0
 .../2-components/list/{unordered.md => unordered.gjs.md}          | 0
 .../2-components/progress/{indicator.md => indicator.gjs.md}      | 0
 .../app/templates/2-components/select/{index.md => index.gjs.md}  | 0
 .../2-components/select/{item-group.md => item-group.gjs.md}      | 0
 .../app/templates/2-components/select/{item.md => item.gjs.md}    | 0
 .../app/templates/2-components/skeleton/{icon.md => icon.gjs.md}  | 0
 .../2-components/skeleton/{placeholder.md => placeholder.gjs.md}  | 0
 .../app/templates/2-components/skeleton/{text.md => text.gjs.md}  | 0
 .../templates/2-components/text-input/{fluid.md => fluid.gjs.md}  | 0
 .../templates/2-components/text-input/{index.md => index.gjs.md}  | 0
 .../2-components/text-input/{password.md => password.gjs.md}      | 0
 22 files changed, 0 insertions(+), 0 deletions(-)
 rename docs-app/app/templates/2-components/form/{group.md => group.gjs.md} (100%)
 rename docs-app/app/templates/2-components/form/{input.md => input.gjs.md} (100%)
 rename docs-app/app/templates/2-components/form/{item.md => item.gjs.md} (100%)
 rename docs-app/app/templates/2-components/form/{label.md => label.gjs.md} (100%)
 rename docs-app/app/templates/2-components/indicator/{icon.md => icon.gjs.md} (100%)
 rename docs-app/app/templates/2-components/indicator/{shape.md => shape.gjs.md} (100%)
 rename docs-app/app/templates/2-components/layout/{direction.md => direction.gjs.md} (100%)
 rename docs-app/app/templates/2-components/layout/{index.md => index.gjs.md} (100%)
 rename docs-app/app/templates/2-components/list/{index.md => index.gjs.md} (100%)
 rename docs-app/app/templates/2-components/list/{ordered.md => ordered.gjs.md} (100%)
 rename docs-app/app/templates/2-components/list/{structured.md => structured.gjs.md} (100%)
 rename docs-app/app/templates/2-components/list/{unordered.md => unordered.gjs.md} (100%)
 rename docs-app/app/templates/2-components/progress/{indicator.md => indicator.gjs.md} (100%)
 rename docs-app/app/templates/2-components/select/{index.md => index.gjs.md} (100%)
 rename docs-app/app/templates/2-components/select/{item-group.md => item-group.gjs.md} (100%)
 rename docs-app/app/templates/2-components/select/{item.md => item.gjs.md} (100%)
 rename docs-app/app/templates/2-components/skeleton/{icon.md => icon.gjs.md} (100%)
 rename docs-app/app/templates/2-components/skeleton/{placeholder.md => placeholder.gjs.md} (100%)
 rename docs-app/app/templates/2-components/skeleton/{text.md => text.gjs.md} (100%)
 rename docs-app/app/templates/2-components/text-input/{fluid.md => fluid.gjs.md} (100%)
 rename docs-app/app/templates/2-components/text-input/{index.md => index.gjs.md} (100%)
 rename docs-app/app/templates/2-components/text-input/{password.md => password.gjs.md} (100%)

diff --git a/docs-app/app/templates/2-components/form/group.md b/docs-app/app/templates/2-components/form/group.gjs.md
similarity index 100%
rename from docs-app/app/templates/2-components/form/group.md
rename to docs-app/app/templates/2-components/form/group.gjs.md
diff --git a/docs-app/app/templates/2-components/form/input.md b/docs-app/app/templates/2-components/form/input.gjs.md
similarity index 100%
rename from docs-app/app/templates/2-components/form/input.md
rename to docs-app/app/templates/2-components/form/input.gjs.md
diff --git a/docs-app/app/templates/2-components/form/item.md b/docs-app/app/templates/2-components/form/item.gjs.md
similarity index 100%
rename from docs-app/app/templates/2-components/form/item.md
rename to docs-app/app/templates/2-components/form/item.gjs.md
diff --git a/docs-app/app/templates/2-components/form/label.md b/docs-app/app/templates/2-components/form/label.gjs.md
similarity index 100%
rename from docs-app/app/templates/2-components/form/label.md
rename to docs-app/app/templates/2-components/form/label.gjs.md
diff --git a/docs-app/app/templates/2-components/indicator/icon.md b/docs-app/app/templates/2-components/indicator/icon.gjs.md
similarity index 100%
rename from docs-app/app/templates/2-components/indicator/icon.md
rename to docs-app/app/templates/2-components/indicator/icon.gjs.md
diff --git a/docs-app/app/templates/2-components/indicator/shape.md b/docs-app/app/templates/2-components/indicator/shape.gjs.md
similarity index 100%
rename from docs-app/app/templates/2-components/indicator/shape.md
rename to docs-app/app/templates/2-components/indicator/shape.gjs.md
diff --git a/docs-app/app/templates/2-components/layout/direction.md b/docs-app/app/templates/2-components/layout/direction.gjs.md
similarity index 100%
rename from docs-app/app/templates/2-components/layout/direction.md
rename to docs-app/app/templates/2-components/layout/direction.gjs.md
diff --git a/docs-app/app/templates/2-components/layout/index.md b/docs-app/app/templates/2-components/layout/index.gjs.md
similarity index 100%
rename from docs-app/app/templates/2-components/layout/index.md
rename to docs-app/app/templates/2-components/layout/index.gjs.md
diff --git a/docs-app/app/templates/2-components/list/index.md b/docs-app/app/templates/2-components/list/index.gjs.md
similarity index 100%
rename from docs-app/app/templates/2-components/list/index.md
rename to docs-app/app/templates/2-components/list/index.gjs.md
diff --git a/docs-app/app/templates/2-components/list/ordered.md b/docs-app/app/templates/2-components/list/ordered.gjs.md
similarity index 100%
rename from docs-app/app/templates/2-components/list/ordered.md
rename to docs-app/app/templates/2-components/list/ordered.gjs.md
diff --git a/docs-app/app/templates/2-components/list/structured.md b/docs-app/app/templates/2-components/list/structured.gjs.md
similarity index 100%
rename from docs-app/app/templates/2-components/list/structured.md
rename to docs-app/app/templates/2-components/list/structured.gjs.md
diff --git a/docs-app/app/templates/2-components/list/unordered.md b/docs-app/app/templates/2-components/list/unordered.gjs.md
similarity index 100%
rename from docs-app/app/templates/2-components/list/unordered.md
rename to docs-app/app/templates/2-components/list/unordered.gjs.md
diff --git a/docs-app/app/templates/2-components/progress/indicator.md b/docs-app/app/templates/2-components/progress/indicator.gjs.md
similarity index 100%
rename from docs-app/app/templates/2-components/progress/indicator.md
rename to docs-app/app/templates/2-components/progress/indicator.gjs.md
diff --git a/docs-app/app/templates/2-components/select/index.md b/docs-app/app/templates/2-components/select/index.gjs.md
similarity index 100%
rename from docs-app/app/templates/2-components/select/index.md
rename to docs-app/app/templates/2-components/select/index.gjs.md
diff --git a/docs-app/app/templates/2-components/select/item-group.md b/docs-app/app/templates/2-components/select/item-group.gjs.md
similarity index 100%
rename from docs-app/app/templates/2-components/select/item-group.md
rename to docs-app/app/templates/2-components/select/item-group.gjs.md
diff --git a/docs-app/app/templates/2-components/select/item.md b/docs-app/app/templates/2-components/select/item.gjs.md
similarity index 100%
rename from docs-app/app/templates/2-components/select/item.md
rename to docs-app/app/templates/2-components/select/item.gjs.md
diff --git a/docs-app/app/templates/2-components/skeleton/icon.md b/docs-app/app/templates/2-components/skeleton/icon.gjs.md
similarity index 100%
rename from docs-app/app/templates/2-components/skeleton/icon.md
rename to docs-app/app/templates/2-components/skeleton/icon.gjs.md
diff --git a/docs-app/app/templates/2-components/skeleton/placeholder.md b/docs-app/app/templates/2-components/skeleton/placeholder.gjs.md
similarity index 100%
rename from docs-app/app/templates/2-components/skeleton/placeholder.md
rename to docs-app/app/templates/2-components/skeleton/placeholder.gjs.md
diff --git a/docs-app/app/templates/2-components/skeleton/text.md b/docs-app/app/templates/2-components/skeleton/text.gjs.md
similarity index 100%
rename from docs-app/app/templates/2-components/skeleton/text.md
rename to docs-app/app/templates/2-components/skeleton/text.gjs.md
diff --git a/docs-app/app/templates/2-components/text-input/fluid.md b/docs-app/app/templates/2-components/text-input/fluid.gjs.md
similarity index 100%
rename from docs-app/app/templates/2-components/text-input/fluid.md
rename to docs-app/app/templates/2-components/text-input/fluid.gjs.md
diff --git a/docs-app/app/templates/2-components/text-input/index.md b/docs-app/app/templates/2-components/text-input/index.gjs.md
similarity index 100%
rename from docs-app/app/templates/2-components/text-input/index.md
rename to docs-app/app/templates/2-components/text-input/index.gjs.md
diff --git a/docs-app/app/templates/2-components/text-input/password.md b/docs-app/app/templates/2-components/text-input/password.gjs.md
similarity index 100%
rename from docs-app/app/templates/2-components/text-input/password.md
rename to docs-app/app/templates/2-components/text-input/password.gjs.md

From 48f8b7988982e2249e81ec7b4af2c9796c092fce Mon Sep 17 00:00:00 2001
From: Patrick Pircher <patrick.pircher@ibm.com>
Date: Fri, 14 Aug 2026 15:30:42 +0200
Subject: [PATCH 5/6] fix(docs-app): restore syntax highlighting for build-time
 .gjs.md docs

patricklx reported code blocks lost syntax highlighting on pages converted
to build-time .gjs.md (works on main's runtime-compiled .md). vite.config.mjs's
kolay() plugin only wired up rehypeShadowDemo for the build-time compiler;
routes/application.ts's runtime setupKolay() call separately registers
rehypeShikiFromHighlighter, which the build-time path never got.

Added the equivalent rehypeShiki plugin to kolay()'s rehypePlugins, using
@shikijs/rehype's default export (self-contained highlighter creation) since
vite.config.mjs runs in Node at build time and doesn't need the runtime
path's manual getHighlighterCore/loadWasm dance. Verified via Playwright
that a converted page (tags) and an unconverted control (notifications,
still runtime .md) render visually identical multi-color token highlighting,
and that every built .gjs chunk contains shiki output.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Signed-off-by: Patrick Pircher <patrick.pircher@ibm.com>
---
 docs-app/vite.config.mjs | 38 +++++++++++++++++++++++++++++++++++++-
 1 file changed, 37 insertions(+), 1 deletion(-)

diff --git a/docs-app/vite.config.mjs b/docs-app/vite.config.mjs
index 92a214568..f5bd1a7e8 100644
--- a/docs-app/vite.config.mjs
+++ b/docs-app/vite.config.mjs
@@ -5,6 +5,7 @@ import { kolay } from "kolay/vite";
 import { transformAsync } from '@babel/core';
 import { defineConfig } from "vite";
 import { resolve, dirname, basename, join } from "path";
+import rehypeShiki from "@shikijs/rehype";
 
 import { rehypeShadowDemo } from "./app/docs-support/rehype-shadow-demo";
 
@@ -135,7 +136,42 @@ export default defineConfig((/* { mode } */) => {
         // Applies to build-time `.gjs.md` docs only; runtime `.md` docs get
         // their own copies of these via setupKolay in routes/application.ts.
         scope: kolayScope,
-        rehypePlugins: [[rehypeShadowDemo, { forBuildTimeInjection: true }]],
+        rehypePlugins: [
+          [rehypeShadowDemo, { forBuildTimeInjection: true }],
+          // Code-fence syntax highlighting, mirroring the rehypeShiki setup
+          // in routes/application.ts for runtime `.md` docs. Build time runs
+          // in Node, so (unlike the runtime highlighter) there's no need to
+          // hand-roll getHighlighterCore/loadWasm -- the package's default
+          // export creates its own highlighter from the bundled langs/themes.
+          [
+            rehypeShiki,
+            {
+              langs: [
+                "javascript",
+                "typescript",
+                "bash",
+                "css",
+                "diff",
+                "html",
+                "glimmer-js",
+                "glimmer-ts",
+                "handlebars",
+                "jsonc",
+                "markdown",
+              ],
+              // Theme chosen by the `--shiki-{light,dark}{,-bg}` CSS
+              // variables this emits (defaultColor: false) -- mapped to
+              // `color`/`background-color` by @universal-ember/docs-support's
+              // prebuilt site-css/shiki.css (already loaded globally, so no
+              // separate include is needed here), same as runtime `.md` docs.
+              defaultColor: false,
+              themes: {
+                light: "github-light",
+                dark: "github-dark",
+              },
+            },
+          ],
+        ],
       }),
       babel({
         babelHelpers: "runtime",

From a01886f2428d222480409503ac9590aa7ed7d62a Mon Sep 17 00:00:00 2001
From: Patrick Pircher <patrick.pircher@ibm.com>
Date: Tue, 18 Aug 2026 23:50:58 +0200
Subject: [PATCH 6/6] feat(docs-app): convert notifications.md to .gjs.md

Rewrites the demo's plain Context class (which used a downstream
setOwner() shim only available at runtime) as a real Component
subclass, since Ember auto-injects the owner into components invoked
via the template. This unblocks @service('carbon.notifications')
injection at build time with no new infra changes needed.

Verified in a real browser (served production build) that the demo
renders real Notification/Button markup with no page errors, and that
clicking "Notify" exercises the service and renders a toast.

Signed-off-by: Patrick Pircher <patrick.pircher@ibm.com>
---
 ...{notifications.md => notifications.gjs.md} | 35 ++++++++-----------
 1 file changed, 14 insertions(+), 21 deletions(-)
 rename docs-app/app/templates/2-components/{notifications.md => notifications.gjs.md} (78%)

diff --git a/docs-app/app/templates/2-components/notifications.md b/docs-app/app/templates/2-components/notifications.gjs.md
similarity index 78%
rename from docs-app/app/templates/2-components/notifications.md
rename to docs-app/app/templates/2-components/notifications.gjs.md
index 40df506d7..241dada12 100644
--- a/docs-app/app/templates/2-components/notifications.md
+++ b/docs-app/app/templates/2-components/notifications.gjs.md
@@ -3,31 +3,21 @@
 # Notification
 
 ```gjs live preview
-import { Button, Notification } from 'carbon-components-ember/components';
-import { ThemeSupport, setOwner } from 'docs-support';
+import Component from '@glimmer/component';
 import { service } from '@ember/service';
+import { Button, Notification } from 'carbon-components-ember/components';
+import { ThemeSupport } from 'docs-support';
 
-class Context {
+class NotificationsDemo extends Component {
   @service('carbon.notifications') notifications;
-  
-  constructor() {
-    setOwner(this);
-  }
-  
-  get documentBody() {
-    return document.body; 
-  }
 
-  showNotification = (type) => {
+  showNotification = () => {
     this.notifications.info({
       caption: 'test',
     });
-  }
-}
-
-const context = new Context();
+  };
 
-<template>
+  <template>
     <ThemeSupport />
     <Notification
         @type='success'
@@ -55,17 +45,20 @@ const context = new Context();
     <Notification @type='warning' @caption='warning' />
     <br />
     <br />
-    <Button @type='primary' @onClick={{context.showNotification}}>
+    <Button @type='primary' @onClick={{this.showNotification}}>
         Notify
     </Button>
 
     <div style="position: absolute; top:0; right: 0">
-      {{#each context.notifications.queue as |n|}}
+      {{#each this.notifications.queue as |n|}}
         <Notification @notification={{n}} />
         <div style="margin: 2px"></div>
       {{/each}}
-    </div> 
-</template>
+    </div>
+  </template>
+}
+
+<template><NotificationsDemo /></template>
 ```
 ## API Reference