diff --git a/docs/app/app.ts b/docs/app/app.ts
index cd81bd6b..fde5a802 100644
--- a/docs/app/app.ts
+++ b/docs/app/app.ts
@@ -2,26 +2,12 @@ import Application from '@ember/application';
 import Resolver from 'ember-resolver';
 import loadInitializers from 'ember-load-initializers';
 import config from 'docs/config/environment';
-import Prism from 'prismjs';
 import { importSync, isDevelopingApp, macroCondition } from '@embroider/macros';
-import 'prismjs/plugins/normalize-whitespace/prism-normalize-whitespace';
-import 'prismjs/components/prism-css';
-import 'prismjs/components/prism-scss';
-import 'prismjs/components/prism-javascript';
-import 'prismjs/components/prism-handlebars';
-import 'prismjs/components/prism-markup-templating';
-// @ts-expect-error no types shipped from prismjs-glimmer
-import { setup } from 'prismjs-glimmer';
-
-import 'prismjs/themes/prism.css';
 
 if (macroCondition(isDevelopingApp())) {
   importSync('./deprecation-workflow');
 }
 
-// eslint-disable-next-line @typescript-eslint/no-unsafe-call
-setup(Prism);
-
 export default class App extends Application {
   modulePrefix = config.modulePrefix;
   podModulePrefix = config.podModulePrefix;
diff --git a/docs/app/components/code-block.ts b/docs/app/components/code-block.gts
similarity index 67%
rename from docs/app/components/code-block.ts
rename to docs/app/components/code-block.gts
index 76668d0c..351001b5 100644
--- a/docs/app/components/code-block.ts
+++ b/docs/app/components/code-block.gts
@@ -1,12 +1,11 @@
 import Component from '@glimmer/component';
+import CodeInline from './code-inline';
 
 interface CodeBlockSignature {
   Element: HTMLElement;
   Args: {
     code: string;
     language?: string;
-    showLineNumbers?: boolean;
-    start?: string;
   };
 }
 
@@ -15,9 +14,13 @@ export default class CodeBlock extends Component<CodeBlockSignature> {
     return this.args.language ?? 'markup';
   }
 
-  get languageClass() {
-    return `language-${this.language}`;
-  }
+  <template>
+    <div class="code-block">
+      {{~! ~}}
+      <CodeInline ...attributes @code={{@code}} @language={{@language}} />
+      {{~! ~}}
+    </div>
+  </template>
 }
 
 declare module '@glint/environment-ember-loose/registry' {
diff --git a/docs/app/components/code-block.hbs b/docs/app/components/code-block.hbs
deleted file mode 100644
index 92803647..00000000
--- a/docs/app/components/code-block.hbs
+++ /dev/null
@@ -1,12 +0,0 @@
-<pre
-  class="{{this.languageClass}} {{if @showLineNumbers 'line-numbers'}}"
-  data-start={{@start}}
->
-  {{~! ~}}
-  <CodeInline
-    ...attributes
-    @code={{@code}}
-    @language={{@language}}
-  />
-  {{~! ~}}
-</pre>
\ No newline at end of file
diff --git a/docs/app/components/code-example.gts b/docs/app/components/code-example.gts
new file mode 100644
index 00000000..d3a539c0
--- /dev/null
+++ b/docs/app/components/code-example.gts
@@ -0,0 +1,142 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { on } from '@ember/modifier';
+import { fn } from '@ember/helper';
+import { eq, and } from 'ember-truth-helpers';
+import CodeBlock from './code-block';
+// @ts-expect-error Could not find a declaration file for module 'ember-code-snippet'.
+import { getCodeSnippet } from 'ember-code-snippet';
+
+interface CodeExampleSignature {
+  Element: HTMLElement;
+  Args: {
+    glimmerTs?: string;
+    hbs?: string;
+    hbs2?: string;
+    js?: string;
+    css?: string;
+    scss?: string;
+    activeTab?: string;
+    showResult?: boolean;
+  };
+  Blocks: {
+    default: [];
+  };
+}
+
+export default class CodeExample extends Component<CodeExampleSignature> {
+  @tracked _activeTab: string = '';
+
+  get showResult() {
+    return this.args.showResult !== undefined ? this.args.showResult : true;
+  }
+
+  get activeTab() {
+    return (
+      this._activeTab ||
+      (this.showResult ? 'result' : this.args.activeTab || 'js')
+    );
+  }
+
+  @action
+  setActiveTab(value: string) {
+    this._activeTab = value;
+  }
+
+  <template>
+    <article class="code-example" ...attributes>
+      <nav class="code-example-tabs">
+        {{#if @glimmerTs}}
+          <div
+            class="code-example-tab
+              {{if (eq this.activeTab 'glimmer-ts') 'active'}}"
+            role="button"
+            {{on "click" (fn this.setActiveTab "glimmer-ts")}}
+          >Template</div>
+        {{/if}}
+        {{#if @hbs}}
+          <div
+            class="code-example-tab {{if (eq this.activeTab 'hbs') 'active'}}"
+            role="button"
+            {{on "click" (fn this.setActiveTab "hbs")}}
+          >Template</div>
+        {{/if}}
+        {{#if @hbs2}}
+          <div
+            class="code-sample-tab {{if (eq this.activeTab 'hbs2') 'active'}}"
+            role="button"
+            {{on "click" (fn this.setActiveTab "hbs2")}}
+          >Template 2</div>
+        {{/if}}
+        {{#if @js}}
+          <div
+            class="code-example-tab {{if (eq this.activeTab 'js') 'active'}}"
+            role="button"
+            {{on "click" (fn this.setActiveTab "js")}}
+          >Javascript</div>
+        {{/if}}
+        {{#if @scss}}
+          <div
+            class="code-example-tab {{if (eq this.activeTab 'scss') 'active'}}"
+            role="button"
+            {{on "click" (fn this.setActiveTab "scss")}}
+          >SCSS</div>
+        {{/if}}
+        {{#if @css}}
+          <div
+            class="code-example-tab {{if (eq this.activeTab 'css') 'active'}}"
+            role="button"
+            {{on "click" (fn this.setActiveTab "css")}}
+          >CSS</div>
+        {{/if}}
+        {{#if this.showResult}}
+          <div
+            class="code-example-tab
+              {{if (eq this.activeTab 'result') 'active'}}"
+            role="button"
+            {{on "click" (fn this.setActiveTab "result")}}
+          >Result</div>
+        {{/if}}
+      </nav>
+      {{#if (and @glimmerTs (eq this.activeTab "glimmer-ts"))}}
+        {{#let (getCodeSnippet @glimmerTs) as |snippet|}}
+          <CodeBlock @language="gts" @code={{snippet.source}} />
+        {{/let}}
+      {{/if}}
+      {{#if (and @hbs (eq this.activeTab "hbs"))}}
+        {{#let (getCodeSnippet @hbs) as |snippet|}}
+          <CodeBlock @language="handlebars" @code={{snippet.source}} />
+        {{/let}}
+      {{/if}}
+      {{#if @hbs2}}
+        {{#let (getCodeSnippet @hbs2) as |snippet|}}
+          <CodeBlock @language="handlebars" @code={{snippet.source}} />
+        {{/let}}
+      {{/if}}
+      {{#if (and @js (eq this.activeTab "js"))}}
+        {{#let (getCodeSnippet @js) as |snippet|}}
+          <CodeBlock @language="js" @code={{snippet.source}} />
+        {{/let}}
+      {{/if}}
+      {{#if (and @scss (eq this.activeTab "scss"))}}
+        {{#let (getCodeSnippet @scss) as |snippet|}}
+          <CodeBlock @language="scss" @code={{snippet.source}} />
+        {{/let}}
+      {{/if}}
+      {{#if (and @css (eq this.activeTab "css"))}}
+        {{#let (getCodeSnippet @css) as |snippet|}}
+          <CodeBlock @language="css" @code={{snippet.source}} />
+        {{/let}}
+      {{/if}}
+      {{#if (and this.showResult (has-block))}}
+        <div
+          class="code-example-snippet result
+            {{if (eq this.activeTab 'result') 'active'}}"
+        >
+          {{yield}}
+        </div>
+      {{/if}}
+    </article>
+  </template>
+}
diff --git a/docs/app/components/code-example.hbs b/docs/app/components/code-example.hbs
deleted file mode 100644
index a5ddde6e..00000000
--- a/docs/app/components/code-example.hbs
+++ /dev/null
@@ -1,67 +0,0 @@
-<article class="code-example" ...attributes>
-  <nav class="code-example-tabs">
-    {{#if @hbs}}
-      <div
-        class="code-example-tab {{if (eq this.activeTab 'hbs') 'active'}}"
-        role="button"
-        {{on "click" (fn this.setActiveTab "hbs")}}
-      >Template</div>
-    {{/if}}
-    {{#if @hbs2}}
-      <div
-        class="code-sample-tab {{if (eq this.activeTab 'hbs2') 'active'}}"
-        role="button"
-        {{on "click" (fn this.setActiveTab "hbs2")}}
-      >Template 2</div>
-    {{/if}}
-    {{#if @js}}
-      <div
-        class="code-example-tab {{if (eq this.activeTab 'js') 'active'}}"
-        role="button"
-        {{on "click" (fn this.setActiveTab "js")}}
-      >Javascript</div>
-    {{/if}}
-    {{#if @css}}
-      <div
-        class="code-example-tab {{if (eq this.activeTab 'css') 'active'}}"
-        role="button"
-        {{on "click" (fn this.setActiveTab "css")}}
-      >CSS</div>
-    {{/if}}
-    {{#if this.showResult}}
-      <div
-        class="code-example-tab {{if (eq this.activeTab 'result') 'active'}}"
-        role="button"
-        {{on "click" (fn this.setActiveTab "result")}}
-      >Result</div>
-    {{/if}}
-  </nav>
-  {{#if (and @hbs (eq this.activeTab "hbs"))}}
-    {{#let (get-code-snippet @hbs) as |snippet|}}
-      <CodeBlock @language="handlebars" @code={{snippet.source}} />
-    {{/let}}
-  {{/if}}
-  {{#if @hbs2}}
-    {{#let (get-code-snippet @hbs2) as |snippet|}}
-      <CodeBlock @language="handlebars" @code={{snippet.source}} />
-    {{/let}}
-  {{/if}}
-  {{#if (and @js (eq this.activeTab "js"))}}
-    {{#let (get-code-snippet @js) as |snippet|}}
-      <CodeBlock @language={{snippet.language}} @code={{snippet.source}} />
-    {{/let}}
-  {{/if}}
-  {{#if (and @css (eq this.activeTab "css"))}}
-    {{#let (get-code-snippet @css) as |snippet|}}
-      <CodeBlock @language={{snippet.language}} @code={{snippet.source}} />
-    {{/let}}
-  {{/if}}
-  {{#if (and this.showResult (has-block))}}
-    <div
-      class="code-example-snippet result
-        {{if (eq this.activeTab 'result') 'active'}}"
-    >
-      {{yield this.partialName}}
-    </div>
-  {{/if}}
-</article>
\ No newline at end of file
diff --git a/docs/app/components/code-example.js b/docs/app/components/code-example.js
deleted file mode 100644
index 77cc3636..00000000
--- a/docs/app/components/code-example.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
-
-export default class CodeExampleComponent extends Component {
-  showResult = true;
-  @tracked _activeTab = undefined;
-
-  get activeTab() {
-    return this._activeTab || (this.showResult ? 'result' : 'js');
-  }
-
-  get partialName() {
-    return `snippets/${this.args.hbs.replace('.hbs', '')}`;
-  }
-
-  @action
-  setActiveTab(value) {
-    this._activeTab = value;
-  }
-}
diff --git a/docs/app/components/code-inline.ts b/docs/app/components/code-inline.gts
similarity index 55%
rename from docs/app/components/code-inline.ts
rename to docs/app/components/code-inline.gts
index 2648337c..20cb84b7 100644
--- a/docs/app/components/code-inline.ts
+++ b/docs/app/components/code-inline.gts
@@ -3,7 +3,8 @@ import { modifier } from 'ember-modifier';
 import { htmlSafe, type SafeString } from '@ember/template';
 import { tracked } from '@glimmer/tracking';
 import { assert } from '@ember/debug';
-import Prism from 'prismjs';
+import { codeToHtml } from 'shiki';
+import { task } from 'ember-concurrency';
 
 interface CodeInlineSignature {
   Element: HTMLElement;
@@ -23,10 +24,6 @@ export default class CodeInline extends Component<CodeInlineSignature> {
       "ember-prism's <CodeBlock/> and <CodeInline/> components require a `code` parameter to be passed in.",
       code !== undefined,
     );
-    if (Prism?.plugins['NormalizeWhitespace']) {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
-      return Prism.plugins['NormalizeWhitespace'].normalize(code) as string;
-    }
 
     return code;
   }
@@ -35,28 +32,27 @@ export default class CodeInline extends Component<CodeInlineSignature> {
     return this.args.language ?? 'markup';
   }
 
-  get languageClass() {
-    return `language-${this.language}`;
-  }
+  setup = modifier(() => {
+    void this.generateCode.perform();
+  });
 
-  setPrismCode = modifier((element: Element) => {
+  generateCode = task(async () => {
     const code = this.code;
     const language = this.language;
-    const grammar = Prism.languages[language];
-
-    if (code && language && grammar) {
-      this.prismCode = htmlSafe(Prism.highlight(code, grammar, language));
-    } else {
-      this.prismCode = '';
-    }
 
-    // Force plugin initialization, required for Prism.highlight usage.
-    // See https://github.com/PrismJS/prism/issues/1234
-    Prism.hooks.run('complete', {
-      code,
-      element,
+    const htmlCode = await codeToHtml(code, {
+      lang: language,
+      theme: 'github-light-default',
     });
+
+    this.prismCode = htmlSafe(htmlCode);
   });
+
+  <template>
+    <div ...attributes {{this.setup}}>
+      {{~! ~}}{{this.prismCode}}{{~! ~}}
+    </div>
+  </template>
 }
 
 declare module '@glint/environment-ember-loose/registry' {
diff --git a/docs/app/components/code-inline.hbs b/docs/app/components/code-inline.hbs
deleted file mode 100644
index 6cf4785e..00000000
--- a/docs/app/components/code-inline.hbs
+++ /dev/null
@@ -1,3 +0,0 @@
-<code ...attributes class="{{this.languageClass}}" {{this.setPrismCode}}>
-  {{~! ~}}{{this.prismCode}}{{~! ~}}
-</code>
\ No newline at end of file
diff --git a/docs/app/components/snippets/animations-1.gts b/docs/app/components/snippets/animations-1.gts
new file mode 100644
index 00000000..1b6e59c9
--- /dev/null
+++ b/docs/app/components/snippets/animations-1.gts
@@ -0,0 +1,13 @@
+import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown';
+
+<template>
+  <BasicDropdown as |dd|>
+    <dd.Trigger class="trigger-bootstrap-feel">Animate me</dd.Trigger>
+
+    <dd.Content class="content-bootstrap-feel width-300 slide-fade">
+      <li>Miguel</li>
+      <li>Matthew</li>
+      <li>Dan</li>
+    </dd.Content>
+  </BasicDropdown>
+</template>
diff --git a/docs/app/components/snippets/animations-1.hbs b/docs/app/components/snippets/animations-1.hbs
deleted file mode 100644
index 0257c78d..00000000
--- a/docs/app/components/snippets/animations-1.hbs
+++ /dev/null
@@ -1,9 +0,0 @@
-<BasicDropdown as |dd|>
-  <dd.Trigger class="trigger-bootstrap-feel">Animate me</dd.Trigger>
-
-  <dd.Content class="content-bootstrap-feel width-300 slide-fade">
-    <li>Miguel</li>
-    <li>Matthew</li>
-    <li>Dan</li>
-  </dd.Content>
-</BasicDropdown>
\ No newline at end of file
diff --git a/docs/app/components/snippets/animations-1.js b/docs/app/components/snippets/animations-1.js
deleted file mode 100644
index 1af80ea0..00000000
--- a/docs/app/components/snippets/animations-1.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import Component from '@glimmer/component';
-
-// eslint-disable-next-line ember/no-empty-glimmer-component-classes
-export default class extends Component {}
diff --git a/docs/app/components/snippets/content-events-1.gts b/docs/app/components/snippets/content-events-1.gts
new file mode 100644
index 00000000..3cf776f2
--- /dev/null
+++ b/docs/app/components/snippets/content-events-1.gts
@@ -0,0 +1,96 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { didCancel, task, timeout } from 'ember-concurrency';
+import BasicDropdown, {
+  type BasicDropdownDefaultBlock,
+} from 'ember-basic-dropdown/components/basic-dropdown';
+import { on } from '@ember/modifier';
+import { fn } from '@ember/helper';
+
+export default class extends Component {
+  notifications = [
+    { text: 'Edward' },
+    { text: 'Jonathan' },
+    { text: 'Tom' },
+    { text: 'Eric' },
+  ];
+
+  // Actions
+  prevent(e: Event) {
+    return e.stopImmediatePropagation();
+  }
+
+  @action
+  open(dropdown: BasicDropdownDefaultBlock) {
+    void this.closeLaterTask.cancelAll();
+    dropdown.actions.open();
+  }
+
+  @action
+  async closeLater(dropdown: BasicDropdownDefaultBlock) {
+    try {
+      await this.closeLaterTask.perform(dropdown);
+    } catch (e) {
+      if (!didCancel(e)) {
+        // re-throw the non-cancelation error
+        throw e;
+      }
+    }
+  }
+
+  closeLaterTask = task(async (dropdown: BasicDropdownDefaultBlock) => {
+    await timeout(200);
+    dropdown.actions.close();
+  });
+
+  <template>
+    <div class="demo-fake-body">
+      <nav class="demo-fake-nav">
+        <div class="demo-fake-logo">Bookface</div>
+        <div class="demo-fake-notifications">
+          <BasicDropdown @horizontalPosition="right" as |dd|>
+            {{! template-lint-disable no-pointer-down-event-binding }}
+            <dd.Trigger
+              {{on "mousedown" this.prevent}}
+              {{on "mouseenter" (fn this.open dd)}}
+              {{on "mouseleave" (fn this.closeLater dd)}}
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+                <path
+                  fill="currentColor"
+                  d="M439.39 362.29c-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84C118.56 68.1 64.08 130.3 64.08 208c0 102.3-36.15 133.53-55.47 154.29-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h383.8c19.12 0 32-15.6 32.1-32 .05-7.55-2.61-15.27-8.61-21.71zM67.53 368c21.22-27.97 44.42-74.33 44.53-159.42 0-.2-.06-.38-.06-.58 0-61.86 50.14-112 112-112s112 50.14 112 112c0 .2-.06.38-.06.58.11 85.1 23.31 131.46 44.53 159.42H67.53zM224 512c35.32 0 63.97-28.65 63.97-64H160.03c0 35.35 28.65 64 63.97 64z"
+                ></path>
+              </svg>
+              <span class="demo-fake-notifications-count">
+                {{this.notifications.length}}
+              </span>
+            </dd.Trigger>
+
+            <dd.Content
+              class="demo-fake-notifications-content"
+              {{on "mouseenter" (fn this.open dd)}}
+              {{on "mouseleave" (fn this.closeLater dd)}}
+            >
+              <ul class="demo-fake-notifications-list">
+                {{#each this.notifications as |notification|}}
+                  <li class="demo-fake-notification-entry">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 448 512"
+                    >
+                      <path
+                        fill="currentColor"
+                        d="M400 32H48A48 48 0 0 0 0 80v352a48 48 0 0 0 48 48h352a48 48 0 0 0 48-48V80a48 48 0 0 0-48-48zm-16.39 307.37l-15 65A15 15 0 0 1 354 416C194 416 64 286.29 64 126a15.7 15.7 0 0 1 11.63-14.61l65-15A18.23 18.23 0 0 1 144 96a16.27 16.27 0 0 1 13.79 9.09l30 70A17.9 17.9 0 0 1 189 181a17 17 0 0 1-5.5 11.61l-37.89 31a231.91 231.91 0 0 0 110.78 110.78l31-37.89A17 17 0 0 1 299 291a17.85 17.85 0 0 1 5.91 1.21l70 30A16.25 16.25 0 0 1 384 336a17.41 17.41 0 0 1-.39 3.37z"
+                      ></path>
+                    </svg>
+                    <span>{{notification.text}}</span>
+                  </li>
+                {{/each}}
+              </ul>
+            </dd.Content>
+          </BasicDropdown>
+        </div>
+      </nav>
+    </div>
+  </template>
+}
diff --git a/docs/app/components/snippets/content-events-1.hbs b/docs/app/components/snippets/content-events-1.hbs
deleted file mode 100644
index f774449c..00000000
--- a/docs/app/components/snippets/content-events-1.hbs
+++ /dev/null
@@ -1,45 +0,0 @@
-<div class="demo-fake-body">
-  <nav class="demo-fake-nav">
-    <div class="demo-fake-logo">Bookface</div>
-    <div class="demo-fake-notifications">
-      <BasicDropdown @horizontalPosition="right" as |dd|>
-        {{! template-lint-disable no-pointer-down-event-binding }}
-        <dd.Trigger
-          {{on "mousedown" this.prevent}}
-          {{on "mouseenter" (fn this.open dd)}}
-          {{on "mouseleave" (fn this.closeLater dd)}}
-        >
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
-            <path
-              fill="currentColor"
-              d="M439.39 362.29c-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84C118.56 68.1 64.08 130.3 64.08 208c0 102.3-36.15 133.53-55.47 154.29-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h383.8c19.12 0 32-15.6 32.1-32 .05-7.55-2.61-15.27-8.61-21.71zM67.53 368c21.22-27.97 44.42-74.33 44.53-159.42 0-.2-.06-.38-.06-.58 0-61.86 50.14-112 112-112s112 50.14 112 112c0 .2-.06.38-.06.58.11 85.1 23.31 131.46 44.53 159.42H67.53zM224 512c35.32 0 63.97-28.65 63.97-64H160.03c0 35.35 28.65 64 63.97 64z"
-            ></path>
-          </svg>
-          <span
-            class="demo-fake-notifications-count"
-          >{{this.notifications.length}}</span>
-        </dd.Trigger>
-
-        <dd.Content
-          {{on "mouseenter" (fn this.open dd)}}
-          {{on "mouseleave" (fn this.closeLater dd)}}
-          class="demo-fake-notifications-content"
-        >
-          <ul class="demo-fake-notifications-list">
-            {{#each this.notifications as |notification|}}
-              <li class="demo-fake-notification-entry">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
-                  <path
-                    fill="currentColor"
-                    d="M400 32H48A48 48 0 0 0 0 80v352a48 48 0 0 0 48 48h352a48 48 0 0 0 48-48V80a48 48 0 0 0-48-48zm-16.39 307.37l-15 65A15 15 0 0 1 354 416C194 416 64 286.29 64 126a15.7 15.7 0 0 1 11.63-14.61l65-15A18.23 18.23 0 0 1 144 96a16.27 16.27 0 0 1 13.79 9.09l30 70A17.9 17.9 0 0 1 189 181a17 17 0 0 1-5.5 11.61l-37.89 31a231.91 231.91 0 0 0 110.78 110.78l31-37.89A17 17 0 0 1 299 291a17.85 17.85 0 0 1 5.91 1.21l70 30A16.25 16.25 0 0 1 384 336a17.41 17.41 0 0 1-.39 3.37z"
-                  ></path>
-                </svg>
-                <span>{{notification.text}}</span>
-              </li>
-            {{/each}}
-          </ul>
-        </dd.Content>
-      </BasicDropdown>
-    </div>
-  </nav>
-</div>
\ No newline at end of file
diff --git a/docs/app/components/snippets/content-events-1.js b/docs/app/components/snippets/content-events-1.js
deleted file mode 100644
index b78e97e1..00000000
--- a/docs/app/components/snippets/content-events-1.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import Component from '@glimmer/component';
-import { action } from '@ember/object';
-import { task, timeout } from 'ember-concurrency';
-
-export default class extends Component {
-  notifications = [
-    { text: 'Edward' },
-    { text: 'Jonathan' },
-    { text: 'Tom' },
-    { text: 'Eric' },
-  ];
-
-  // Actions
-  prevent(e) {
-    return e.stopImmediatePropagation();
-  }
-
-  @action
-  open(dropdown) {
-    this.closeLaterTask.cancelAll();
-    dropdown.actions.open();
-  }
-
-  @action
-  closeLater(dropdown) {
-    this.closeLaterTask.perform(dropdown);
-  }
-
-  closeLaterTask = task(async (dropdown) => {
-    await timeout(200);
-    dropdown.actions.close();
-  });
-}
diff --git a/docs/app/components/snippets/custom-position-1.gts b/docs/app/components/snippets/custom-position-1.gts
new file mode 100644
index 00000000..04219bfc
--- /dev/null
+++ b/docs/app/components/snippets/custom-position-1.gts
@@ -0,0 +1,36 @@
+import Component from '@glimmer/component';
+import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown';
+import type {
+  CalculatePositionOptions,
+  CalculatePositionResult,
+} from 'ember-basic-dropdown/utils/calculate-position';
+
+export default class extends Component {
+  calculatePosition(
+    trigger: Element,
+    content: HTMLElement,
+    _destination: HTMLElement,
+    { horizontalPosition, verticalPosition }: CalculatePositionOptions,
+  ): CalculatePositionResult {
+    const { top, left, width, height } = trigger.getBoundingClientRect();
+    const { height: contentHeight } = content.getBoundingClientRect();
+    const style = {
+      left: left + width,
+      top: top + window.pageYOffset + height / 2 - contentHeight / 2,
+    };
+
+    return { horizontalPosition, verticalPosition, style };
+  }
+
+  <template>
+    <BasicDropdown @calculatePosition={{this.calculatePosition}} as |dd|>
+      <dd.Trigger class="trigger-bootstrap-feel">Click me</dd.Trigger>
+
+      <dd.Content class="content-bootstrap-feel arrow-left-content">
+        Hello from the right!
+        <br />
+        See? It wasn't that hard.
+      </dd.Content>
+    </BasicDropdown>
+  </template>
+}
diff --git a/docs/app/components/snippets/custom-position-1.hbs b/docs/app/components/snippets/custom-position-1.hbs
deleted file mode 100644
index 99729482..00000000
--- a/docs/app/components/snippets/custom-position-1.hbs
+++ /dev/null
@@ -1,9 +0,0 @@
-<BasicDropdown @calculatePosition={{this.calculatePosition}} as |dd|>
-  <dd.Trigger class="trigger-bootstrap-feel">Click me</dd.Trigger>
-
-  <dd.Content class="content-bootstrap-feel arrow-left-content">
-    Hello from the right!
-    <br />
-    See? It wasn't that hard.
-  </dd.Content>
-</BasicDropdown>
\ No newline at end of file
diff --git a/docs/app/components/snippets/custom-position-1.js b/docs/app/components/snippets/custom-position-1.js
deleted file mode 100644
index 33639653..00000000
--- a/docs/app/components/snippets/custom-position-1.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import Component from '@glimmer/component';
-
-export default class extends Component {
-  calculatePosition(trigger, content) {
-    let { top, left, width, height } = trigger.getBoundingClientRect();
-    let { height: contentHeight } = content.getBoundingClientRect();
-    let style = {
-      left: left + width,
-      top: top + window.pageYOffset + height / 2 - contentHeight / 2,
-    };
-
-    return { style };
-  }
-}
diff --git a/docs/app/components/snippets/custom-position-2.gts b/docs/app/components/snippets/custom-position-2.gts
new file mode 100644
index 00000000..4dff52f8
--- /dev/null
+++ b/docs/app/components/snippets/custom-position-2.gts
@@ -0,0 +1,61 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { task, timeout } from 'ember-concurrency';
+import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown';
+import type {
+  CalculatePositionOptions,
+  CalculatePositionResult,
+} from 'ember-basic-dropdown/utils/calculate-position';
+import { action } from '@ember/object';
+
+const NAMES = ['Katie', 'Ricardo', 'Igor', 'Alex', 'Martin', 'Godfrey'];
+
+export default class extends Component {
+  @tracked names: string[] = [];
+
+  calculatePosition(
+    trigger: Element,
+    content: HTMLElement,
+    _destination: HTMLElement,
+    { horizontalPosition, verticalPosition }: CalculatePositionOptions,
+  ): CalculatePositionResult {
+    const { top, left, width, height } = trigger.getBoundingClientRect();
+    const { height: contentHeight } = content.getBoundingClientRect();
+    const style = {
+      left: left + width,
+      top: top + window.pageYOffset + height / 2 - contentHeight / 2,
+    };
+
+    return { horizontalPosition, verticalPosition, style };
+  }
+
+  addNames = task(async () => {
+    this.names = [];
+    for (const name of NAMES) {
+      this.names = [...this.names, name];
+      await timeout(750);
+    }
+  });
+
+  @action
+  open() {
+    void this.addNames.perform();
+  }
+
+  <template>
+    <BasicDropdown
+      @calculatePosition={{this.calculatePosition}}
+      @onOpen={{this.open}}
+      as |dd|
+    >
+      <dd.Trigger class="trigger-bootstrap-feel">Click me</dd.Trigger>
+
+      <dd.Content class="content-bootstrap-feel arrow-left-content">
+        {{#each this.names as |name|}}
+          {{name}}
+          <br />
+        {{/each}}
+      </dd.Content>
+    </BasicDropdown>
+  </template>
+}
diff --git a/docs/app/components/snippets/custom-position-2.hbs b/docs/app/components/snippets/custom-position-2.hbs
deleted file mode 100644
index ce9a07ff..00000000
--- a/docs/app/components/snippets/custom-position-2.hbs
+++ /dev/null
@@ -1,14 +0,0 @@
-<BasicDropdown
-  @calculatePosition={{this.calculatePosition}}
-  @onOpen={{perform this.addNames}}
-  as |dd|
->
-  <dd.Trigger class="trigger-bootstrap-feel">Click me</dd.Trigger>
-
-  <dd.Content class="content-bootstrap-feel arrow-left-content">
-    {{#each this.names as |name|}}
-      {{name}}
-      <br />
-    {{/each}}
-  </dd.Content>
-</BasicDropdown>
\ No newline at end of file
diff --git a/docs/app/components/snippets/custom-position-2.js b/docs/app/components/snippets/custom-position-2.js
deleted file mode 100644
index f1442b33..00000000
--- a/docs/app/components/snippets/custom-position-2.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { task, timeout } from 'ember-concurrency';
-
-const NAMES = ['Katie', 'Ricardo', 'Igor', 'Alex', 'Martin', 'Godfrey'];
-
-export default class extends Component {
-  @tracked names = [];
-
-  calculatePosition(trigger, content) {
-    let { top, left, width, height } = trigger.getBoundingClientRect();
-    let { height: contentHeight } = content.getBoundingClientRect();
-    let style = {
-      left: left + width,
-      top: top + window.pageYOffset + height / 2 - contentHeight / 2,
-    };
-
-    return { style };
-  }
-
-  addNames = task(async () => {
-    this.names = [];
-    for (let name of NAMES) {
-      this.names = [...this.names, name];
-      await timeout(750);
-    }
-  });
-}
diff --git a/docs/app/components/snippets/disabled-1.gts b/docs/app/components/snippets/disabled-1.gts
new file mode 100644
index 00000000..45a5bd5b
--- /dev/null
+++ b/docs/app/components/snippets/disabled-1.gts
@@ -0,0 +1,11 @@
+import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown';
+
+<template>
+  <BasicDropdown @disabled={{true}} as |dd|>
+    <dd.Trigger class="trigger-bootstrap-feel">Click me</dd.Trigger>
+
+    <dd.Content class="content-bootstrap-feel">
+      You can't see this
+    </dd.Content>
+  </BasicDropdown>
+</template>
diff --git a/docs/app/components/snippets/disabled-1.hbs b/docs/app/components/snippets/disabled-1.hbs
deleted file mode 100644
index 3d47ec44..00000000
--- a/docs/app/components/snippets/disabled-1.hbs
+++ /dev/null
@@ -1,7 +0,0 @@
-<BasicDropdown @disabled={{true}} as |dd|>
-  <dd.Trigger class="trigger-bootstrap-feel">Click me</dd.Trigger>
-
-  <dd.Content class="content-bootstrap-feel">
-    You can't see this
-  </dd.Content>
-</BasicDropdown>
\ No newline at end of file
diff --git a/docs/app/components/snippets/disabled-1.js b/docs/app/components/snippets/disabled-1.js
deleted file mode 100644
index 1af80ea0..00000000
--- a/docs/app/components/snippets/disabled-1.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import Component from '@glimmer/component';
-
-// eslint-disable-next-line ember/no-empty-glimmer-component-classes
-export default class extends Component {}
diff --git a/docs/app/components/snippets/dropdown-events-1.gts b/docs/app/components/snippets/dropdown-events-1.gts
new file mode 100644
index 00000000..ac5ed530
--- /dev/null
+++ b/docs/app/components/snippets/dropdown-events-1.gts
@@ -0,0 +1,40 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown';
+import { task, timeout } from 'ember-concurrency';
+
+const users = [
+  { name: 'Nathan', assignment: 'CLI' },
+  { name: 'Rober', assignment: 'Whatnot' },
+  { name: 'Leah', assignment: 'Community' },
+];
+
+export default class extends Component {
+  users: typeof users = [];
+
+  loadUsers = task(async () => {
+    await timeout(1000);
+    this.users = users;
+  });
+
+  @action
+  open() {
+    void this.loadUsers.perform();
+  }
+
+  <template>
+    <BasicDropdown @onOpen={{this.open}} as |dd|>
+      <dd.Trigger class="trigger-bootstrap-feel">Click me</dd.Trigger>
+
+      <dd.Content class="content-bootstrap-feel width-300">
+        {{#if this.loadUsers.isRunning}}
+          <div class="circular-loader"></div>
+        {{else}}
+          {{#each this.users as |user|}}
+            <p>{{user.name}} - {{user.assignment}}</p>
+          {{/each}}
+        {{/if}}
+      </dd.Content>
+    </BasicDropdown>
+  </template>
+}
diff --git a/docs/app/components/snippets/dropdown-events-1.hbs b/docs/app/components/snippets/dropdown-events-1.hbs
deleted file mode 100644
index 89a50556..00000000
--- a/docs/app/components/snippets/dropdown-events-1.hbs
+++ /dev/null
@@ -1,13 +0,0 @@
-<BasicDropdown @onOpen={{perform this.loadUsers}} as |dd|>
-  <dd.Trigger class="trigger-bootstrap-feel">Click me</dd.Trigger>
-
-  <dd.Content class="content-bootstrap-feel width-300">
-    {{#if this.loadUsers.isRunning}}
-      <div class="circular-loader"></div>
-    {{else}}
-      {{#each this.loadUsers.lastSuccessful.value as |user|}}
-        <p>{{user.name}} - {{user.assignment}}</p>
-      {{/each}}
-    {{/if}}
-  </dd.Content>
-</BasicDropdown>
\ No newline at end of file
diff --git a/docs/app/components/snippets/dropdown-events-1.js b/docs/app/components/snippets/dropdown-events-1.js
deleted file mode 100644
index 3b9974bc..00000000
--- a/docs/app/components/snippets/dropdown-events-1.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import Component from '@glimmer/component';
-import { task, timeout } from 'ember-concurrency';
-
-const users = [
-  { name: 'Nathan', assignment: 'CLI' },
-  { name: 'Rober', assignment: 'Whatnot' },
-  { name: 'Leah', assignment: 'Community' },
-];
-
-export default class extends Component {
-  loadUsers = task(async () => {
-    await timeout(1000);
-    return users;
-  });
-}
diff --git a/docs/app/components/snippets/dropdown-events-2.gts b/docs/app/components/snippets/dropdown-events-2.gts
new file mode 100644
index 00000000..cd5c7ac1
--- /dev/null
+++ b/docs/app/components/snippets/dropdown-events-2.gts
@@ -0,0 +1,50 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { task, timeout } from 'ember-concurrency';
+import BasicDropdown, {
+  type Dropdown,
+} from 'ember-basic-dropdown/components/basic-dropdown';
+
+const users = [
+  { name: 'Nathan', assignment: 'CLI' },
+  { name: 'Rober', assignment: 'Whatnot' },
+  { name: 'Leah', assignment: 'Community' },
+];
+
+export default class extends Component {
+  users = users;
+
+  // Actions
+  @action
+  waitForUsers(dropdown: Dropdown, e?: Event) {
+    if (e) {
+      void this.loadUsersAndOpen.perform(dropdown);
+      return false;
+    }
+  }
+
+  // Tasks
+  loadUsersAndOpen = task(async (dropdown: Dropdown) => {
+    await timeout(1000);
+    dropdown.actions.open(); // invoked without event
+    return users;
+  });
+
+  <template>
+    <BasicDropdown @onOpen={{this.waitForUsers}} as |dd|>
+      <dd.Trigger class="trigger-bootstrap-feel">
+        {{#if this.loadUsersAndOpen.isRunning}}
+          Loading...
+        {{else}}
+          Click me
+        {{/if}}
+      </dd.Trigger>
+
+      <dd.Content class="content-bootstrap-feel width-300">
+        {{#each this.loadUsersAndOpen.lastSuccessful.value as |user|}}
+          <p>{{user.name}} - {{user.assignment}}</p>
+        {{/each}}
+      </dd.Content>
+    </BasicDropdown>
+  </template>
+}
diff --git a/docs/app/components/snippets/dropdown-events-2.hbs b/docs/app/components/snippets/dropdown-events-2.hbs
deleted file mode 100644
index b9cb4448..00000000
--- a/docs/app/components/snippets/dropdown-events-2.hbs
+++ /dev/null
@@ -1,15 +0,0 @@
-<BasicDropdown @onOpen={{this.waitForUsers}} as |dd|>
-  <dd.Trigger class="trigger-bootstrap-feel">
-    {{#if this.loadUsersAndOpen.isRunning}}
-      Loading...
-    {{else}}
-      Click me
-    {{/if}}
-  </dd.Trigger>
-
-  <dd.Content class="content-bootstrap-feel width-300">
-    {{#each this.loadUsersAndOpen.lastSuccessful.value as |user|}}
-      <p>{{user.name}} - {{user.assignment}}</p>
-    {{/each}}
-  </dd.Content>
-</BasicDropdown>
\ No newline at end of file
diff --git a/docs/app/components/snippets/dropdown-events-2.js b/docs/app/components/snippets/dropdown-events-2.js
deleted file mode 100644
index 214231e9..00000000
--- a/docs/app/components/snippets/dropdown-events-2.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import Component from '@glimmer/component';
-import { action } from '@ember/object';
-import { task, timeout } from 'ember-concurrency';
-
-const users = [
-  { name: 'Nathan', assignment: 'CLI' },
-  { name: 'Rober', assignment: 'Whatnot' },
-  { name: 'Leah', assignment: 'Community' },
-];
-
-export default class extends Component {
-  users = users;
-
-  // Actions
-  @action
-  waitForUsers(dropdown, e) {
-    if (e) {
-      this.loadUsersAndOpen.perform(dropdown, e);
-      return false;
-    }
-  }
-
-  // Tasks
-  loadUsersAndOpen = task(async (dropdown) => {
-    await timeout(1000);
-    dropdown.actions.open(); // invoked without event
-    return users;
-  });
-}
diff --git a/docs/app/components/snippets/dropdown-events-3.gts b/docs/app/components/snippets/dropdown-events-3.gts
new file mode 100644
index 00000000..5a221b08
--- /dev/null
+++ b/docs/app/components/snippets/dropdown-events-3.gts
@@ -0,0 +1,50 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown';
+import { on } from '@ember/modifier';
+import { fn } from '@ember/helper';
+import { tracked } from '@glimmer/tracking';
+
+export default class extends Component {
+  @tracked selected: string = '';
+
+  @action
+  preventUntilSelected() {
+    if (!this.selected) {
+      alert('You have to choose!');
+      return false;
+    }
+  }
+
+  <template>
+    <BasicDropdown @onClose={{this.preventUntilSelected}} as |dd|>
+      <dd.Trigger class="trigger-bootstrap-feel">Click me</dd.Trigger>
+
+      <dd.Content class="content-bootstrap-feel width-300">
+        <p>
+          Who you love more?
+        </p>
+        <p>
+          <input
+            type="radio"
+            id="question-1"
+            name="question"
+            value="dat"
+            {{on "change" (fn (mut this.selected) "dad")}}
+          />
+          <label for="question-1">Dad</label>
+        </p>
+        <p>
+          <input
+            type="radio"
+            id="question-2"
+            name="question"
+            value="mom"
+            {{on "change" (fn (mut this.selected) "mom")}}
+          />
+          <label for="question-2">Mom</label>
+        </p>
+      </dd.Content>
+    </BasicDropdown>
+  </template>
+}
diff --git a/docs/app/components/snippets/dropdown-events-3.hbs b/docs/app/components/snippets/dropdown-events-3.hbs
deleted file mode 100644
index 5ef6872e..00000000
--- a/docs/app/components/snippets/dropdown-events-3.hbs
+++ /dev/null
@@ -1,29 +0,0 @@
-<BasicDropdown @onClose={{this.preventUntilSelected}} as |dd|>
-  <dd.Trigger class="trigger-bootstrap-feel">Click me</dd.Trigger>
-
-  <dd.Content class="content-bootstrap-feel width-300">
-    <p>
-      Who you love more?
-    </p>
-    <p>
-      <input
-        type="radio"
-        id="question-1"
-        name="question"
-        value="dat"
-        {{on "change" (fn (mut this.selected) "dad")}}
-      />
-      <label for="question-1">Dad</label>
-    </p>
-    <p>
-      <input
-        type="radio"
-        id="question-2"
-        name="question"
-        value="mom"
-        {{on "change" (fn (mut this.selected) "mom")}}
-      />
-      <label for="question-2">Mom</label>
-    </p>
-  </dd.Content>
-</BasicDropdown>
\ No newline at end of file
diff --git a/docs/app/components/snippets/dropdown-events-3.js b/docs/app/components/snippets/dropdown-events-3.js
deleted file mode 100644
index e5b3cbd6..00000000
--- a/docs/app/components/snippets/dropdown-events-3.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import Component from '@glimmer/component';
-import { action } from '@ember/object';
-
-export default class extends Component {
-  @action
-  preventUntilSelected() {
-    if (!this.selected) {
-      alert('You have to choose!');
-      return false;
-    }
-  }
-}
diff --git a/docs/app/components/snippets/how-to-use-it-1.gts b/docs/app/components/snippets/how-to-use-it-1.gts
new file mode 100644
index 00000000..9ca93563
--- /dev/null
+++ b/docs/app/components/snippets/how-to-use-it-1.gts
@@ -0,0 +1,8 @@
+import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown';
+
+<template>
+  <BasicDropdown as |dd|>
+    <dd.Trigger>Click me</dd.Trigger>
+    <dd.Content>Hello world</dd.Content>
+  </BasicDropdown>
+</template>
diff --git a/docs/app/components/snippets/how-to-use-it-1.hbs b/docs/app/components/snippets/how-to-use-it-1.hbs
deleted file mode 100644
index 02cee1b2..00000000
--- a/docs/app/components/snippets/how-to-use-it-1.hbs
+++ /dev/null
@@ -1,4 +0,0 @@
-<BasicDropdown as |dd|>
-  <dd.Trigger>Click me</dd.Trigger>
-  <dd.Content>Hello world</dd.Content>
-</BasicDropdown>
\ No newline at end of file
diff --git a/docs/app/components/snippets/how-to-use-it-1.js b/docs/app/components/snippets/how-to-use-it-1.js
deleted file mode 100644
index 1af80ea0..00000000
--- a/docs/app/components/snippets/how-to-use-it-1.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import Component from '@glimmer/component';
-
-// eslint-disable-next-line ember/no-empty-glimmer-component-classes
-export default class extends Component {}
diff --git a/docs/app/components/snippets/how-to-use-it-2.gts b/docs/app/components/snippets/how-to-use-it-2.gts
new file mode 100644
index 00000000..c5795d2b
--- /dev/null
+++ b/docs/app/components/snippets/how-to-use-it-2.gts
@@ -0,0 +1,15 @@
+import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown';
+
+<template>
+  <BasicDropdown as |dd|>
+    <dd.Trigger class="trigger-bootstrap-feel">
+      Click me
+      <span class="caret"></span>
+    </dd.Trigger>
+
+    <dd.Content class="content-bootstrap-feel">
+      <p>I look like bootstrap, right?</p>
+      <p>You can style me however you want</p>
+    </dd.Content>
+  </BasicDropdown>
+</template>
diff --git a/docs/app/components/snippets/how-to-use-it-2.hbs b/docs/app/components/snippets/how-to-use-it-2.hbs
deleted file mode 100644
index 450fb6f5..00000000
--- a/docs/app/components/snippets/how-to-use-it-2.hbs
+++ /dev/null
@@ -1,9 +0,0 @@
-<BasicDropdown as |dd|>
-  <dd.Trigger class="trigger-bootstrap-feel">Click me
-    <span class="caret"></span></dd.Trigger>
-
-  <dd.Content class="content-bootstrap-feel">
-    <p>I look like bootstrap, right?</p>
-    <p>You can style me however you want</p>
-  </dd.Content>
-</BasicDropdown>
\ No newline at end of file
diff --git a/docs/app/components/snippets/how-to-use-it-2.js b/docs/app/components/snippets/how-to-use-it-2.js
deleted file mode 100644
index 1af80ea0..00000000
--- a/docs/app/components/snippets/how-to-use-it-2.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import Component from '@glimmer/component';
-
-// eslint-disable-next-line ember/no-empty-glimmer-component-classes
-export default class extends Component {}
diff --git a/docs/app/components/snippets/how-to-use-it-3.gts b/docs/app/components/snippets/how-to-use-it-3.gts
new file mode 100644
index 00000000..a8745c18
--- /dev/null
+++ b/docs/app/components/snippets/how-to-use-it-3.gts
@@ -0,0 +1,11 @@
+import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown';
+
+<template>
+  <BasicDropdown @horizontalPosition="center" as |dd|>
+    <dd.Trigger class="trigger-material-round">+</dd.Trigger>
+
+    <dd.Content class="content-material-round">
+      <img src="/some-image.gif" alt="puppy" height="150" width="150" />
+    </dd.Content>
+  </BasicDropdown>
+</template>
diff --git a/docs/app/components/snippets/how-to-use-it-3.hbs b/docs/app/components/snippets/how-to-use-it-3.hbs
deleted file mode 100644
index a984a39c..00000000
--- a/docs/app/components/snippets/how-to-use-it-3.hbs
+++ /dev/null
@@ -1,7 +0,0 @@
-<BasicDropdown @horizontalPosition="center" as |dd|>
-  <dd.Trigger class="trigger-material-round">+</dd.Trigger>
-
-  <dd.Content class="content-material-round">
-    <img src="/some-image.gif" alt="puppy" height="150" width="150" />
-  </dd.Content>
-</BasicDropdown>
\ No newline at end of file
diff --git a/docs/app/components/snippets/how-to-use-it-3.js b/docs/app/components/snippets/how-to-use-it-3.js
deleted file mode 100644
index 1af80ea0..00000000
--- a/docs/app/components/snippets/how-to-use-it-3.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import Component from '@glimmer/component';
-
-// eslint-disable-next-line ember/no-empty-glimmer-component-classes
-export default class extends Component {}
diff --git a/docs/app/components/snippets/installation-0.gts b/docs/app/components/snippets/installation-0.gts
new file mode 100644
index 00000000..b6ab96ce
--- /dev/null
+++ b/docs/app/components/snippets/installation-0.gts
@@ -0,0 +1,3 @@
+import BasicDropdownWormhole from 'ember-basic-dropdown/components/basic-dropdown-wormhole';
+
+<template><BasicDropdownWormhole /></template>
diff --git a/docs/app/components/snippets/installation-1.css.txt b/docs/app/components/snippets/installation-1.css.txt
new file mode 100644
index 00000000..9e55ae5a
--- /dev/null
+++ b/docs/app/components/snippets/installation-1.css.txt
@@ -0,0 +1 @@
+@import 'ember-basic-dropdown/vendor/ember-basic-dropdown.css';
diff --git a/docs/app/components/snippets/installation-1.js b/docs/app/components/snippets/installation-1.js
new file mode 100644
index 00000000..2457cd3c
--- /dev/null
+++ b/docs/app/components/snippets/installation-1.js
@@ -0,0 +1 @@
+import 'ember-basic-dropdown/styles';
diff --git a/docs/app/templates/snippets/installation-2.js b/docs/app/components/snippets/installation-2-snippet.js
similarity index 100%
rename from docs/app/templates/snippets/installation-2.js
rename to docs/app/components/snippets/installation-2-snippet.js
diff --git a/docs/app/components/snippets/no-trigger-1.gts b/docs/app/components/snippets/no-trigger-1.gts
new file mode 100644
index 00000000..abc0c048
--- /dev/null
+++ b/docs/app/components/snippets/no-trigger-1.gts
@@ -0,0 +1,25 @@
+import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown';
+import { on } from '@ember/modifier';
+
+<template>
+  <BasicDropdown as |dd|>
+    <div class="form-inline">
+      <input
+        type="text"
+        class="form-control"
+        data-ebd-id="{{dd.uniqueId}}-trigger"
+      />
+      <button
+        type="button"
+        class="trigger-bootstrap-feel"
+        {{on "click" dd.actions.toggle}}
+      >
+        Click me
+      </button>
+    </div>
+
+    <dd.Content class="content-bootstrap-feel width-300">
+      I don't like the button, I like the input.
+    </dd.Content>
+  </BasicDropdown>
+</template>
diff --git a/docs/app/components/snippets/no-trigger-1.hbs b/docs/app/components/snippets/no-trigger-1.hbs
deleted file mode 100644
index b939efca..00000000
--- a/docs/app/components/snippets/no-trigger-1.hbs
+++ /dev/null
@@ -1,20 +0,0 @@
-<BasicDropdown as |dd|>
-  <div class="form-inline">
-    <input
-      type="text"
-      class="form-control"
-      data-ebd-id="{{dd.uniqueId}}-trigger"
-    />
-    <button
-      type="button"
-      class="trigger-bootstrap-feel"
-      {{on "click" dd.actions.toggle}}
-    >
-      Click me
-    </button>
-  </div>
-
-  <dd.Content class="content-bootstrap-feel width-300">
-    I don't like the button, I like the input.
-  </dd.Content>
-</BasicDropdown>
\ No newline at end of file
diff --git a/docs/app/components/snippets/no-trigger-1.js b/docs/app/components/snippets/no-trigger-1.js
deleted file mode 100644
index 1af80ea0..00000000
--- a/docs/app/components/snippets/no-trigger-1.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import Component from '@glimmer/component';
-
-// eslint-disable-next-line ember/no-empty-glimmer-component-classes
-export default class extends Component {}
diff --git a/docs/app/components/snippets/no-trigger-2.gts b/docs/app/components/snippets/no-trigger-2.gts
new file mode 100644
index 00000000..9b2c5e2c
--- /dev/null
+++ b/docs/app/components/snippets/no-trigger-2.gts
@@ -0,0 +1,18 @@
+import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown';
+import basicDropdownTrigger from 'ember-basic-dropdown/modifiers/basic-dropdown-trigger';
+
+<template>
+  <BasicDropdown as |dd|>
+    <button
+      type="button"
+      class="trigger-bootstrap-feel"
+      {{basicDropdownTrigger dropdown=dd}}
+    >
+      Click me
+    </button>
+
+    <dd.Content class="content-bootstrap-feel width-300">
+      I was opened with a custom trigger
+    </dd.Content>
+  </BasicDropdown>
+</template>
diff --git a/docs/app/components/snippets/no-trigger-2.hbs b/docs/app/components/snippets/no-trigger-2.hbs
deleted file mode 100644
index dc4a13e0..00000000
--- a/docs/app/components/snippets/no-trigger-2.hbs
+++ /dev/null
@@ -1,13 +0,0 @@
-<BasicDropdown as |dd|>
-  <button
-    type="button"
-    class="trigger-bootstrap-feel"
-    {{basic-dropdown-trigger dropdown=dd}}
-  >
-    Click me
-  </button>
-
-  <dd.Content class="content-bootstrap-feel width-300">
-    I was opened with a custom trigger
-  </dd.Content>
-</BasicDropdown>
\ No newline at end of file
diff --git a/docs/app/components/snippets/no-trigger-2.js b/docs/app/components/snippets/no-trigger-2.js
deleted file mode 100644
index 1af80ea0..00000000
--- a/docs/app/components/snippets/no-trigger-2.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import Component from '@glimmer/component';
-
-// eslint-disable-next-line ember/no-empty-glimmer-component-classes
-export default class extends Component {}
diff --git a/docs/app/components/snippets/overlays-1.gts b/docs/app/components/snippets/overlays-1.gts
new file mode 100644
index 00000000..27c37b11
--- /dev/null
+++ b/docs/app/components/snippets/overlays-1.gts
@@ -0,0 +1,11 @@
+import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown';
+
+<template>
+  <BasicDropdown as |dd|>
+    <dd.Trigger class="trigger-bootstrap-feel">Click me</dd.Trigger>
+
+    <dd.Content class="content-bootstrap-feel width-300" @overlay={{true}}>
+      By default the overlays is black and transparent, but you can change that.
+    </dd.Content>
+  </BasicDropdown>
+</template>
diff --git a/docs/app/components/snippets/overlays-1.hbs b/docs/app/components/snippets/overlays-1.hbs
deleted file mode 100644
index 049a8dc8..00000000
--- a/docs/app/components/snippets/overlays-1.hbs
+++ /dev/null
@@ -1,7 +0,0 @@
-<BasicDropdown as |dd|>
-  <dd.Trigger class="trigger-bootstrap-feel">Click me</dd.Trigger>
-
-  <dd.Content class="content-bootstrap-feel width-300" @overlay={{true}}>
-    By default the overlays is black and transparent, but you can change that.
-  </dd.Content>
-</BasicDropdown>
\ No newline at end of file
diff --git a/docs/app/components/snippets/overlays-1.js b/docs/app/components/snippets/overlays-1.js
deleted file mode 100644
index 1af80ea0..00000000
--- a/docs/app/components/snippets/overlays-1.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import Component from '@glimmer/component';
-
-// eslint-disable-next-line ember/no-empty-glimmer-component-classes
-export default class extends Component {}
diff --git a/docs/app/components/snippets/position-1.gts b/docs/app/components/snippets/position-1.gts
new file mode 100644
index 00000000..f14969ab
--- /dev/null
+++ b/docs/app/components/snippets/position-1.gts
@@ -0,0 +1,145 @@
+import { fn } from '@ember/helper';
+import { on } from '@ember/modifier';
+import Component from '@glimmer/component';
+import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown';
+import { eq, not } from 'ember-truth-helpers';
+import type {
+  HorizontalPosition,
+  VerticalPosition,
+} from 'ember-basic-dropdown/types';
+
+export default class extends Component {
+  horizontalPosition: HorizontalPosition = 'auto';
+  verticalPosition: VerticalPosition = 'auto';
+  buttonPosition = 'left';
+  renderInPlace = false;
+
+  <template>
+    horizontalPosition:
+    {{this.horizontalPosition}}
+    verticalPosition:
+    {{this.verticalPosition}}
+    buttonPosition:
+    {{this.buttonPosition}}
+    <div class="flex content-pull-{{this.buttonPosition}}">
+      {{#if this.renderInPlace}}
+        <BasicDropdown
+          @horizontalPosition={{this.horizontalPosition}}
+          @verticalPosition={{this.verticalPosition}}
+          @renderInPlace={{true}}
+          as |dd|
+        >
+          <dd.Trigger class="trigger-bootstrap-feel">Click me</dd.Trigger>
+          <dd.Content class="content-bootstrap-feel">
+            <img src="/lts.png" alt="tomster" />
+          </dd.Content>
+        </BasicDropdown>
+      {{else}}
+        <BasicDropdown
+          @horizontalPosition={{this.horizontalPosition}}
+          @verticalPosition={{this.verticalPosition}}
+          as |dd|
+        >
+          <dd.Trigger class="trigger-bootstrap-feel">Click me</dd.Trigger>
+          <dd.Content class="content-bootstrap-feel">
+            <img src="/lts.png" alt="tomster" />
+          </dd.Content>
+        </BasicDropdown>
+      {{/if}}
+    </div>
+    <p>
+      Horizontal
+      <br />
+      <input
+        type="radio"
+        id="h-auto"
+        checked={{eq this.horizontalPosition "auto"}}
+        {{on "change" (fn (mut this.horizontalPosition) "auto")}}
+      />
+      <label for="h-auto">auto</label>
+      <input
+        type="radio"
+        id="h-auto-right"
+        checked={{eq this.horizontalPosition "auto-right"}}
+        {{on "change" (fn (mut this.horizontalPosition) "auto-right")}}
+      />
+      <label for="h-auto-right">auto-right</label>
+      <input
+        type="radio"
+        id="h-left"
+        checked={{eq this.horizontalPosition "left"}}
+        {{on "change" (fn (mut this.horizontalPosition) "left")}}
+      />
+      <label for="h-left">left</label>
+      <input
+        type="radio"
+        id="h-center"
+        checked={{eq this.horizontalPosition "center"}}
+        {{on "change" (fn (mut this.horizontalPosition) "center")}}
+      />
+      <label for="h-center">center</label>
+      <input
+        type="radio"
+        id="h-right"
+        checked={{eq this.horizontalPosition "right"}}
+        {{on "change" (fn (mut this.horizontalPosition) "right")}}
+      />
+      <label for="h-right">right</label>
+    </p>
+    <p>
+      Vertical
+      <br />
+      <input
+        type="radio"
+        id="v-auto"
+        checked={{eq this.verticalPosition "auto"}}
+        {{on "change" (fn (mut this.verticalPosition) "auto")}}
+      />
+      <label for="v-auto">auto</label>
+      <input
+        type="radio"
+        id="v-above"
+        checked={{eq this.verticalPosition "above"}}
+        {{on "change" (fn (mut this.verticalPosition) "above")}}
+      />
+      <label for="v-above">above</label>
+      <input
+        type="radio"
+        id="v-below"
+        checked={{eq this.verticalPosition "below"}}
+        {{on "change" (fn (mut this.verticalPosition) "below")}}
+      />
+      <label for="v-below">below</label>
+    </p>
+    <p>
+      Button position
+      <br />
+      <input
+        type="radio"
+        id="btn-pos-left"
+        checked={{eq this.buttonPosition "left"}}
+        {{on "change" (fn (mut this.buttonPosition) "left")}}
+      />
+      <label for="btn-pos-left">left</label>
+      <input
+        type="radio"
+        id="btn-pos-right"
+        checked={{eq this.buttonPosition "right"}}
+        {{on "change" (fn (mut this.buttonPosition) "right")}}
+      />
+      <label for="btn-pos-right">right</label>
+    </p>
+
+    <p>
+      RenderInPlace
+      <br />
+      <input
+        type="checkbox"
+        id="config-render-in-lace"
+        checked={{eq this.renderInPlace "left"}}
+        {{on "change" (fn (mut this.renderInPlace) (not this.renderInPlace))}}
+      />
+      <label for="config-render-in-lace">Render in-place</label>
+    </p>
+  </template>
+}
diff --git a/docs/app/components/snippets/position-1.hbs b/docs/app/components/snippets/position-1.hbs
deleted file mode 100644
index 068efb5e..00000000
--- a/docs/app/components/snippets/position-1.hbs
+++ /dev/null
@@ -1,126 +0,0 @@
-horizontalPosition:
-{{this.horizontalPosition}}
-verticalPosition:
-{{this.verticalPosition}}
-buttonPosition:
-{{this.buttonPosition}}
-<div class="flex content-pull-{{this.buttonPosition}}">
-  {{#if this.renderInPlace}}
-    <BasicDropdown
-      @horizontalPosition={{this.horizontalPosition}}
-      @verticalPosition={{this.verticalPosition}}
-      @renderInPlace={{true}}
-      as |dd|
-    >
-      <dd.Trigger class="trigger-bootstrap-feel">Click me</dd.Trigger>
-      <dd.Content class="content-bootstrap-feel">
-        <img src="/lts.png" alt="tomster" />
-      </dd.Content>
-    </BasicDropdown>
-  {{else}}
-    <BasicDropdown
-      @horizontalPosition={{this.horizontalPosition}}
-      @verticalPosition={{this.verticalPosition}}
-      as |dd|
-    >
-      <dd.Trigger class="trigger-bootstrap-feel">Click me</dd.Trigger>
-      <dd.Content class="content-bootstrap-feel">
-        <img src="/lts.png" alt="tomster" />
-      </dd.Content>
-    </BasicDropdown>
-  {{/if}}
-</div>
-<p>
-  Horizontal
-  <br />
-  <input
-    type="radio"
-    id="h-auto"
-    checked={{eq this.horizontalPosition "auto"}}
-    {{on "change" (fn (mut this.horizontalPosition) "auto")}}
-  />
-  <label for="h-auto">auto</label>
-  <input
-    type="radio"
-    id="h-auto-right"
-    checked={{eq this.horizontalPosition "auto-right"}}
-    {{on "change" (fn (mut this.horizontalPosition) "auto-right")}}
-  />
-  <label for="h-auto-right">auto-right</label>
-  <input
-    type="radio"
-    id="h-left"
-    checked={{eq this.horizontalPosition "left"}}
-    {{on "change" (fn (mut this.horizontalPosition) "left")}}
-  />
-  <label for="h-left">left</label>
-  <input
-    type="radio"
-    id="h-center"
-    checked={{eq this.horizontalPosition "center"}}
-    {{on "change" (fn (mut this.horizontalPosition) "center")}}
-  />
-  <label for="h-center">center</label>
-  <input
-    type="radio"
-    id="h-right"
-    checked={{eq this.horizontalPosition "right"}}
-    {{on "change" (fn (mut this.horizontalPosition) "right")}}
-  />
-  <label for="h-right">right</label>
-</p>
-<p>
-  Vertical
-  <br />
-  <input
-    type="radio"
-    id="v-auto"
-    checked={{eq this.verticalPosition "auto"}}
-    {{on "change" (fn (mut this.verticalPosition) "auto")}}
-  />
-  <label for="v-auto">auto</label>
-  <input
-    type="radio"
-    id="v-above"
-    checked={{eq this.verticalPosition "above"}}
-    {{on "change" (fn (mut this.verticalPosition) "above")}}
-  />
-  <label for="v-above">above</label>
-  <input
-    type="radio"
-    id="v-below"
-    checked={{eq this.verticalPosition "below"}}
-    {{on "change" (fn (mut this.verticalPosition) "below")}}
-  />
-  <label for="v-below">below</label>
-</p>
-<p>
-  Button position
-  <br />
-  <input
-    type="radio"
-    id="btn-pos-left"
-    checked={{eq this.buttonPosition "left"}}
-    {{on "change" (fn (mut this.buttonPosition) "left")}}
-  />
-  <label for="btn-pos-left">left</label>
-  <input
-    type="radio"
-    id="btn-pos-right"
-    checked={{eq this.buttonPosition "right"}}
-    {{on "change" (fn (mut this.buttonPosition) "right")}}
-  />
-  <label for="btn-pos-right">right</label>
-</p>
-
-<p>
-  RenderInPlace
-  <br />
-  <input
-    type="checkbox"
-    id="config-render-in-lace"
-    checked={{eq this.renderInPlace "left"}}
-    {{on "change" (fn (mut this.renderInPlace) (not this.renderInPlace))}}
-  />
-  <label for="config-render-in-lace">Render in-place</label>
-</p>
\ No newline at end of file
diff --git a/docs/app/components/snippets/position-1.js b/docs/app/components/snippets/position-1.js
deleted file mode 100644
index 4f1fbc24..00000000
--- a/docs/app/components/snippets/position-1.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import Component from '@glimmer/component';
-
-export default class extends Component {
-  horizontalPosition = 'auto';
-  verticalPosition = 'auto';
-  buttonPosition = 'left';
-  renderInPlace = false;
-}
diff --git a/docs/app/components/snippets/position-2.gts b/docs/app/components/snippets/position-2.gts
new file mode 100644
index 00000000..bf811df7
--- /dev/null
+++ b/docs/app/components/snippets/position-2.gts
@@ -0,0 +1,11 @@
+import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown';
+
+<template>
+  <BasicDropdown @renderInPlace={{true}} as |dd|>
+    <dd.Trigger class="trigger-bootstrap-feel">Click me</dd.Trigger>
+
+    <dd.Content class="content-bootstrap-feel">
+      I'm not in the root of the app
+    </dd.Content>
+  </BasicDropdown>
+</template>
diff --git a/docs/app/components/snippets/position-2.hbs b/docs/app/components/snippets/position-2.hbs
deleted file mode 100644
index 5970fc35..00000000
--- a/docs/app/components/snippets/position-2.hbs
+++ /dev/null
@@ -1,7 +0,0 @@
-<BasicDropdown @renderInPlace={{true}} as |dd|>
-  <dd.Trigger class="trigger-bootstrap-feel">Click me</dd.Trigger>
-
-  <dd.Content class="content-bootstrap-feel">
-    I'm not in the root of the app
-  </dd.Content>
-</BasicDropdown>
\ No newline at end of file
diff --git a/docs/app/components/snippets/position-2.js b/docs/app/components/snippets/position-2.js
deleted file mode 100644
index 1af80ea0..00000000
--- a/docs/app/components/snippets/position-2.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import Component from '@glimmer/component';
-
-// eslint-disable-next-line ember/no-empty-glimmer-component-classes
-export default class extends Component {}
diff --git a/docs/app/components/snippets/position-3.gts b/docs/app/components/snippets/position-3.gts
new file mode 100644
index 00000000..270089a2
--- /dev/null
+++ b/docs/app/components/snippets/position-3.gts
@@ -0,0 +1,11 @@
+import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown';
+
+<template>
+  <BasicDropdown @matchTriggerWidth={{true}} as |dd|>
+    <dd.Trigger class="trigger-bootstrap-feel">Click me!</dd.Trigger>
+
+    <dd.Content class="content-bootstrap-feel">
+      I'm not in the root of the app
+    </dd.Content>
+  </BasicDropdown>
+</template>
diff --git a/docs/app/components/snippets/position-3.hbs b/docs/app/components/snippets/position-3.hbs
deleted file mode 100644
index 1ccf5faa..00000000
--- a/docs/app/components/snippets/position-3.hbs
+++ /dev/null
@@ -1,7 +0,0 @@
-<BasicDropdown @matchTriggerWidth={{true}} as |dd|>
-  <dd.Trigger class="trigger-bootstrap-feel">Click me!</dd.Trigger>
-
-  <dd.Content class="content-bootstrap-feel">
-    I'm not in the root of the app
-  </dd.Content>
-</BasicDropdown>
\ No newline at end of file
diff --git a/docs/app/components/snippets/position-3.js b/docs/app/components/snippets/position-3.js
deleted file mode 100644
index 1af80ea0..00000000
--- a/docs/app/components/snippets/position-3.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import Component from '@glimmer/component';
-
-// eslint-disable-next-line ember/no-empty-glimmer-component-classes
-export default class extends Component {}
diff --git a/docs/app/components/snippets/scrollable-container-1.gts b/docs/app/components/snippets/scrollable-container-1.gts
new file mode 100644
index 00000000..887f88f3
--- /dev/null
+++ b/docs/app/components/snippets/scrollable-container-1.gts
@@ -0,0 +1,25 @@
+import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown';
+
+<template>
+  <div class="scroll__container">
+    <div class="scroll__scrolling-container">
+      <div class="scroll__filler"></div>
+      <div class="scroll__content-container">
+        <div class="scroll__content">
+          <BasicDropdown as |dd|>
+            <dd.Trigger class="trigger-bootstrap-feel">Click me
+              <span class="caret"></span></dd.Trigger>
+
+            <dd.Content class="content-bootstrap-feel">
+              <p>I look like bootstrap, right?</p>
+              <p>You can style me however you want</p>
+              <p>Option 3</p>
+              <p>Option 4</p>
+            </dd.Content>
+          </BasicDropdown>
+        </div>
+      </div>
+      <div class="scroll__filler"></div>
+    </div>
+  </div>
+</template>
diff --git a/docs/app/components/snippets/scrollable-container-1.hbs b/docs/app/components/snippets/scrollable-container-1.hbs
deleted file mode 100644
index 74c93a4c..00000000
--- a/docs/app/components/snippets/scrollable-container-1.hbs
+++ /dev/null
@@ -1,21 +0,0 @@
-<div class="scroll__container">
-  <div class="scroll__scrolling-container">
-    <div class="scroll__filler"></div>
-    <div class="scroll__content-container">
-      <div class="scroll__content">
-        <BasicDropdown as |dd|>
-          <dd.Trigger class="trigger-bootstrap-feel">Click me
-            <span class="caret"></span></dd.Trigger>
-
-          <dd.Content class="content-bootstrap-feel">
-            <p>I look like bootstrap, right?</p>
-            <p>You can style me however you want</p>
-            <p>Option 3</p>
-            <p>Option 4</p>
-          </dd.Content>
-        </BasicDropdown>
-      </div>
-    </div>
-    <div class="scroll__filler"></div>
-  </div>
-</div>
\ No newline at end of file
diff --git a/docs/app/components/snippets/scrollable-container-1.js b/docs/app/components/snippets/scrollable-container-1.js
deleted file mode 100644
index 1af80ea0..00000000
--- a/docs/app/components/snippets/scrollable-container-1.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import Component from '@glimmer/component';
-
-// eslint-disable-next-line ember/no-empty-glimmer-component-classes
-export default class extends Component {}
diff --git a/docs/app/templates/snippets/test-helpers-1-js.js b/docs/app/components/snippets/test-helpers-1-js-snippet.js
similarity index 100%
rename from docs/app/templates/snippets/test-helpers-1-js.js
rename to docs/app/components/snippets/test-helpers-1-js-snippet.js
diff --git a/docs/app/templates/snippets/test-helpers-2-js.js b/docs/app/components/snippets/test-helpers-2-js-snippet.js
similarity index 100%
rename from docs/app/templates/snippets/test-helpers-2-js.js
rename to docs/app/components/snippets/test-helpers-2-js-snippet.js
diff --git a/docs/app/templates/snippets/test-helpers-3-js.js b/docs/app/components/snippets/test-helpers-3-js-snippet.js
similarity index 100%
rename from docs/app/templates/snippets/test-helpers-3-js.js
rename to docs/app/components/snippets/test-helpers-3-js-snippet.js
diff --git a/docs/app/components/snippets/trigger-events-0.gts b/docs/app/components/snippets/trigger-events-0.gts
new file mode 100644
index 00000000..9572afb1
--- /dev/null
+++ b/docs/app/components/snippets/trigger-events-0.gts
@@ -0,0 +1,26 @@
+import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown';
+
+<template>
+  <div style="display: flex;">
+    <div style="flex: 1;">
+      <BasicDropdown as |dd|>
+        <dd.Trigger class="trigger-bootstrap-feel" @eventType="mousedown">
+          Mousedown (default)
+        </dd.Trigger>
+
+        <dd.Content class="content-bootstrap-feel width-300">
+          I open as soon as you press the mouse button
+        </dd.Content>
+      </BasicDropdown>
+    </div>
+    <div style="flex: 1;">
+      <BasicDropdown as |dd|>
+        <dd.Trigger class="trigger-bootstrap-feel">Click</dd.Trigger>
+
+        <dd.Content class="content-bootstrap-feel width-300">
+          I only open when you release the mouse button
+        </dd.Content>
+      </BasicDropdown>
+    </div>
+  </div>
+</template>
diff --git a/docs/app/components/snippets/trigger-events-0.hbs b/docs/app/components/snippets/trigger-events-0.hbs
deleted file mode 100644
index 7429eb31..00000000
--- a/docs/app/components/snippets/trigger-events-0.hbs
+++ /dev/null
@@ -1,23 +0,0 @@
-<div style="display: flex;">
-  <div style="flex: 1;">
-    <BasicDropdown as |dd|>
-      <dd.Trigger
-        class="trigger-bootstrap-feel"
-        @eventType="mousedown"
-      >Mousedown (default)</dd.Trigger>
-
-      <dd.Content class="content-bootstrap-feel width-300">
-        I open as soon as you press the mouse button
-      </dd.Content>
-    </BasicDropdown>
-  </div>
-  <div style="flex: 1;">
-    <BasicDropdown as |dd|>
-      <dd.Trigger class="trigger-bootstrap-feel">Click</dd.Trigger>
-
-      <dd.Content class="content-bootstrap-feel width-300">
-        I only open when you release the mouse button
-      </dd.Content>
-    </BasicDropdown>
-  </div>
-</div>
\ No newline at end of file
diff --git a/docs/app/components/snippets/trigger-events-0.js b/docs/app/components/snippets/trigger-events-0.js
deleted file mode 100644
index 1af80ea0..00000000
--- a/docs/app/components/snippets/trigger-events-0.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import Component from '@glimmer/component';
-
-// eslint-disable-next-line ember/no-empty-glimmer-component-classes
-export default class extends Component {}
diff --git a/docs/app/components/snippets/trigger-events-1.gts b/docs/app/components/snippets/trigger-events-1.gts
new file mode 100644
index 00000000..cd822bc4
--- /dev/null
+++ b/docs/app/components/snippets/trigger-events-1.gts
@@ -0,0 +1,34 @@
+import { fn } from '@ember/helper';
+import { on } from '@ember/modifier';
+import Component from '@glimmer/component';
+import BasicDropdown, {
+  type BasicDropdownDefaultBlock,
+} from 'ember-basic-dropdown/components/basic-dropdown';
+
+export default class extends Component {
+  openOnArrowDown(dropdown: BasicDropdownDefaultBlock, e: KeyboardEvent) {
+    if (e.keyCode === 38) {
+      dropdown.actions.open(e);
+    }
+  }
+
+  <template>
+    <input
+      type="text"
+      placeholder="Focus me and hit TAB to focus the trigger"
+    />
+    <br />
+    <BasicDropdown as |dd|>
+      <dd.Trigger
+        class="trigger-bootstrap-feel"
+        {{on "keydown" (fn this.openOnArrowDown dd)}}
+      >
+        Click me
+      </dd.Trigger>
+
+      <dd.Content class="content-bootstrap-feel width-300">
+        Don't you love those little keys?
+      </dd.Content>
+    </BasicDropdown>
+  </template>
+}
diff --git a/docs/app/components/snippets/trigger-events-1.hbs b/docs/app/components/snippets/trigger-events-1.hbs
deleted file mode 100644
index 1bf44680..00000000
--- a/docs/app/components/snippets/trigger-events-1.hbs
+++ /dev/null
@@ -1,12 +0,0 @@
-<input type="text" placeholder="Focus me and hit TAB to focus the trigger" />
-<br />
-<BasicDropdown as |dd|>
-  <dd.Trigger
-    {{on "keydown" (fn this.openOnArrowDown dd)}}
-    class="trigger-bootstrap-feel"
-  >Click me</dd.Trigger>
-
-  <dd.Content class="content-bootstrap-feel width-300">
-    Don't you love those little keys?
-  </dd.Content>
-</BasicDropdown>
\ No newline at end of file
diff --git a/docs/app/components/snippets/trigger-events-1.js b/docs/app/components/snippets/trigger-events-1.js
deleted file mode 100644
index 8a47c5e2..00000000
--- a/docs/app/components/snippets/trigger-events-1.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import Component from '@glimmer/component';
-
-export default class extends Component {
-  openOnArrowDown(dropdown, e) {
-    if (e.keyCode === 38) {
-      dropdown.actions.open(e);
-    }
-  }
-}
diff --git a/docs/app/components/snippets/trigger-events-2.gts b/docs/app/components/snippets/trigger-events-2.gts
new file mode 100644
index 00000000..c06aa020
--- /dev/null
+++ b/docs/app/components/snippets/trigger-events-2.gts
@@ -0,0 +1,30 @@
+import { on } from '@ember/modifier';
+import Component from '@glimmer/component';
+import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown';
+
+export default class extends Component {
+  useTheKeyboard(e: Event) {
+    alert('Use the keyboard!');
+    return e.stopImmediatePropagation();
+  }
+
+  <template>
+    <input
+      type="text"
+      placeholder="Focus me and hit TAB to focus the trigger"
+    />
+    <br />
+    <BasicDropdown as |dd|>
+      <dd.Trigger
+        class="trigger-bootstrap-feel"
+        {{on "click" this.useTheKeyboard}}
+      >
+        Do not click me
+      </dd.Trigger>
+
+      <dd.Content class="content-bootstrap-feel width-300">
+        hello world
+      </dd.Content>
+    </BasicDropdown>
+  </template>
+}
diff --git a/docs/app/components/snippets/trigger-events-2.hbs b/docs/app/components/snippets/trigger-events-2.hbs
deleted file mode 100644
index 99baf479..00000000
--- a/docs/app/components/snippets/trigger-events-2.hbs
+++ /dev/null
@@ -1,12 +0,0 @@
-<input type="text" placeholder="Focus me and hit TAB to focus the trigger" />
-<br />
-<BasicDropdown as |dd|>
-  <dd.Trigger
-    class="trigger-bootstrap-feel"
-    {{on "click" this.useTheKeyboard}}
-  >Do not click me</dd.Trigger>
-
-  <dd.Content class="content-bootstrap-feel width-300">
-    hello world
-  </dd.Content>
-</BasicDropdown>
\ No newline at end of file
diff --git a/docs/app/components/snippets/trigger-events-2.js b/docs/app/components/snippets/trigger-events-2.js
deleted file mode 100644
index dd37112d..00000000
--- a/docs/app/components/snippets/trigger-events-2.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import Component from '@glimmer/component';
-
-export default class extends Component {
-  useTheKeyboard(e) {
-    alert('Use the keyboard!');
-    return e.stopImmediatePropagation();
-  }
-}
diff --git a/docs/app/components/snippets/trigger-events-3.gts b/docs/app/components/snippets/trigger-events-3.gts
new file mode 100644
index 00000000..3f6ee88c
--- /dev/null
+++ b/docs/app/components/snippets/trigger-events-3.gts
@@ -0,0 +1,54 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { htmlSafe, type TrustedHTML } from '@ember/template';
+import { not } from 'ember-truth-helpers';
+import { on } from '@ember/modifier';
+import { fn } from '@ember/helper';
+import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown';
+
+export default class extends Component {
+  dropdownDisabled = true;
+  checkboxClass = null;
+  checkboxLabelStyle: TrustedHTML | string = '';
+
+  // Actions
+  @action
+  highlightCheckboxIfDisabled() {
+    if (this.dropdownDisabled) {
+      this.checkboxLabelStyle = htmlSafe('color: red');
+    }
+  }
+
+  @action
+  resetHighlight() {
+    this.checkboxLabelStyle = '';
+  }
+
+  <template>
+    <input
+      type="checkbox"
+      id="enable-dd-chk"
+      checked={{not this.dropdownDisabled}}
+      {{on
+        "change"
+        (fn (mut this.dropdownDisabled) (not this.dropdownDisabled))
+      }}
+    />
+    <label for="enable-dd-chk" style={{this.checkboxLabelStyle}}>Enable dropdown</label>
+    <br />
+
+    <BasicDropdown @disabled={{this.dropdownDisabled}} as |dd|>
+      <dd.Trigger
+        {{on "mouseenter" this.highlightCheckboxIfDisabled}}
+        {{on "mouseleave" this.resetHighlight}}
+        class="trigger-bootstrap-feel"
+      >
+        Can you open me?
+      </dd.Trigger>
+
+      <dd.Content class="content-bootstrap-feel width-300">
+        You solved the puzzle!
+      </dd.Content>
+    </BasicDropdown>
+  </template>
+}
diff --git a/docs/app/components/snippets/trigger-events-3.hbs b/docs/app/components/snippets/trigger-events-3.hbs
deleted file mode 100644
index 6c748e0a..00000000
--- a/docs/app/components/snippets/trigger-events-3.hbs
+++ /dev/null
@@ -1,22 +0,0 @@
-<input
-  type="checkbox"
-  id="enable-dd-chk"
-  checked={{not this.dropdownDisabled}}
-  {{on "change" (fn (mut this.dropdownDisabled) (not this.dropdownDisabled))}}
-/>
-<label for="enable-dd-chk" style={{this.checkboxLabelStyle}}>Enable dropdown</label>
-<br />
-
-<BasicDropdown @disabled={{this.dropdownDisabled}} as |dd|>
-  <dd.Trigger
-    {{on "mouseenter" this.highlightCheckboxIfDisabled}}
-    {{on "mouseleave" this.resetHighlight}}
-    class="trigger-bootstrap-feel"
-  >
-    Can you open me?
-  </dd.Trigger>
-
-  <dd.Content class="content-bootstrap-feel width-300">
-    You solved the puzzle!
-  </dd.Content>
-</BasicDropdown>
\ No newline at end of file
diff --git a/docs/app/components/snippets/trigger-events-3.js b/docs/app/components/snippets/trigger-events-3.js
deleted file mode 100644
index 9220ecd6..00000000
--- a/docs/app/components/snippets/trigger-events-3.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import Component from '@glimmer/component';
-import { action } from '@ember/object';
-import { htmlSafe } from '@ember/template';
-
-export default class extends Component {
-  dropdownDisabled = true;
-  checkboxClass = null;
-  checkboxLabelStyle = null;
-
-  // Actions
-  @action
-  highlightCheckboxIfDisabled() {
-    if (this.dropdownDisabled) {
-      this.checkboxLabelStyle = htmlSafe('color: red');
-    }
-  }
-
-  @action
-  resetHighlight() {
-    this.checkboxLabelStyle = null;
-  }
-}
diff --git a/docs/app/components/snippets/trigger-events-4.gts b/docs/app/components/snippets/trigger-events-4.gts
new file mode 100644
index 00000000..d6ee2e87
--- /dev/null
+++ b/docs/app/components/snippets/trigger-events-4.gts
@@ -0,0 +1,46 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { on } from '@ember/modifier';
+import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown';
+import { tracked } from '@glimmer/tracking';
+
+export default class extends Component {
+  @tracked parentDivClass: string | null = null;
+
+  @action
+  simulateFocusParent() {
+    this.parentDivClass = 'input-group--focused';
+  }
+
+  @action
+  simulateBlurParent() {
+    this.parentDivClass = null;
+  }
+
+  <template>
+    <p>Focus alternatively the input and the button next to it</p>
+    <div class="trigger-event-demo input-group {{this.parentDivClass}}">
+      <input
+        type="text"
+        class="form-control"
+        {{on "focus" this.simulateFocusParent}}
+        {{on "blur" this.simulateBlurParent}}
+      />
+
+      <BasicDropdown as |dd|>
+        <dd.Trigger
+          class="input-group-addon"
+          {{on "focus" this.simulateFocusParent}}
+          {{on "blur" this.simulateBlurParent}}
+        >
+          <span class="caret"></span>
+        </dd.Trigger>
+
+        <dd.Content class="content-bootstrap-feel width-300">
+          <p>Option1</p>
+          <p>Option2</p>
+        </dd.Content>
+      </BasicDropdown>
+    </div>
+  </template>
+}
diff --git a/docs/app/components/snippets/trigger-events-4.hbs b/docs/app/components/snippets/trigger-events-4.hbs
deleted file mode 100644
index 903f37d8..00000000
--- a/docs/app/components/snippets/trigger-events-4.hbs
+++ /dev/null
@@ -1,24 +0,0 @@
-<p>Focus alternatively the input and the button next to it</p>
-<div class="trigger-event-demo input-group {{this.parentDivClass}}">
-  <input
-    type="text"
-    class="form-control"
-    {{on "focus" this.simulateFocusParent}}
-    {{on "blur" this.simulateBlurParent}}
-  />
-
-  <BasicDropdown as |dd|>
-    <dd.Trigger
-      {{on "focus" this.simulateFocusParent}}
-      {{on "blur" this.simulateBlurParent}}
-      class="input-group-addon"
-    >
-      <span class="caret"></span>
-    </dd.Trigger>
-
-    <dd.Content class="content-bootstrap-feel width-300">
-      <p>Option1</p>
-      <p>Option2</p>
-    </dd.Content>
-  </BasicDropdown>
-</div>
\ No newline at end of file
diff --git a/docs/app/components/snippets/trigger-events-4.js b/docs/app/components/snippets/trigger-events-4.js
deleted file mode 100644
index 82d37fa8..00000000
--- a/docs/app/components/snippets/trigger-events-4.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import Component from '@glimmer/component';
-import { action } from '@ember/object';
-
-export default class extends Component {
-  parentDivClass = null;
-  @action
-  simulateFocusParent() {
-    this.parentDivClass = 'input-group--focused';
-  }
-
-  @action
-  simulateBlurParent() {
-    this.parentDivClass = null;
-  }
-}
diff --git a/docs/app/controllers/application.js b/docs/app/controllers/application.js
deleted file mode 100644
index 3592f706..00000000
--- a/docs/app/controllers/application.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import Controller from '@ember/controller';
-
-export default class extends Controller {}
diff --git a/docs/app/controllers/public-pages.js b/docs/app/controllers/public-pages.js
deleted file mode 100644
index 8fabd994..00000000
--- a/docs/app/controllers/public-pages.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import { inject as service } from '@ember/service';
-import { action } from '@ember/object';
-import { htmlSafe } from '@ember/template';
-import Controller from '@ember/controller';
-import calculatePosition from 'ember-basic-dropdown/utils/calculate-position';
-
-const colors = ['orange', 'blue', 'purple', 'line', 'pink', 'red', 'brown'];
-const brands = colors.map((c) => `${c}-brand`);
-export default class extends Controller {
-  @service router;
-  colors = colors;
-  backgrounds = this.colors.map((c) => htmlSafe(`background-color: ${c}`));
-  color = undefined;
-
-  // Actions
-  @action
-  preventIfNotInIndex(e) {
-    if (this.router.currentPath !== 'public-pages.index') {
-      e.stopImmediatePropagation();
-    }
-  }
-
-  setBrandColor(color, dropdown) {
-    brands.forEach((klass) => document.body.classList.remove(klass));
-    document.body.classList.add(`${color}-brand`);
-    dropdown.actions.close();
-  }
-
-  // Methods
-  calculatePosition() {
-    let pos = calculatePosition(...arguments);
-    pos.style.top += 3;
-    return pos;
-  }
-}
diff --git a/docs/app/controllers/public-pages/cookbook/no-trigger.js b/docs/app/controllers/public-pages/cookbook/no-trigger.js
deleted file mode 100644
index e4486d15..00000000
--- a/docs/app/controllers/public-pages/cookbook/no-trigger.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import Controller from '@ember/controller';
-import NoTrigger1Component from '../../../components/snippets/no-trigger-1';
-import NoTrigger2Component from '../../../components/snippets/no-trigger-2';
-
-export default class extends Controller {
-  noTrigger1Component = NoTrigger1Component;
-  noTrigger2Component = NoTrigger2Component;
-}
diff --git a/docs/app/controllers/public-pages/docs.js b/docs/app/controllers/public-pages/docs.js
deleted file mode 100644
index 70c9d4ab..00000000
--- a/docs/app/controllers/public-pages/docs.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import { inject as service } from '@ember/service';
-import { action } from '@ember/object';
-import Controller from '@ember/controller';
-
-const groupedSections = [
-  {
-    id: 'getting-started',
-    groupName: 'Getting started',
-    options: [
-      { route: 'public-pages.docs.index', text: 'Overview' },
-      { route: 'public-pages.docs.installation', text: 'Installation' },
-      { route: 'public-pages.docs.how-to-use-it', text: 'How to use it' },
-      { route: 'public-pages.docs.dropdown-events', text: 'Dropdown events' },
-      { route: 'public-pages.docs.trigger-events', text: 'Trigger events' },
-      { route: 'public-pages.docs.content-events', text: 'Content events' },
-    ],
-  },
-  {
-    id: 'basic-customization',
-    groupName: 'Basic customization',
-    options: [
-      { route: 'public-pages.docs.position', text: 'Position' },
-      { route: 'public-pages.docs.disabled', text: 'Disabled' },
-      { route: 'public-pages.docs.overlays', text: 'Overlays' },
-      { route: 'public-pages.docs.styles', text: 'Styles' },
-    ],
-  },
-  {
-    id: 'advanced-customization',
-    groupName: 'Advanced customization',
-    options: [
-      { route: 'public-pages.docs.custom-position', text: 'Custom position' },
-      { route: 'public-pages.docs.animations', text: 'Animations' },
-    ],
-  },
-  {
-    id: 'upgrade',
-    groupName: 'Advanced customization',
-    options: [
-      {
-        route: 'public-pages.docs.migrate-7-0-to-8-0',
-        text: 'Migrate from 7.0 to 8.0',
-      },
-    ],
-  },
-  {
-    id: 'other',
-    groupName: 'Other',
-    options: [
-      { route: 'public-pages.docs.test-helpers', text: 'Test helpers' },
-      { route: 'public-pages.docs.api-reference', text: 'API reference' },
-    ],
-  },
-];
-
-export default class extends Controller {
-  @service router;
-  groupedSections = groupedSections;
-
-  get currentSection() {
-    let currentRouteName = this.router.currentRouteName;
-    for (let i = 0; i < groupedSections.length; i++) {
-      let group = groupedSections[i];
-      for (let j = 0; j < group.options.length; j++) {
-        let section = group.options[j];
-        if (section.route === currentRouteName) {
-          return section;
-        }
-      }
-    }
-    return undefined;
-  }
-
-  @action
-  visit(e) {
-    this.router.transitionTo(e.target.value);
-  }
-}
diff --git a/docs/app/controllers/public-pages/docs/animations.js b/docs/app/controllers/public-pages/docs/animations.js
deleted file mode 100644
index a4cebb81..00000000
--- a/docs/app/controllers/public-pages/docs/animations.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import Controller from '@ember/controller';
-import Animations1Component from '../../../components/snippets/animations-1';
-
-export default class extends Controller {
-  animations1Component = Animations1Component;
-}
diff --git a/docs/app/controllers/public-pages/docs/content-events.js b/docs/app/controllers/public-pages/docs/content-events.js
deleted file mode 100644
index ca0f1e9f..00000000
--- a/docs/app/controllers/public-pages/docs/content-events.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import Controller from '@ember/controller';
-import ContentEvents1Component from '../../../components/snippets/content-events-1';
-
-export default class extends Controller {
-  contentEvents1Component = ContentEvents1Component;
-}
diff --git a/docs/app/controllers/public-pages/docs/custom-position.js b/docs/app/controllers/public-pages/docs/custom-position.js
deleted file mode 100644
index bec2196d..00000000
--- a/docs/app/controllers/public-pages/docs/custom-position.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import Controller from '@ember/controller';
-import { tracked } from '@glimmer/tracking';
-import { task, timeout } from 'ember-concurrency';
-import CustomPosition1Component from '../../../components/snippets/custom-position-1';
-import CustomPosition2Component from '../../../components/snippets/custom-position-2';
-
-const NAMES = ['Katie', 'Ricardo', 'Igor', 'Alex', 'Martin', 'Godfrey'];
-
-export default class extends Controller {
-  customPosition1Component = CustomPosition1Component;
-  customPosition2Component = CustomPosition2Component;
-
-  @tracked names = [];
-
-  calculatePosition(trigger, content) {
-    let { top, left, width, height } = trigger.getBoundingClientRect();
-    let { height: contentHeight } = content.getBoundingClientRect();
-    let style = {
-      left: left + width,
-      top: top + window.pageYOffset + height / 2 - contentHeight / 2,
-    };
-
-    return { style };
-  }
-
-  addNames = task(async () => {
-    this.names = [];
-    for (let name of NAMES) {
-      this.names = [...this.names, name];
-      await timeout(750);
-    }
-  });
-}
diff --git a/docs/app/controllers/public-pages/docs/disabled.js b/docs/app/controllers/public-pages/docs/disabled.js
deleted file mode 100644
index 0e44b3ca..00000000
--- a/docs/app/controllers/public-pages/docs/disabled.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import Controller from '@ember/controller';
-import Disabled1Component from '../../../components/snippets/disabled-1';
-
-export default class extends Controller {
-  disabled1Component = Disabled1Component;
-}
diff --git a/docs/app/controllers/public-pages/docs/dropdown-events.js b/docs/app/controllers/public-pages/docs/dropdown-events.js
deleted file mode 100644
index 6e594fd8..00000000
--- a/docs/app/controllers/public-pages/docs/dropdown-events.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import Controller from '@ember/controller';
-import { action } from '@ember/object';
-import { task, timeout } from 'ember-concurrency';
-import DropDownEvents1Component from '../../../components/snippets/dropdown-events-1';
-import DropDownEvents2Component from '../../../components/snippets/dropdown-events-2';
-import DropDownEvents3Component from '../../../components/snippets/dropdown-events-3';
-
-const users = [
-  { name: 'Nathan', assignment: 'CLI' },
-  { name: 'Rober', assignment: 'Whatnot' },
-  { name: 'Leah', assignment: 'Community' },
-];
-
-export default class extends Controller {
-  users = users;
-  dropDownEvents1Component = DropDownEvents1Component;
-  dropDownEvents2Component = DropDownEvents2Component;
-  dropDownEvents3Component = DropDownEvents3Component;
-
-  // Actions
-  @action
-  waitForUsers(dropdown, e) {
-    if (e) {
-      this.loadUsersAndOpen.perform(dropdown, e);
-      return false;
-    }
-  }
-
-  @action
-  preventUntilSelected() {
-    if (!this.selected) {
-      alert('You have to choose!');
-      return false;
-    }
-  }
-
-  // Tasks
-  loadUsers = task(async () => {
-    await timeout(1000);
-    return users;
-  });
-
-  loadUsersAndOpen = task(async (dropdown) => {
-    await timeout(1000);
-    dropdown.actions.open();
-    return users;
-  });
-}
diff --git a/docs/app/controllers/public-pages/docs/how-to-use-it.js b/docs/app/controllers/public-pages/docs/how-to-use-it.js
deleted file mode 100644
index 6438abf0..00000000
--- a/docs/app/controllers/public-pages/docs/how-to-use-it.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import Controller from '@ember/controller';
-import HowToUseIt1Component from '../../../components/snippets/how-to-use-it-1';
-import HowToUseIt2Component from '../../../components/snippets/how-to-use-it-2';
-import HowToUseIt3Component from '../../../components/snippets/how-to-use-it-3';
-
-export default class extends Controller {
-  howToUseIt1Component = HowToUseIt1Component;
-  howToUseIt2Component = HowToUseIt2Component;
-  howToUseIt3Component = HowToUseIt3Component;
-}
diff --git a/docs/app/controllers/public-pages/docs/overlays.js b/docs/app/controllers/public-pages/docs/overlays.js
deleted file mode 100644
index 11a4c0c7..00000000
--- a/docs/app/controllers/public-pages/docs/overlays.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import Controller from '@ember/controller';
-import Overlays1Component from '../../../components/snippets/overlays-1';
-
-export default class extends Controller {
-  overlays1Component = Overlays1Component;
-}
diff --git a/docs/app/controllers/public-pages/docs/position.js b/docs/app/controllers/public-pages/docs/position.js
deleted file mode 100644
index d21b941a..00000000
--- a/docs/app/controllers/public-pages/docs/position.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import Controller from '@ember/controller';
-import Position1Component from '../../../components/snippets/position-1';
-import Position2Component from '../../../components/snippets/position-2';
-import Position3Component from '../../../components/snippets/position-3';
-
-export default class extends Controller {
-  position1Component = Position1Component;
-  position2Component = Position2Component;
-  position3Component = Position3Component;
-
-  horizontalPosition = 'auto';
-  verticalPosition = 'auto';
-  buttonPosition = 'left';
-  renderInPlace = false;
-}
diff --git a/docs/app/controllers/public-pages/docs/trigger-events.js b/docs/app/controllers/public-pages/docs/trigger-events.js
deleted file mode 100644
index 398599ad..00000000
--- a/docs/app/controllers/public-pages/docs/trigger-events.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import Controller from '@ember/controller';
-import { action, set } from '@ember/object';
-import { htmlSafe } from '@ember/template';
-import TriggerEvents0Component from '../../../components/snippets/trigger-events-0';
-import TriggerEvents1Component from '../../../components/snippets/trigger-events-1';
-import TriggerEvents2Component from '../../../components/snippets/trigger-events-2';
-import TriggerEvents3Component from '../../../components/snippets/trigger-events-3';
-import TriggerEvents4Component from '../../../components/snippets/trigger-events-4';
-
-export default class extends Controller {
-  triggerEvents0Component = TriggerEvents0Component;
-  triggerEvents1Component = TriggerEvents1Component;
-  triggerEvents2Component = TriggerEvents2Component;
-  triggerEvents3Component = TriggerEvents3Component;
-  triggerEvents4Component = TriggerEvents4Component;
-
-  dropdownDisabled = true;
-  checkboxClass = null;
-
-  // Actions
-  useTheKeyboard(e) {
-    alert('Use the keyboard!');
-    return e.stopImmediatePropagation();
-  }
-
-  openOnArrowDown(dropdown, e) {
-    if (e.keyCode === 40) {
-      dropdown.actions.open(e);
-      e.preventDefault(); // To prevent page scroll
-    }
-  }
-
-  @action
-  highlightCheckboxIfDisabled() {
-    if (this.dropdownDisabled) {
-      set(this, 'checkboxLabelStyle', htmlSafe('color: red'));
-    }
-  }
-
-  @action
-  resetHighlight() {
-    set(this, 'checkboxLabelStyle', null);
-  }
-
-  @action
-  simulateFocusParent() {
-    set(this, 'parentDivClass', 'input-group--focused');
-  }
-
-  @action
-  simulateBlurParent() {
-    set(this, 'parentDivClass', null);
-  }
-}
diff --git a/docs/app/controllers/scrolling-container.js b/docs/app/controllers/scrolling-container.js
deleted file mode 100644
index 1c4abffa..00000000
--- a/docs/app/controllers/scrolling-container.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import Controller from '@ember/controller';
-import ScrollableContainer1Component from '../components/snippets/scrollable-container-1';
-
-export default class extends Controller {
-  scrollableContainer1Component = ScrollableContainer1Component;
-}
diff --git a/docs/app/router.ts b/docs/app/router.ts
index 642ae123..6f46f079 100644
--- a/docs/app/router.ts
+++ b/docs/app/router.ts
@@ -38,10 +38,6 @@ Router.map(function () {
     this.route('cookbook', function () {
       this.route('no-trigger');
     });
-
-    this.route('addons', function () {});
-
-    this.route('support-the-project');
   });
 
   this.route('scrolling-container');
diff --git a/docs/app/styles/app.scss b/docs/app/styles/app.scss
index cbebcb46..c1cb22e7 100644
--- a/docs/app/styles/app.scss
+++ b/docs/app/styles/app.scss
@@ -15,6 +15,7 @@
 @import "components/docs";
 @import "components/cookbook";
 @import "components/spinners";
+@import "components/code-block";
 
 // Looks and feels for examples
 @import "look-and-feels/animations";
diff --git a/docs/app/styles/components/code-block.scss b/docs/app/styles/components/code-block.scss
new file mode 100644
index 00000000..1f3e059f
--- /dev/null
+++ b/docs/app/styles/components/code-block.scss
@@ -0,0 +1,10 @@
+// Cookbook
+.code-block {
+  background: #f5f2f0;
+  padding: 1rem;
+
+  pre {
+    background: transparent !important;
+    margin-bottom: 0;
+  }
+}
diff --git a/docs/app/styles/components/main-header.scss b/docs/app/styles/components/main-header.scss
index 5939fe08..59977122 100644
--- a/docs/app/styles/components/main-header.scss
+++ b/docs/app/styles/components/main-header.scss
@@ -12,7 +12,7 @@
   display: block;
   text-align: center;
   line-height: 30px;
-  padding-top: 15px;
+  padding-top: 8px;
   .home-link {
     vertical-align: text-bottom;
     color: white;
diff --git a/docs/app/templates/application.gts b/docs/app/templates/application.gts
new file mode 100644
index 00000000..3aa398e9
--- /dev/null
+++ b/docs/app/templates/application.gts
@@ -0,0 +1,7 @@
+import BasicDropdownWormhole from 'ember-basic-dropdown/components/basic-dropdown-wormhole';
+
+<template>
+  {{outlet}}
+
+  <BasicDropdownWormhole />
+</template>
diff --git a/docs/app/templates/application.hbs b/docs/app/templates/application.hbs
deleted file mode 100644
index b2e33d99..00000000
--- a/docs/app/templates/application.hbs
+++ /dev/null
@@ -1,3 +0,0 @@
-{{outlet}}
-
-<BasicDropdownWormhole />
\ No newline at end of file
diff --git a/docs/app/templates/helpers-testing.gts b/docs/app/templates/helpers-testing.gts
new file mode 100644
index 00000000..165665d5
--- /dev/null
+++ b/docs/app/templates/helpers-testing.gts
@@ -0,0 +1,27 @@
+import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown';
+
+<template>
+  <h1>Helpers testing</h1>
+
+  <div class="dropdown-0-wrapper">
+    <BasicDropdown as |dd|>
+      <dd.Trigger class="dropdown-0">
+        Click me
+      </dd.Trigger>
+      <dd.Content>
+        Hello world 0!
+      </dd.Content>
+    </BasicDropdown>
+  </div>
+
+  <div class="dropdown-1-wrapper">
+    <BasicDropdown as |dd|>
+      <dd.Trigger class="dropdown-1">
+        Click me
+      </dd.Trigger>
+      <dd.Content>
+        Hello world 1!
+      </dd.Content>
+    </BasicDropdown>
+  </div>
+</template>
diff --git a/docs/app/templates/helpers-testing.hbs b/docs/app/templates/helpers-testing.hbs
deleted file mode 100644
index 758d8ced..00000000
--- a/docs/app/templates/helpers-testing.hbs
+++ /dev/null
@@ -1,23 +0,0 @@
-<h1>Helpers testing</h1>
-
-<div class="dropdown-0-wrapper">
-  <BasicDropdown as |dd|>
-    <dd.Trigger class="dropdown-0">
-      Click me
-    </dd.Trigger>
-    <dd.Content>
-      Hello world 0!
-    </dd.Content>
-  </BasicDropdown>
-</div>
-
-<div class="dropdown-1-wrapper">
-  <BasicDropdown as |dd|>
-    <dd.Trigger class="dropdown-1">
-      Click me
-    </dd.Trigger>
-    <dd.Content>
-      Hello world 1!
-    </dd.Content>
-  </BasicDropdown>
-</div>
\ No newline at end of file
diff --git a/docs/app/templates/public-pages.gts b/docs/app/templates/public-pages.gts
new file mode 100644
index 00000000..fb133018
--- /dev/null
+++ b/docs/app/templates/public-pages.gts
@@ -0,0 +1,114 @@
+import Component from '@glimmer/component';
+import { service } from '@ember/service';
+import { action } from '@ember/object';
+import { htmlSafe } from '@ember/template';
+import calculatePosition, {
+  type CalculatePositionOptions,
+  type CalculatePositionResult,
+} from 'ember-basic-dropdown/utils/calculate-position';
+import { LinkTo } from '@ember/routing';
+import BasicDropdown, {
+  type BasicDropdownDefaultBlock,
+} from 'ember-basic-dropdown/components/basic-dropdown';
+import { on } from '@ember/modifier';
+import { fn } from '@ember/helper';
+import type RouterService from '@ember/routing/router-service';
+
+const colors = ['orange', 'blue', 'purple', 'line', 'pink', 'red', 'brown'];
+const brands = colors.map((c) => `${c}-brand`);
+
+export default class extends Component {
+  @service declare router: RouterService;
+
+  colors = colors;
+  backgrounds = this.colors.map((c) => htmlSafe(`background-color: ${c}`));
+  color = undefined;
+
+  // Actions
+  @action
+  preventIfNotInIndex(e: Event) {
+    if (this.router.currentRouteName !== 'public-pages.index') {
+      e.stopImmediatePropagation();
+    }
+  }
+
+  setBrandColor(color: string, dropdown: BasicDropdownDefaultBlock) {
+    brands.forEach((klass) => document.body.classList.remove(klass));
+    document.body.classList.add(`${color}-brand`);
+    dropdown.actions.close();
+  }
+
+  // Methods
+  calculatePosition(
+    trigger: Element,
+    content: HTMLElement,
+    destination: HTMLElement,
+    options: CalculatePositionOptions,
+  ): CalculatePositionResult {
+    const pos = calculatePosition(trigger, content, destination, options);
+
+    if (pos.style.top) {
+      pos.style.top += 3;
+    } else {
+      pos.style.top = 3;
+    }
+
+    return pos;
+  }
+
+  <template>
+    <header class="main-header">
+      <nav class="main-header-nav">
+        <div class="main-header-nav-links">
+          <LinkTo
+            @route="public-pages.docs"
+            class="main-header-nav-link"
+          >Docs</LinkTo>
+          <LinkTo
+            @route="public-pages.cookbook"
+            class="main-header-nav-link"
+          >Cookbook</LinkTo>
+          <a
+            href="https://github.com/cibernox/ember-basic-dropdown"
+            class="main-header-nav-link"
+          >Github</a>
+        </div>
+        <div class="main-header-logo">
+          <BasicDropdown @calculatePosition={{this.calculatePosition}} as |dd|>
+            <LinkTo @route="public-pages.index" class="home-link">
+              <img src="/ember_logo.png" alt="ember" />
+              <strong>Basic</strong>
+              {{! template-lint-disable no-pointer-down-event-binding }}
+              <dd.Trigger
+                @htmlTag="span"
+                {{on "mousedown" this.preventIfNotInIndex}}
+                {{on "touchend" this.preventIfNotInIndex}}
+                class="logo-dropdown-button"
+              >
+                Dropdown
+              </dd.Trigger>
+            </LinkTo>
+            <dd.Content class="logo-dropdown-content">
+              {{#each this.colors as |color|}}
+                <button
+                  type="button"
+                  class="logo-dropdown-content-pantone-entry {{color}}"
+                  {{on "click" (fn this.setBrandColor color dd)}}
+                ></button>
+              {{/each}}
+            </dd.Content>
+          </BasicDropdown>
+        </div>
+      </nav>
+    </header>
+    <div class="main-content">
+      {{outlet}}
+    </div>
+    <footer class="main-footer">
+      <div class="main-footer-content">
+        Deployed with love by
+        <a href="http://github.com/cibernox">Miguel Camba</a>
+      </div>
+    </footer>
+  </template>
+}
diff --git a/docs/app/templates/public-pages.hbs b/docs/app/templates/public-pages.hbs
deleted file mode 100644
index bb6ea184..00000000
--- a/docs/app/templates/public-pages.hbs
+++ /dev/null
@@ -1,63 +0,0 @@
-<header class="main-header">
-  <nav class="main-header-nav">
-    <div class="main-header-nav-links">
-      <LinkTo
-        @route="public-pages.docs"
-        class="main-header-nav-link"
-      >Docs</LinkTo>
-      <LinkTo
-        @route="public-pages.cookbook"
-        class="main-header-nav-link"
-      >Cookbook</LinkTo>
-      <LinkTo
-        @route="public-pages.addons"
-        class="main-header-nav-link"
-      >Addons</LinkTo>
-      <a
-        href="https://github.com/cibernox/ember-basic-dropdown"
-        class="main-header-nav-link"
-      >Github</a>
-    </div>
-    <div class="main-header-logo">
-      <BasicDropdown @calculatePosition={{this.calculatePosition}} as |dd|>
-        <LinkTo @route="public-pages.index" class="home-link">
-          <img src="/ember_logo.png" alt="ember" />
-          <strong>Basic</strong>
-          {{! template-lint-disable no-pointer-down-event-binding }}
-          <dd.Trigger
-            @htmlTag="span"
-            {{on "mousedown" this.preventIfNotInIndex}}
-            {{on "touchend" this.preventIfNotInIndex}}
-            class="logo-dropdown-button"
-          >
-            Dropdown
-          </dd.Trigger>
-        </LinkTo>
-        <dd.Content class="logo-dropdown-content">
-          {{#each this.colors as |color|}}
-            <button
-              type="button"
-              class="logo-dropdown-content-pantone-entry {{color}}"
-              {{on "click" (fn this.setBrandColor color dd)}}
-            ></button>
-          {{/each}}
-        </dd.Content>
-      </BasicDropdown>
-    </div>
-  </nav>
-</header>
-<div class="main-content">
-  {{outlet}}
-</div>
-<footer class="main-footer">
-  <div class="main-footer-content">
-    Deployed with love by
-    <a href="http://github.com/cibernox">Miguel Camba</a>
-    <div class="contribute-call-to-action">
-      Enjoy the addon?
-      <LinkTo @route="public-pages.support-the-project">Support it!</LinkTo>
-    </div>
-  </div>
-</footer>
-
-{{!-- {{remember-document-scroll key=applicationController.currentRouteName}} --}}
\ No newline at end of file
diff --git a/docs/app/templates/public-pages/addons.hbs b/docs/app/templates/public-pages/addons.hbs
deleted file mode 100644
index cc2edaa5..00000000
--- a/docs/app/templates/public-pages/addons.hbs
+++ /dev/null
@@ -1,5 +0,0 @@
-<section class="docs">
-  <section class="doc-page">
-    {{outlet}}
-  </section>
-</section>
\ No newline at end of file
diff --git a/docs/app/templates/public-pages/addons/index.hbs b/docs/app/templates/public-pages/addons/index.hbs
deleted file mode 100644
index b22437c9..00000000
--- a/docs/app/templates/public-pages/addons/index.hbs
+++ /dev/null
@@ -1,19 +0,0 @@
-<h1 class="doc-page-title">Addons</h1>
-
-<p>
-  This component is pretty low lever and is intended to be a building block to
-  build your own components on top.
-</p>
-
-<p>
-  If you build something reusable that you think it's worth sharing you can
-  publish it as an addon so other can use it.
-</p>
-
-<p>If so, let me know and I'll add it to this section. You can use the one below
-  as inspiration.</p>
-
-<ul>
-  <li><a href="https://github.com/cibernox/ember-basic-dropdown-hover">Ember
-      Basic Dropdown Hover</a></li>
-</ul>
\ No newline at end of file
diff --git a/docs/app/templates/public-pages/cookbook.gts b/docs/app/templates/public-pages/cookbook.gts
new file mode 100644
index 00000000..323168e6
--- /dev/null
+++ b/docs/app/templates/public-pages/cookbook.gts
@@ -0,0 +1,14 @@
+import { LinkTo } from '@ember/routing';
+
+<template>
+  <section class="docs">
+    <nav class="side-nav">
+      <header class="side-nav-header">Basic recipes</header>
+      <LinkTo @route="public-pages.cookbook.index" class="side-nav-link">Usage
+        without trigger</LinkTo>
+    </nav>
+    <section class="doc-page">
+      {{outlet}}
+    </section>
+  </section>
+</template>
diff --git a/docs/app/templates/public-pages/cookbook.hbs b/docs/app/templates/public-pages/cookbook.hbs
deleted file mode 100644
index 6df5b198..00000000
--- a/docs/app/templates/public-pages/cookbook.hbs
+++ /dev/null
@@ -1,16 +0,0 @@
-<section class="docs">
-  <nav class="side-nav">
-    <header class="side-nav-header">Basic recipes</header>
-    <LinkTo
-      @route="public-pages.cookbook.index"
-      class="side-nav-link"
-    >System-wide config</LinkTo>
-    <LinkTo
-      @route="public-pages.cookbook.no-trigger"
-      class="side-nav-link"
-    >Usage without trigger</LinkTo>
-  </nav>
-  <section class="doc-page">
-    {{outlet}}
-  </section>
-</section>
\ No newline at end of file
diff --git a/docs/app/templates/public-pages/cookbook/index.gts b/docs/app/templates/public-pages/cookbook/index.gts
new file mode 100644
index 00000000..11744840
--- /dev/null
+++ b/docs/app/templates/public-pages/cookbook/index.gts
@@ -0,0 +1,78 @@
+import CodeExample from '../../../components/code-example';
+import NoTrigger1Component from '../../../components/snippets/no-trigger-1';
+import NoTrigger2Component from '../../../components/snippets/no-trigger-2';
+
+<template>
+  <h1 class="doc-page-title">Usage without trigger</h1>
+
+  <p>
+    Use the component without a trigger? Is that possible?
+  </p>
+
+  <p>
+    Yes, it is. You don't need to invoke the
+    <code>&#60;dropdown.trigger></code>
+    component to make the dropdown work. The yielded
+    <code>dropdown</code>
+    has actions you can invoke from any other item. Yes, it is. You don't need
+    to invoke the
+    <code>&#60;dropdown.trigger></code>
+    component to make the dropdown work. The yielded
+    <code>dropdown</code>
+    has actions you can invoke from any other item.
+  </p>
+
+  <p>
+    Sometimes you just cannot achieve what you want with this approach, so you
+    need to step down and wire things yourself.
+  </p>
+
+  <p>
+    If you invoke the
+    <code>open</code>
+    or
+    <code>toggle</code>
+    action from say, a button, the dropdown is going to open and will take as
+    the element to be anchored to element with
+    <code>data-ebd-id="\{{dropdown.uniqueId}}-trigger"</code>.
+  </p>
+
+  <p>
+    What kind of things can you do with this?
+  </p>
+
+  <p>
+    By example, you can open or close the component when an item is clicked but
+    make the dropdown attach itself to an entirely different item in the page.
+  </p>
+
+  <p>
+    Let's create an input with a button. When that button is clicked the drodown
+    will open below the input, not not below the button that you clicked.
+  </p>
+
+  <CodeExample @glimmerTs="no-trigger-1.gts">
+    <NoTrigger1Component />
+  </CodeExample>
+
+  <p>
+    Remember that almost always you will want to use the provided trigger
+    component
+    <code>&#60;dropdown.trigger></code>
+    because it takes care of all the A11y, bindings and classes for you, but
+    when you can't it's good to know that you can still use your own markup and
+    wire things together yourself.
+  </p>
+
+  <p>
+    A good middle-ground is to apply the same trigger modifier that the
+    component uses, but to your element or component. It will get all of the
+    same a11y and bindings that the
+    <code>&#60;dropdown.trigger></code>
+    component gets.
+  </p>
+
+  <CodeExample @glimmerTs="no-trigger-2.gts">
+    <NoTrigger2Component />
+  </CodeExample>
+</template>
diff --git a/docs/app/templates/public-pages/cookbook/index.hbs b/docs/app/templates/public-pages/cookbook/index.hbs
deleted file mode 100644
index 50fd5829..00000000
--- a/docs/app/templates/public-pages/cookbook/index.hbs
+++ /dev/null
@@ -1,48 +0,0 @@
-<h1 class="doc-page-title">System-wide config</h1>
-
-<p>
-  Ember Basic Dropdown can take a fair amount of configuration options on
-  invocations to alter its default behavior.
-</p>
-
-<p>
-  If you want all your dropdowns to behave on a certain way or have some certain
-  classes? Repeating the same options over and over on your templates is boring.
-</p>
-
-<p>
-  If you want to apply a configuration option to all your dropdowns there is no
-  special way or key in the
-  <code>/config/environment.js</code>
-  you need to learn. Just use The Ember Way™.
-</p>
-
-<p>
-  Inside your app's
-  <code>/app/components</code>
-  folder create a
-  <code>ember-basic-dropdown.js</code>
-  file:
-</p>
-
-{{#let (get-code-snippet "system-wide-config-1-js.js") as |snippet|}}
-  <CodeBlock @language="js" @code={{snippet.source}} />
-{{/let}}
-
-<p>
-  That's all. No new concepts to learn, just your usual ember-cli work flow.
-</p>
-
-<p>
-  In this example the component is also named
-  <code>\{{basic-dropdown}}</code>
-  but using this approach you can create many components with different names
-  that extend and customize the default one without modifying it.
-</p>
-
-<div class="doc-page-nav">
-  <LinkTo
-    @route="public-pages.cookbook.no-trigger"
-    class="doc-page-nav-link-next"
-  >Usage without trigger &gt;</LinkTo>
-</div>
\ No newline at end of file
diff --git a/docs/app/templates/public-pages/cookbook/no-trigger.hbs b/docs/app/templates/public-pages/cookbook/no-trigger.hbs
deleted file mode 100644
index b5206e35..00000000
--- a/docs/app/templates/public-pages/cookbook/no-trigger.hbs
+++ /dev/null
@@ -1,72 +0,0 @@
-<h1 class="doc-page-title">Usage without trigger</h1>
-
-<p>
-  Use the component without a trigger? Is that possible?
-</p>
-
-<p>
-  Yes, it is. You don't need to invoke the
-  <code>&#60;dropdown.trigger></code>
-  component to make the dropdown work. The yielded
-  <code>dropdown</code>
-  has actions you can invoke from any other item. Yes, it is. You don't need to
-  invoke the
-  <code>&#60;dropdown.trigger></code>
-  component to make the dropdown work. The yielded
-  <code>dropdown</code>
-  has actions you can invoke from any other item.
-</p>
-
-<p>
-  Sometimes you just cannot achieve what you want with this approach, so you
-  need to step down and wire things yourself.
-</p>
-
-<p>
-  If you invoke the
-  <code>open</code>
-  or
-  <code>toggle</code>
-  action from say, a button, the dropdown is going to open and will take as the
-  element to be anchored to element with
-  <code>data-ebd-id="\{{dropdown.uniqueId}}-trigger"</code>.
-</p>
-
-<p>
-  What kind of things can you do with this?
-</p>
-
-<p>
-  By example, you can open or close the component when an item is clicked but
-  make the dropdown attach itself to an entirely different item in the page.
-</p>
-
-<p>
-  Let's create an input with a button. When that button is clicked the drodown
-  will open below the input, not not below the button that you clicked.
-</p>
-
-<CodeExample @hbs="no-trigger-1.hbs">
-  {{component (ensure-safe-component this.noTrigger1Component)}}
-</CodeExample>
-
-<p>
-  Remember that almost always you will want to use the provided trigger
-  component
-  <code>&#60;dropdown.trigger></code>
-  because it takes care of all the A11y, bindings and classes for you, but when
-  you can't it's good to know that you can still use your own markup and wire
-  things together yourself.
-</p>
-
-<p>
-  A good middle-ground is to apply the same trigger modifier that the component
-  uses, but to your element or component. It will get all of the same a11y and
-  bindings that the
-  <code>&#60;dropdown.trigger></code>
-  component gets.
-</p>
-
-<CodeExample @hbs="no-trigger-2.hbs">
-  {{component (ensure-safe-component this.noTrigger2Component)}}
-</CodeExample>
\ No newline at end of file
diff --git a/docs/app/templates/public-pages/docs.gts b/docs/app/templates/public-pages/docs.gts
new file mode 100644
index 00000000..fb2e4dbf
--- /dev/null
+++ b/docs/app/templates/public-pages/docs.gts
@@ -0,0 +1,126 @@
+import Component from '@glimmer/component';
+import { service } from '@ember/service';
+import { action } from '@ember/object';
+import type RouterService from '@ember/routing/router-service';
+import { on } from '@ember/modifier';
+import { LinkTo } from '@ember/routing';
+import { eq } from 'ember-truth-helpers';
+
+const groupedSections = [
+  {
+    id: 'getting-started',
+    groupName: 'Getting started',
+    options: [
+      { route: 'public-pages.docs.index', text: 'Overview' },
+      { route: 'public-pages.docs.installation', text: 'Installation' },
+      { route: 'public-pages.docs.how-to-use-it', text: 'How to use it' },
+      { route: 'public-pages.docs.dropdown-events', text: 'Dropdown events' },
+      { route: 'public-pages.docs.trigger-events', text: 'Trigger events' },
+      { route: 'public-pages.docs.content-events', text: 'Content events' },
+    ],
+  },
+  {
+    id: 'basic-customization',
+    groupName: 'Basic customization',
+    options: [
+      { route: 'public-pages.docs.position', text: 'Position' },
+      { route: 'public-pages.docs.disabled', text: 'Disabled' },
+      { route: 'public-pages.docs.overlays', text: 'Overlays' },
+      { route: 'public-pages.docs.styles', text: 'Styles' },
+    ],
+  },
+  {
+    id: 'advanced-customization',
+    groupName: 'Advanced customization',
+    options: [
+      { route: 'public-pages.docs.custom-position', text: 'Custom position' },
+      { route: 'public-pages.docs.animations', text: 'Animations' },
+    ],
+  },
+  {
+    id: 'upgrade',
+    groupName: 'Upgrade',
+    options: [
+      {
+        route: 'public-pages.docs.migrate-7-0-to-8-0',
+        text: 'Migrate from 7.0 to 8.0',
+      },
+    ],
+  },
+  {
+    id: 'other',
+    groupName: 'Other',
+    options: [
+      { route: 'public-pages.docs.test-helpers', text: 'Test helpers' },
+      { route: 'public-pages.docs.api-reference', text: 'API reference' },
+    ],
+  },
+];
+
+export default class extends Component {
+  @service declare router: RouterService;
+  groupedSections = groupedSections;
+
+  get currentSection() {
+    const currentRouteName = this.router.currentRouteName;
+    for (let i = 0; i < groupedSections.length; i++) {
+      const group = groupedSections[i];
+      if (group) {
+        for (let j = 0; j < group.options.length; j++) {
+          const section = group.options[j];
+          if (section) {
+            if (section.route === currentRouteName) {
+              return section;
+            }
+          }
+        }
+      }
+    }
+
+    return undefined;
+  }
+
+  @action
+  visit(e: Event) {
+    const value = (e.target as HTMLSelectElement | null)?.value ?? '';
+    this.router.transitionTo(value);
+  }
+
+  <template>
+    <section class="docs">
+      <nav class="side-nav">
+        {{#each this.groupedSections key="id" as |group|}}
+          <header class="side-nav-header" id={{group.id}}>
+            {{group.groupName}}
+          </header>
+          {{#each group.options key="route" as |option|}}
+            <LinkTo
+              @route={{option.route}}
+              @current-when={{option.route}}
+              class="side-nav-link"
+            >
+              {{option.text}}
+            </LinkTo>
+          {{/each}}
+        {{/each}}
+      </nav>
+      <section class="doc-page">
+        <select class="section-selector" {{on "change" this.visit}}>
+          {{#each this.groupedSections key="id" as |group|}}
+            <optgroup label={{group.groupName}}>
+              {{#each group.options key="route" as |section|}}
+                <option
+                  value={{section.route}}
+                  selected={{eq section.route this.currentSection.route}}
+                >
+                  {{section.text}}
+                </option>
+              {{/each}}
+            </optgroup>
+          {{/each}}
+        </select>
+        {{outlet}}
+      </section>
+    </section>
+  </template>
+}
diff --git a/docs/app/templates/public-pages/docs.hbs b/docs/app/templates/public-pages/docs.hbs
deleted file mode 100644
index af7801f5..00000000
--- a/docs/app/templates/public-pages/docs.hbs
+++ /dev/null
@@ -1,35 +0,0 @@
-<section class="docs">
-  <nav class="side-nav">
-    {{#each this.groupedSections key="id" as |group|}}
-      <header class="side-nav-header" id={{group.id}}>
-        {{group.groupName}}
-      </header>
-      {{#each group.options key="route" as |option|}}
-        <LinkTo
-          @route={{option.route}}
-          @current-when={{option.route}}
-          class="side-nav-link"
-        >
-          {{option.text}}
-        </LinkTo>
-      {{/each}}
-    {{/each}}
-  </nav>
-  <section class="doc-page">
-    <select class="section-selector" {{on "change" this.visit}}>
-      {{#each this.groupedSections key="id" as |group|}}
-        <optgroup label={{group.groupName}}>
-          {{#each group.options key="route" as |section|}}
-            <option
-              value={{section.route}}
-              selected={{eq section.route this.currentSection.route}}
-            >
-              {{section.text}}
-            </option>
-          {{/each}}
-        </optgroup>
-      {{/each}}
-    </select>
-    {{outlet}}
-  </section>
-</section>
\ No newline at end of file
diff --git a/docs/app/templates/public-pages/docs/animations.gts b/docs/app/templates/public-pages/docs/animations.gts
new file mode 100644
index 00000000..ceacb8c8
--- /dev/null
+++ b/docs/app/templates/public-pages/docs/animations.gts
@@ -0,0 +1,54 @@
+import { LinkTo } from '@ember/routing';
+import CodeExample from '../../../components/code-example';
+import Animations1Component from '../../../components/snippets/animations-1';
+
+<template>
+  <h1 class="doc-page-title">Animations</h1>
+
+  <p>
+    Do you like animations in your dropdowns? Me too. Let's define some
+  </p>
+
+  <p>
+    It is that simple as create a CSS3 animation using the
+    <code>ember-basic-dropdown--transitioning-in</code>,
+    <code>ember-basic-dropdown--transitioned-in</code>
+    and
+    <code>ember-basic-dropdown--transitioning-out</code>
+    classes that ember-basic-dropdown gives you automatically.
+  </p>
+
+  <p>
+    You will probably also want to use
+    <code>.ember-basic-dropdown-content--below</code>
+    and
+    <code>.ember-basic-dropdown-content--above</code>
+    to have different animations depending on where the dropdown is positioned.
+  </p>
+
+  <CodeExample @glimmerTs="animations-1.gts" @css="animations-1-css.scss">
+    <Animations1Component />
+  </CodeExample>
+
+  <p>
+    There is nothing else to know about animations, other that you have to use
+    CSS
+    <strong>animations</strong>, not transitions.
+  </p>
+
+  <p>
+    The dropdown takes care of creating a clone when closing the dropdown so you
+    animation works in both directions.
+  </p>
+
+  <div class="doc-page-nav">
+    <LinkTo
+      @route="public-pages.docs.custom-position"
+      class="doc-page-nav-link-prev"
+    >&lt; Custom position</LinkTo>
+    <LinkTo
+      @route="public-pages.docs.migrate-7-0-to-8-0"
+      class="doc-page-nav-link-next"
+    >Migrate from 7.0 to 8.0 &gt;</LinkTo>
+  </div>
+</template>
diff --git a/docs/app/templates/public-pages/docs/animations.hbs b/docs/app/templates/public-pages/docs/animations.hbs
deleted file mode 100644
index 44a386ac..00000000
--- a/docs/app/templates/public-pages/docs/animations.hbs
+++ /dev/null
@@ -1,47 +0,0 @@
-<h1 class="doc-page-title">Animations</h1>
-
-<p>
-  Do you like animations in your dropdowns? Me too. Let's define some
-</p>
-
-<p>
-  It is that simple as create a CSS3 animation using the
-  <code>ember-basic-dropdown--transitioning-in</code>,
-  <code>ember-basic-dropdown--transitioned-in</code>
-  and
-  <code>ember-basic-dropdown--transitioning-out</code>
-  classes that ember-basic-dropdown gives you automatically.
-</p>
-
-<p>
-  You will probably also want to use
-  <code>.ember-basic-dropdown-content--below</code>
-  and
-  <code>.ember-basic-dropdown-content--above</code>
-  to have different animations depending on where the dropdown is positioned.
-</p>
-
-<CodeExample @hbs="animations-1.hbs" @css="animations-1-css.scss">
-  {{component (ensure-safe-component this.animations1Component)}}
-</CodeExample>
-
-<p>
-  There is nothing else to know about animations, other that you have to use CSS
-  <strong>animations</strong>, not transitions.
-</p>
-
-<p>
-  The dropdown takes care of creating a clone when closing the dropdown so you
-  animation works in both directions.
-</p>
-
-<div class="doc-page-nav">
-  <LinkTo
-    @route="public-pages.docs.custom-position"
-    class="doc-page-nav-link-prev"
-  >&lt; Custom position</LinkTo>
-  <LinkTo
-    @route="public-pages.docs.migrate-7-0-to-8-0"
-    class="doc-page-nav-link-next"
-  >Migrate from 7.0 to 8.0 &gt;</LinkTo>
-</div>
\ No newline at end of file
diff --git a/docs/app/templates/public-pages/docs/api-reference.gts b/docs/app/templates/public-pages/docs/api-reference.gts
new file mode 100644
index 00000000..5d3f2c98
--- /dev/null
+++ b/docs/app/templates/public-pages/docs/api-reference.gts
@@ -0,0 +1,315 @@
+import { LinkTo } from '@ember/routing';
+
+<template>
+  <h1 class="doc-page-title">API reference</h1>
+
+  <p>
+    It's hard to find a proper place in the guides for explaining every single
+    option in depth, and some of them are so straightforward that they don't
+    require an example, so use this section as a more exhaustive list.
+  </p>
+
+  <br />
+  <h2>Dropdown</h2>
+
+  <table>
+    <thead>
+      <tr>
+        <th>Option</th>
+        <th>Type</th>
+        <th>Description</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>calculatePosition</td>
+        <td><code>Function</code></td>
+        <td>Function to customize how the content of the dropdown is positioned.</td>
+      </tr>
+      <tr>
+        <td>class</td>
+        <td><code>String</code></td>
+        <td>The class of the dropdown component. Since this component is tagless
+          by default, you need to combine it with the
+          <code>tagName</code>
+          to be effective</td>
+      </tr>
+      <tr>
+        <td>defaultClass</td>
+        <td><code>String</code></td>
+        <td>Another way of providing a class to the component without polluting
+          the
+          <code>class</code>
+          attribute. Useful in contextual component to allow users give their
+          own classes while still retaining some defaults</td>
+      </tr>
+      <tr>
+        <td>destination</td>
+        <td><code>String</code></td>
+        <td>The id of a DOM element where the dropdown will be rendered using
+          <code>#in-element</code></td>
+      </tr>
+      <tr>
+        <td>destinationElement</td>
+        <td><code>HTMLElement</code></td>
+        <td>Instead of passing
+          <code>destination</code>, you can pass the DOM element where the
+          dropdown will be rendered using
+          <code>#in-element</code></td>
+      </tr>
+      <tr>
+        <td>contentComponent</td>
+        <td><code>Component</code></td>
+        <td>The component to render as content instead of the default content
+          component. You
+          <em>probably</em>
+          don't want to use this option.</td>
+      </tr>
+      <tr>
+        <td>horizontalPosition</td>
+        <td><code>String</code></td>
+        <td>The horizontal positioning strategy of the content. Can be one of
+          <code>auto</code>
+          (the default),
+          <code>left</code>,
+          <code>center</code>
+          or
+          <code>right</code></td>
+      </tr>
+      <tr>
+        <td>matchTriggerWidth</td>
+        <td><code>Boolean</code></td>
+        <td>(Default:
+          <code>false</code>). Flag that indicates whether or not the content's
+          width should be equal to the width of the trigger.</td>
+      </tr>
+      <tr>
+        <td>preventScroll</td>
+        <td><code>Boolean</code></td>
+        <td>(Default:
+          <code>false</code>). Flag that prevents any elements on the page
+          outside the dropdown from scrolling. This matches platform-provided
+          <code>select</code>
+          element behavior. Note that this has no effect when scroll is
+          performed on a touch device</td>
+      </tr>
+      <tr>
+        <td>renderInPlace</td>
+        <td><code>String</code></td>
+        <td>When passed
+          <code>true</code>, the content will render next to the trigger instead
+          of being placed in the root of the body.</td>
+      </tr>
+      <tr>
+        <td>initiallyOpened</td>
+        <td><code>Boolean</code></td>
+        <td>(Default:
+          <code>false</code>). When passed
+          <code>true</code>
+          the component is first rendered open. Used in combination with
+          <code>preventScroll</code>
+          it changes Fastboot user experience, but other than that it does not
+          alter its behavior. The user can close it as usual.</td>
+      </tr>
+      <tr>
+        <td>tagName</td>
+        <td><code>String</code></td>
+        <td>(Default: <code>""</code>) The tag of the component.</td>
+      </tr>
+      <tr>
+        <td>triggerComponent</td>
+        <td><code>Component</code></td>
+        <td>The component to render as trigger instead of the default trigger
+          component.</td>
+      </tr>
+      <tr>
+        <td>verticalPosition</td>
+        <td><code>String</code></td>
+        <td>The vertical positioning strategy of the content. Can be one of
+          <code>auto</code>
+          (the default),
+          <code>above</code>
+          or
+          <code>below</code></td>
+      </tr>
+      <tr>
+        <td>registerAPI</td>
+        <td><code>Function</code></td>
+        <td>An action that will be invoked with the new public API of the
+          component every time there is a change in the state of the component.</td>
+      </tr>
+      <tr>
+        <td>onOpen</td>
+        <td><code>Function</code></td>
+        <td>Action that will be called when the component is about to open.
+          Returning
+          <code>false</code>
+          from this function will prevent the component from being opened.</td>
+      </tr>
+      <tr>
+        <td>onClose </td>
+        <td><code>Function</code></td>
+        <td>Action that will be called when the component is about to close.
+          Returning
+          <code>false</code>
+          from this function will prevent the component from being closed.</td>
+      </tr>
+      <tr>
+        <td>rootEventType</td>
+        <td>String</td>
+        <td>(Default:
+          <code>'click'</code>) The type of mouse event that handles closing the
+          dropdown. Valid values: "mousedown" and "click"</td>
+      </tr>
+    </tbody>
+  </table>
+
+  <h2>Trigger</h2>
+
+  <table>
+    <thead>
+      <tr>
+        <th>Option</th>
+        <th>Type</th>
+        <th>Description</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>ariaDescribedBy</td>
+        <td>String</td>
+        <td>Maps to <code>aria-described-by</code></td>
+      </tr>
+      <tr>
+        <td>ariaInvalid</td>
+        <td>Boolean</td>
+        <td>Maps to <code>aria-invalid</code></td>
+      </tr>
+      <tr>
+        <td>ariaLabel</td>
+        <td>String</td>
+        <td>Maps to <code>aria-label</code></td>
+      </tr>
+      <tr>
+        <td>ariaLabelledBy</td>
+        <td>String</td>
+        <td>Maps to <code>aria-labeledby</code></td>
+      </tr>
+      <tr>
+        <td>class</td>
+        <td>String</td>
+        <td>Extra classes to be added to the trigger components</td>
+      </tr>
+      <tr>
+        <td>tabindex</td>
+        <td>Number</td>
+        <td>Tabindex of the trigger, which defaults to 0 so the trigger is
+          focusable by default</td>
+      </tr>
+      <tr>
+        <td>htmlTag</td>
+        <td>String</td>
+        <td>(Default: <code>'div'</code>) The tag of the trigger component</td>
+      </tr>
+      <tr>
+        <td>title</td>
+        <td>String</td>
+        <td>Maps to the <code>title</code> attribute</td>
+      </tr>
+      <tr>
+        <td>eventType</td>
+        <td>String</td>
+        <td>(Default:
+          <code>'click'</code>) The type of mouse event that triggers the
+          trigger. Valid values: "mousedown" and "click"</td>
+      </tr>
+      <tr>
+        <td>stopPropagation</td>
+        <td>Boolean</td>
+        <td>(Default:
+          <code>false</code>) Whether the trigger should prevent the propagation
+          of the event that triggers it (click or mousedown)</td>
+      </tr>
+    </tbody>
+  </table>
+
+  <h2>Content</h2>
+
+  <table>
+    <thead>
+      <tr>
+        <th>Option</th>
+        <th>Type</th>
+        <th>Description</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>class</td>
+        <td>String</td>
+        <td>The class of the dropdown's content</td>
+      </tr>
+      <tr>
+        <td>animationEnabled</td>
+        <td>boolean</td>
+        <td>Flag to determine whether the content will allow CSS animations.
+          Defaults to true</td>
+      </tr>
+      <tr>
+        <td>htmlTag</td>
+        <td>String</td>
+        <td>(Default: <code>'div'</code>) The tag of the content component</td>
+      </tr>
+      <tr>
+        <td>shouldReposition</td>
+        <td>Function</td>
+        <td>An optional function that can be used to avoid uncecessary
+          repositions. To skip a reposition, simply return
+          <code>false</code>. This function will be invoked when the DOM of the
+          content is changed. It receives two arguments: a
+          <a
+            href="https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord"
+            target="_blank"
+            rel="noopener noreferrer"
+          >MutationRecord</a>
+          and the public API object.</td>
+      </tr>
+    </tbody>
+  </table>
+
+  <h2>Public API's methods and actions</h2>
+
+  <p>
+    All actions and subcomponents of Ember Basic Dropdown receive a single
+    object containing the entirety of the public API of the component.
+  </p>
+
+  <p>
+    Any non-underscored property or action of this object can be considered
+    public and it's not going to change without causing a major version bump, so
+    if you are building another component on top of Ember Basic Dropdown, you
+    know that you are safe as long as you use this object.
+  </p>
+
+  <pre
+  >
+  {
+    uniqueId: &lt;string&gt;, // Contains the unique of this instance of EmberBasicDropdown. It's of the form 'ember1234'.
+    disabled: &lt;boolean&gt;, // Truthy if the component received 'disabled=true'
+    isOpen: &lt;boolean&gt;, // Truthy if the component is currently opened
+    actions: {
+      close() { ... }, // Closes the dropdown
+      open() { ... }, // Opens the dropdown
+      reposition() { ... }, // Repositions the dropdown
+      toggle() { ... } // Toggles the dropdown
+    }
+  }
+  </pre>
+
+  <div class="doc-page-nav">
+    <LinkTo
+      @route="public-pages.docs.test-helpers"
+      class="doc-page-nav-link-prev"
+    >&lt; Test helpers</LinkTo>
+  </div>
+</template>
diff --git a/docs/app/templates/public-pages/docs/api-reference.hbs b/docs/app/templates/public-pages/docs/api-reference.hbs
deleted file mode 100644
index a40f94dc..00000000
--- a/docs/app/templates/public-pages/docs/api-reference.hbs
+++ /dev/null
@@ -1,312 +0,0 @@
-<h1 class="doc-page-title">API reference</h1>
-
-<p>
-  It's hard to find a proper place in the guides for explaining every single
-  option in depth, and some of them are so straightforward that they don't
-  require an example, so use this section as a more exhaustive list.
-</p>
-
-<br />
-<h2>Dropdown</h2>
-
-<table>
-  <thead>
-    <tr>
-      <th>Option</th>
-      <th>Type</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>calculatePosition</td>
-      <td><code>Function</code></td>
-      <td>Function to customize how the content of the dropdown is positioned.</td>
-    </tr>
-    <tr>
-      <td>class</td>
-      <td><code>String</code></td>
-      <td>The class of the dropdown component. Since this component is tagless
-        by default, you need to combine it with the
-        <code>tagName</code>
-        to be effective</td>
-    </tr>
-    <tr>
-      <td>defaultClass</td>
-      <td><code>String</code></td>
-      <td>Another way of providing a class to the component without polluting
-        the
-        <code>class</code>
-        attribute. Useful in contextual component to allow users give their own
-        classes while still retaining some defaults</td>
-    </tr>
-    <tr>
-      <td>destination</td>
-      <td><code>String</code></td>
-      <td>The id of a DOM element where the dropdown will be rendered using
-        <code>#in-element</code></td>
-    </tr>
-    <tr>
-      <td>destinationElement</td>
-      <td><code>HTMLElement</code></td>
-      <td>Instead of passing
-        <code>destination</code>, you can pass the DOM element where the
-        dropdown will be rendered using
-        <code>#in-element</code></td>
-    </tr>
-    <tr>
-      <td>contentComponent</td>
-      <td><code>String or Component</code></td>
-      <td>The component to render as content instead of the default content
-        component. You
-        <em>probably</em>
-        don't want to use this option.</td>
-    </tr>
-    <tr>
-      <td>horizontalPosition</td>
-      <td><code>String</code></td>
-      <td>The horizontal positioning strategy of the content. Can be one of
-        <code>auto</code>
-        (the default),
-        <code>left</code>,
-        <code>center</code>
-        or
-        <code>right</code></td>
-    </tr>
-    <tr>
-      <td>matchTriggerWidth</td>
-      <td><code>Boolean</code></td>
-      <td>(Default:
-        <code>false</code>). Flag that indicates whether or not the content's
-        width should be equal to the width of the trigger.</td>
-    </tr>
-    <tr>
-      <td>preventScroll</td>
-      <td><code>Boolean</code></td>
-      <td>(Default:
-        <code>false</code>). Flag that prevents any elements on the page outside
-        the dropdown from scrolling. This matches platform-provided
-        <code>select</code>
-        element behavior. Note that this has no effect when scroll is performed
-        on a touch device</td>
-    </tr>
-    <tr>
-      <td>renderInPlace</td>
-      <td><code>String</code></td>
-      <td>When passed
-        <code>true</code>, the content will render next to the trigger instead
-        of being placed in the root of the body.</td>
-    </tr>
-    <tr>
-      <td>initiallyOpened</td>
-      <td><code>Boolean</code></td>
-      <td>(Default:
-        <code>false</code>). When passed
-        <code>true</code>
-        the component is first rendered open. Used in combination with
-        <code>preventScroll</code>
-        it changes Fastboot user experience, but other than that it does not
-        alter its behavior. The user can close it as usual.</td>
-    </tr>
-    <tr>
-      <td>tagName</td>
-      <td><code>String</code></td>
-      <td>(Default: <code>""</code>) The tag of the component.</td>
-    </tr>
-    <tr>
-      <td>triggerComponent</td>
-      <td><code>String</code></td>
-      <td>The component to render as trigger instead of the default trigger
-        component.</td>
-    </tr>
-    <tr>
-      <td>verticalPosition</td>
-      <td><code>String</code></td>
-      <td>The vertical positioning strategy of the content. Can be one of
-        <code>auto</code>
-        (the default),
-        <code>above</code>
-        or
-        <code>below</code></td>
-    </tr>
-    <tr>
-      <td>registerAPI</td>
-      <td><code>Function</code></td>
-      <td>An action that will be invoked with the new public API of the
-        component every time there is a change in the state of the component.</td>
-    </tr>
-    <tr>
-      <td>onOpen</td>
-      <td><code>Function</code></td>
-      <td>Action that will be called when the component is about to open.
-        Returning
-        <code>false</code>
-        from this function will prevent the component from being opened.</td>
-    </tr>
-    <tr>
-      <td>onClose </td>
-      <td><code>Function</code></td>
-      <td>Action that will be called when the component is about to close.
-        Returning
-        <code>false</code>
-        from this function will prevent the component from being closed.</td>
-    </tr>
-    <tr>
-      <td>rootEventType</td>
-      <td>String</td>
-      <td>(Default:
-        <code>'click'</code>) The type of mouse event that handles closing the
-        dropdown. Valid values: "mousedown" and "click"</td>
-    </tr>
-  </tbody>
-</table>
-
-<h2>Trigger</h2>
-
-<table>
-  <thead>
-    <tr>
-      <th>Option</th>
-      <th>Type</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>ariaDescribedBy</td>
-      <td>String</td>
-      <td>Maps to <code>aria-described-by</code></td>
-    </tr>
-    <tr>
-      <td>ariaInvalid</td>
-      <td>Boolean</td>
-      <td>Maps to <code>aria-invalid</code></td>
-    </tr>
-    <tr>
-      <td>ariaLabel</td>
-      <td>String</td>
-      <td>Maps to <code>aria-label</code></td>
-    </tr>
-    <tr>
-      <td>ariaLabelledBy</td>
-      <td>String</td>
-      <td>Maps to <code>aria-labeledby</code></td>
-    </tr>
-    <tr>
-      <td>class</td>
-      <td>String</td>
-      <td>Extra classes to be added to the trigger components</td>
-    </tr>
-    <tr>
-      <td>tabindex</td>
-      <td>Number</td>
-      <td>Tabindex of the trigger, which defaults to 0 so the trigger is
-        focusable by default</td>
-    </tr>
-    <tr>
-      <td>htmlTag</td>
-      <td>String</td>
-      <td>(Default: <code>'div'</code>) The tag of the trigger component</td>
-    </tr>
-    <tr>
-      <td>title</td>
-      <td>String</td>
-      <td>Maps to the <code>title</code> attribute</td>
-    </tr>
-    <tr>
-      <td>eventType</td>
-      <td>String</td>
-      <td>(Default:
-        <code>'click'</code>) The type of mouse event that triggers the trigger.
-        Valid values: "mousedown" and "click"</td>
-    </tr>
-    <tr>
-      <td>stopPropagation</td>
-      <td>Boolean</td>
-      <td>(Default:
-        <code>false</code>) Whether the trigger should prevent the propagation
-        of the event that triggers it (click or mousedown)</td>
-    </tr>
-  </tbody>
-</table>
-
-<h2>Content</h2>
-
-<table>
-  <thead>
-    <tr>
-      <th>Option</th>
-      <th>Type</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>class</td>
-      <td>String</td>
-      <td>The class of the dropdown's content</td>
-    </tr>
-    <tr>
-      <td>to</td>
-      <td>String</td>
-      <td><strong>[DEPRECATED]</strong>The selector of a DOM element where the
-        dropdown will be rendered using ember-wormhole</td>
-    </tr>
-    <tr>
-      <td>animationEnabled</td>
-      <td>boolean</td>
-      <td>Flag to determine whether the content will allow CSS animations.
-        Defaults to true</td>
-    </tr>
-    <tr>
-      <td>htmlTag</td>
-      <td>String</td>
-      <td>(Default: <code>'div'</code>) The tag of the content component</td>
-    </tr>
-    <tr>
-      <td>shouldReposition</td>
-      <td>Function</td>
-      <td>An optional function that can be used to avoid uncecessary
-        repositions. To skip a reposition, simply return
-        <code>false</code>. This function will be invoked when the DOM of the
-        content is changed. It receives two arguments: a
-        <a
-          href="https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord"
-          target="_blank"
-          rel="noopener noreferrer"
-        >MutationRecord</a>
-        and the public API object.</td>
-    </tr>
-  </tbody>
-</table>
-
-<h2>Public API's methods and actions</h2>
-
-<p>
-  All actions and subcomponents of Ember Basic Dropdown receive a single object
-  containing the entirety of the public API of the component.
-</p>
-
-<p>
-  Any non-underscored property or action of this object can be considered public
-  and it's not going to change without causing a major version bump, so if you
-  are building another component on top of Ember Basic Dropdown, you know that
-  you are safe as long as you use this object.
-</p>
-
-<pre
->
-  { uniqueId: &lt;string&gt;, // Contains the unique of this instance of
-  EmberBasicDropdown. It's of the form `ember1234`. disabled: &lt;boolean&gt;,
-  // Truthy if the component received `disabled=true` isOpen: &lt;boolean&gt;,
-  // Truthy if the component is currently opened actions: { close() { ... }, //
-  Closes the dropdown open() { ... }, // Opens the dropdown reposition() { ...
-  }, // Repositions the dropdown toggle() { ... } // Toggles the dropdown } }
-</pre>
-
-<div class="doc-page-nav">
-  <LinkTo
-    @route="public-pages.docs.test-helpers"
-    class="doc-page-nav-link-prev"
-  >&lt; Test helpers</LinkTo>
-</div>
\ No newline at end of file
diff --git a/docs/app/templates/public-pages/docs/content-events.gts b/docs/app/templates/public-pages/docs/content-events.gts
new file mode 100644
index 00000000..129d6ba4
--- /dev/null
+++ b/docs/app/templates/public-pages/docs/content-events.gts
@@ -0,0 +1,75 @@
+import { LinkTo } from '@ember/routing';
+import CodeExample from '../../../components/code-example';
+import ContentEvents1Component from '../../../components/snippets/content-events-1';
+
+<template>
+  <h1 class="doc-page-title">Content events</h1>
+
+  <p>
+    Like the trigger, the dropdown accepts function to bind a few handy events.
+  </p>
+
+  <h3><code>onFocusIn/onFocusOut(dropdown, event)</code></h3>
+
+  <p>
+    Those events are just identical to the ones in the trigger.
+  </p>
+
+  <h3><code>onMouseEnter / onMouseLeave(dropdown, event)</code></h3>
+
+  <p>
+    Used in conjunction with the same events in the trigger it quite easy to
+    make a dropdown that opens when you hover the trigger and closes leave it,
+    but stays open if you move from the trigger to the content.
+  </p>
+
+  <p>
+    You can even delay the closing a bit to allow the users to briefly pass
+    outside the boundaries of the dropdown without closing it. Think the navbar
+    of your favourite social network:
+  </p>
+
+  <CodeExample @glimmerTs="content-events-1.gts">
+    <ContentEvents1Component />
+  </CodeExample>
+
+  <p>
+    Let's break this down.
+  </p>
+
+  <p>
+    First we
+    <code>&lt;dd.Trigger \{{on "mousedown" this.prevent\\}}&gt;</code>
+    neglect mouse input: Open/close both by click and hover will trip our users.
+  </p>
+
+  <p>
+    Then
+    <code>\{{on "mouseenter" (fn this.open dd)}}</code>
+    and
+    <code>\{{on "mouseleave" (fn this.closeLater dd)}}</code>
+    open a close the dropdown, but we we leave we don't close immediately.
+    Instead we delay the close a few milliseconds as a grace period, allowing
+    the user to transition from the trigger to the content even if the
+    trajectory of the mouse is not perfect.
+  </p>
+
+  <p>
+    If before that grace period they enter again the boundaries of the
+    component, we cancel the scheduled close. This would be much cleaner using
+    <code>ember-concurrency</code>
+    tasks.
+  </p>
+
+  <p>
+    In the following chapters we will learn how to customize the dropdown
+    behaviour with all the different options.
+  </p>
+
+  <div class="doc-page-nav">
+    <LinkTo
+      @route="public-pages.docs.trigger-events"
+      class="doc-page-nav-link-prev"
+    >&lt; Trigger events</LinkTo>
+  </div>
+</template>
diff --git a/docs/app/templates/public-pages/docs/content-events.hbs b/docs/app/templates/public-pages/docs/content-events.hbs
deleted file mode 100644
index 595b8b76..00000000
--- a/docs/app/templates/public-pages/docs/content-events.hbs
+++ /dev/null
@@ -1,69 +0,0 @@
-<h1 class="doc-page-title">Content events</h1>
-
-<p>
-  Like the trigger, the dropdown accepts function to bind a few handy events.
-</p>
-
-<h3><code>onFocusIn/onFocusOut(dropdown, event)</code></h3>
-
-<p>
-  Those events are just identical to the ones in the trigger.
-</p>
-
-<h3><code>onMouseEnter / onMouseLeave(dropdown, event)</code></h3>
-
-<p>
-  Used in conjunction with the same events in the trigger it quite easy to make
-  a dropdown that opens when you hover the trigger and closes leave it, but
-  stays open if you move from the trigger to the content.
-</p>
-
-<p>
-  You can even delay the closing a bit to allow the users to briefly pass
-  outside the boundaries of the dropdown without closing it. Think the navbar of
-  your favourite social network:
-</p>
-
-<CodeExample @hbs="content-events-1.hbs" @js="content-events-1.js">
-  {{component (ensure-safe-component this.contentEvents1Component)}}
-</CodeExample>
-
-<p>
-  Let's break this down.
-</p>
-
-<p>
-  First we
-  <code>&lt;dd.Trigger \{{on "mousedown" this.prevent\\}}&gt;</code>
-  neglect mouse input: Open/close both by click and hover will trip our users.
-</p>
-
-<p>
-  Then
-  <code>\{{on "mouseenter" (fn this.open dd)}}</code>
-  and
-  <code>\{{on "mouseleave" (fn this.closeLater dd)}}</code>
-  open a close the dropdown, but we we leave we don't close immediately. Instead
-  we delay the close a few milliseconds as a grace period, allowing the user to
-  transition from the trigger to the content even if the trajectory of the mouse
-  is not perfect.
-</p>
-
-<p>
-  If before that grace period they enter again the boundaries of the component,
-  we cancel the scheduled close. This would be much cleaner using
-  <code>ember-concurrency</code>
-  tasks.
-</p>
-
-<p>
-  In the following chapters we will learn how to customize the dropdown
-  behaviour with all the different options.
-</p>
-
-<div class="doc-page-nav">
-  <LinkTo
-    @route="public-pages.docs.trigger-events"
-    class="doc-page-nav-link-prev"
-  >&lt; Trigger events</LinkTo>
-</div>
\ No newline at end of file
diff --git a/docs/app/templates/public-pages/docs/custom-position.gts b/docs/app/templates/public-pages/docs/custom-position.gts
new file mode 100644
index 00000000..0370cf51
--- /dev/null
+++ b/docs/app/templates/public-pages/docs/custom-position.gts
@@ -0,0 +1,147 @@
+import CustomPosition1Component from '../../../components/snippets/custom-position-1';
+import CustomPosition2Component from '../../../components/snippets/custom-position-2';
+import CodeExample from '../../../components/code-example';
+import { LinkTo } from '@ember/routing';
+
+<template>
+  <h1 class="doc-page-title">Custom position</h1>
+
+  <p>
+    In
+    <a href="/docs/position">a previous section</a>
+    we already say that the dropdown bundles a few positioning strategies both
+    horizontally and vertically.
+  </p>
+
+  <p>
+    But you don't want to be limited to the positioning strategies I designed
+    for you. You might want the dropdown to float to the left of the trigger or
+    perhaps one inch south-west of it.
+  </p>
+
+  <p>
+    Fear not, my friend, the component has an escape valve for this. You can
+    design your own positioning function and pass it to the component. It just
+    has to fulfill a specific contract.
+  </p>
+
+  <h3><code>calculatePosition</code></h3>
+
+  <p>
+    This function is the only thing you have to implement to tell the component
+    where it should be positioned.
+  </p>
+
+  <p>
+    The complete signature of the function is:
+    <br />
+    <code>calculatePosition(trigger, content, destination, {
+      previousHorizontalPosition, horizontalPosition, previousVerticalPosition,
+      verticalPosition, matchTriggerWidth })</code>
+    <br />
+  </p>
+
+  <ul>
+    <li><code>trigger</code>: The DOM element of the trigger component</li>
+    <li><code>content</code>: The DOM element of the content component</li>
+    <li><code>destination</code>: The DOM element where the content component is
+      going to be inserted</li>
+    <li><code>previousHorizontalPosition</code>: The string with the horizontal
+      position the component had in the last time it was repositioned. If you
+      don't provide any or you pass
+      <code>horizontalPosition="auto"</code>
+      it will be
+      <code>"left"</code>
+      or
+      <code>"right"</code>
+      depending on the space around the trigger</li>
+    <li><code>horizontalPosition</code>: The string with the current horizontal
+      position. If you don't provide any or you pass
+      <code>horizontalPosition="auto"</code>
+      it will be
+      <code>"left"</code>
+      or
+      <code>"right"</code>
+      depending on the space around the trigger</li>
+    <li><code>previousVerticalPosition</code>: The string with the vertical
+      position the component had in the last time it was repositioned. If you
+      don't provide any or you pass
+      <code>verticalPosition="auto"</code>
+      it will be
+      <code>"above"</code>
+      or
+      <code>"below"</code>
+      depending on the space around the trigger</li>
+    <li><code>verticalPosition</code>: The string with the current vertical
+      position. If you don't provide any or you pass
+      <code>verticalPosition="auto"</code>
+      it will be
+      <code>"above"</code>
+      or
+      <code>"below"</code>
+      depending on the space around the trigger</li>
+    <li><code>matchTriggerWidth</code>: Boolean that express the intention of
+      the developer to make the dropdown have the same width as the trigger</li>
+    <li><code>renderInPlace</code>: Boolean that express if the content will be
+      rendered in place. Useful since very usually the reposition logic must be
+      entirely different</li>
+  </ul>
+
+  <p>
+    The return value of this function must also be an object with a specific
+    shape:
+    <br />
+    <code>{ horizontalPosition, verticalPosition, style }</code>
+  </p>
+
+  <ul>
+    <li><code>horizontalPosition</code>: The new value of horizontalPosition</li>
+    <li><code>verticalPosition</code>: The new value of verticalPosition</li>
+    <li><code>style</code>: An object containing the CSS properties that will
+      position the object. It supports
+      <code>top</code>,
+      <code>left</code>,
+      <code>right</code>
+      and
+      <code>width</code></li>
+  </ul>
+
+  <p>
+    Sounds like a lot, but with an example you will see that it's not really
+    hard. Let's create a dropdown that opens to the right of the trigger,
+    vertically centered with it.
+  </p>
+
+  <CodeExample @glimmerTs="custom-position-1.gts">
+    <CustomPosition1Component />
+  </CodeExample>
+
+  <p>
+    You can resize the window and scroll and you can see that the content stays
+    just where it should. It will even reposition automatically if the content
+    inside changes thanks to the magic of
+    <code>MutationObservers</code>.
+  </p>
+
+  <CodeExample @glimmerTs="custom-position-2.gts">
+    <CustomPosition2Component />
+  </CodeExample>
+
+  <p>
+    The key concept that you need to extract is that all the machinery to
+    position the content and reposition when the content, scroll or screen
+    changes is handled by the dropdown, so the only missing piece you have to
+    provide is the function that calculates the cordinates.
+  </p>
+
+  <div class="doc-page-nav">
+    <LinkTo
+      @route="public-pages.docs.disabled"
+      class="doc-page-nav-link-prev"
+    >&lt; Disabled</LinkTo>
+    <LinkTo
+      @route="public-pages.docs.animations"
+      class="doc-page-nav-link-next"
+    >Animations &gt;</LinkTo>
+  </div>
+</template>
diff --git a/docs/app/templates/public-pages/docs/custom-position.hbs b/docs/app/templates/public-pages/docs/custom-position.hbs
deleted file mode 100644
index 84b425be..00000000
--- a/docs/app/templates/public-pages/docs/custom-position.hbs
+++ /dev/null
@@ -1,140 +0,0 @@
-<h1 class="doc-page-title">Custom position</h1>
-
-<p>
-  In
-  <a href="/docs/position">a previous section</a>
-  we already say that the dropdown bundles a few positioning strategies both
-  horizontally and vertically.
-</p>
-
-<p>
-  But you don't want to be limited to the positioning strategies I designed for
-  you. You might want the dropdown to float to the left of the trigger or
-  perhaps one inch south-west of it.
-</p>
-
-<p>
-  Fear not, my friend, the component has an escape valve for this. You can
-  design your own positioning function and pass it to the component. It just has
-  to fulfill a specific contract.
-</p>
-
-<h3><code>calculatePosition</code></h3>
-
-<p>
-  This function is the only thing you have to implement to tell the component
-  where it should be positioned.
-</p>
-
-<p>
-  The complete signature of the function is:
-  <br />
-  <code>calculatePosition(trigger, content, destination, {
-    previousHorizontalPosition, horizontalPosition, previousVerticalPosition,
-    verticalPosition, matchTriggerWidth })</code>
-  <br />
-</p>
-
-<ul>
-  <li><code>trigger</code>: The DOM element of the trigger component</li>
-  <li><code>content</code>: The DOM element of the content component</li>
-  <li><code>destination</code>: The DOM element where the content component is
-    going to be inserted</li>
-  <li><code>previousHorizontalPosition</code>: The string with the horizontal
-    position the component had in the last time it was repositioned. If you
-    don't provide any or you pass
-    <code>horizontalPosition="auto"</code>
-    it will be
-    <code>"left"</code>
-    or
-    <code>"right"</code>
-    depending on the space around the trigger</li>
-  <li><code>horizontalPosition</code>: The string with the current horizontal
-    position. If you don't provide any or you pass
-    <code>horizontalPosition="auto"</code>
-    it will be
-    <code>"left"</code>
-    or
-    <code>"right"</code>
-    depending on the space around the trigger</li>
-  <li><code>previousVerticalPosition</code>: The string with the vertical
-    position the component had in the last time it was repositioned. If you
-    don't provide any or you pass
-    <code>verticalPosition="auto"</code>
-    it will be
-    <code>"above"</code>
-    or
-    <code>"below"</code>
-    depending on the space around the trigger</li>
-  <li><code>verticalPosition</code>: The string with the current vertical
-    position. If you don't provide any or you pass
-    <code>verticalPosition="auto"</code>
-    it will be
-    <code>"above"</code>
-    or
-    <code>"below"</code>
-    depending on the space around the trigger</li>
-  <li><code>matchTriggerWidth</code>: Boolean that express the intention of the
-    developer to make the dropdown have the same width as the trigger</li>
-  <li><code>renderInPlace</code>: Boolean that express if the content will be
-    rendered in place. Useful since very usually the reposition logic must be
-    entirely different</li>
-</ul>
-
-<p>
-  The return value of this function must also be an object with a specific
-  shape:
-  <br />
-  <code>{ horizontalPosition, verticalPosition, style }</code>
-</p>
-
-<ul>
-  <li><code>horizontalPosition</code>: The new value of horizontalPosition</li>
-  <li><code>verticalPosition</code>: The new value of verticalPosition</li>
-  <li><code>style</code>: An object containing the CSS properties that will
-    position the object. It supports
-    <code>top</code>,
-    <code>left</code>,
-    <code>right</code>
-    and
-    <code>width</code></li>
-</ul>
-
-<p>
-  Sounds like a lot, but with an example you will see that it's not really hard.
-  Let's create a dropdown that opens to the right of the trigger, vertically
-  centered with it.
-</p>
-
-<CodeExample @hbs="custom-position-1.hbs" @js="custom-position-1.js">
-  {{component (ensure-safe-component this.customPosition1Component)}}
-</CodeExample>
-
-<p>
-  You can resize the window and scroll and you can see that the content stays
-  just where it should. It will even reposition automatically if the content
-  inside changes thanks to the magic of
-  <code>MutationObservers</code>.
-</p>
-
-<CodeExample @hbs="custom-position-2.hbs" @js="custom-position-2.js">
-  {{component (ensure-safe-component this.customPosition2Component)}}
-</CodeExample>
-
-<p>
-  The key concept that you need to extract is that all the machinery to position
-  the content and reposition when the content, scroll or screen changes is
-  handled by the dropdown, so the only missing piece you have to provide is the
-  function that calculates the cordinates.
-</p>
-
-<div class="doc-page-nav">
-  <LinkTo
-    @route="public-pages.docs.disabled"
-    class="doc-page-nav-link-prev"
-  >&lt; Disabled</LinkTo>
-  <LinkTo
-    @route="public-pages.docs.animations"
-    class="doc-page-nav-link-next"
-  >Animations &gt;</LinkTo>
-</div>
\ No newline at end of file
diff --git a/docs/app/templates/public-pages/docs/disabled.gts b/docs/app/templates/public-pages/docs/disabled.gts
new file mode 100644
index 00000000..045fb83f
--- /dev/null
+++ b/docs/app/templates/public-pages/docs/disabled.gts
@@ -0,0 +1,41 @@
+import CodeExample from 'docs/components/code-example';
+import Disabled1Component from '../../../components/snippets/disabled-1';
+import { LinkTo } from '@ember/routing';
+
+<template>
+  <h1 class="doc-page-title">Disabled</h1>
+
+  <p>
+    If you disable the dropdown, it will not open or close by any mean, mouse,
+    keyboard or touch screen.
+  </p>
+
+  <CodeExample @glimmerTs="disabled-1.gts">
+    <Disabled1Component />
+  </CodeExample>
+
+  <p>
+    Note that being disabled does not prevent the dropdown or any of its
+    sub-components from firing events like
+    <code>onMouseEnter</code>.
+  </p>
+
+  <p>
+    The component takes care by default of usual good practices, removing the
+    <code>tabindex</code>
+    of the trigger and set
+    <code>[aria-disabled="true"]</code>
+    to assist screen readers.
+  </p>
+
+  <div class="doc-page-nav">
+    <LinkTo
+      @route="public-pages.docs.position"
+      class="doc-page-nav-link-prev"
+    >&lt; Position</LinkTo>
+    <LinkTo
+      @route="public-pages.docs.overlays"
+      class="doc-page-nav-link-next"
+    >Overlays &gt;</LinkTo>
+  </div>
+</template>
diff --git a/docs/app/templates/public-pages/docs/disabled.hbs b/docs/app/templates/public-pages/docs/disabled.hbs
deleted file mode 100644
index dd26ac6d..00000000
--- a/docs/app/templates/public-pages/docs/disabled.hbs
+++ /dev/null
@@ -1,35 +0,0 @@
-<h1 class="doc-page-title">Disabled</h1>
-
-<p>
-  If you disable the dropdown, it will not open or close by any mean, mouse,
-  keyboard or touch screen.
-</p>
-
-<CodeExample @hbs="disabled-1.hbs">
-  {{component (ensure-safe-component this.disabled1Component)}}
-</CodeExample>
-
-<p>
-  Note that being disabled does not prevent the dropdown or any of its
-  sub-components from firing events like
-  <code>onMouseEnter</code>.
-</p>
-
-<p>
-  The component takes care by default of usual good practices, removing the
-  <code>tabindex</code>
-  of the trigger and set
-  <code>[aria-disabled="true"]</code>
-  to assist screen readers.
-</p>
-
-<div class="doc-page-nav">
-  <LinkTo
-    @route="public-pages.docs.position"
-    class="doc-page-nav-link-prev"
-  >&lt; Position</LinkTo>
-  <LinkTo
-    @route="public-pages.docs.overlays"
-    class="doc-page-nav-link-next"
-  >Overlays &gt;</LinkTo>
-</div>
\ No newline at end of file
diff --git a/docs/app/templates/public-pages/docs/dropdown-events.gts b/docs/app/templates/public-pages/docs/dropdown-events.gts
new file mode 100644
index 00000000..a6d17d53
--- /dev/null
+++ b/docs/app/templates/public-pages/docs/dropdown-events.gts
@@ -0,0 +1,97 @@
+import CodeExample from '../../../components/code-example';
+import { LinkTo } from '@ember/routing';
+import DropDownEvents1Component from '../../../components/snippets/dropdown-events-1';
+import DropDownEvents2Component from '../../../components/snippets/dropdown-events-2';
+import DropDownEvents3Component from '../../../components/snippets/dropdown-events-3';
+
+<template>
+  <h1 class="doc-page-title">Dropdown events</h1>
+
+  <p>
+    Although the top-level component is tagless, it does fire a few events that
+    you can use to react to changes in the state of the dropdown.
+  </p>
+
+  <p>
+    This has no mystery.
+  </p>
+
+  <h3><code>onOpen(dropdown, event?)</code></h3>
+
+  <p>
+    Pretty self-explanatory. The
+    <code>dropdown</code>
+    argument in the signature is the public API of the component. The
+    <code>event</code>
+    argument will be passed if this event is fired as a consequence of another
+    event (e.g. a click), but will be undefined if it was fired
+    programmatically.
+  </p>
+
+  <p>What kinds of things you can do with this event?</p>
+
+  <p>
+    In general when you want to do something outside the component when this
+    loads. By example, you can delay the loading of some data until the dropdown
+    is opened.
+  </p>
+
+  <CodeExample @glimmerTs="dropdown-events-1.gts">
+    <DropDownEvents1Component />
+  </CodeExample>
+
+  <p>
+    There is something you should know about this hook: If you
+    <code>return false;</code>
+    from it you will prevent the component from opening.
+  </p>
+
+  <p>
+    Let's use this feature along with the public API and event received as
+    aguments to do a nifty trick. We are going to iterate over the example above
+    so we prevent the component from opening, load the users and once loaded we
+    open it.
+  </p>
+
+  <CodeExample @glimmerTs="dropdown-events-2.gts">
+    <DropDownEvents2Component />
+  </CodeExample>
+
+  <p><em><small>For the record, I don't think this is good UX</small></em></p>
+
+  <h3><code>onClose(dropdown, event?)</code></h3>
+
+  <p>
+    Symmetrically, you can perform on action when the dropdown is closed. For
+    example, save the a user selection, and you can also
+    <code>return false</code>
+    to prevent the component from closing.
+  </p>
+
+  <p>
+    Example: Create a dropdown with some checkboxes inside, and don't allow it
+    to close until one checkbox is selected.
+  </p>
+
+  <CodeExample @glimmerTs="dropdown-events-3.gts">
+    <DropDownEvents3Component />
+  </CodeExample>
+
+  <p>Cruel, isn't it?</p>
+
+  <p>
+    Those were the events fired by the top-level component, now let's go deep on
+    the events that are fired by the trigger.
+  </p>
+
+  <div class="doc-page-nav">
+    <LinkTo
+      @route="public-pages.docs.how-to-use-it"
+      class="doc-page-nav-link-prev"
+    >&lt; How to use it</LinkTo>
+    <LinkTo
+      @route="public-pages.docs.trigger-events"
+      class="doc-page-nav-link-next"
+    >Trigger events &gt;</LinkTo>
+  </div>
+</template>
diff --git a/docs/app/templates/public-pages/docs/dropdown-events.hbs b/docs/app/templates/public-pages/docs/dropdown-events.hbs
deleted file mode 100644
index 5312f799..00000000
--- a/docs/app/templates/public-pages/docs/dropdown-events.hbs
+++ /dev/null
@@ -1,88 +0,0 @@
-<h1 class="doc-page-title">Dropdown events</h1>
-
-<p>
-  Although the top-level component is tagless, it does fire a few events that
-  you can use to react to changes in the state of the dropdown.
-</p>
-
-<p>
-  This has no mystery.
-</p>
-
-<h3><code>onOpen(dropdown, event?)</code></h3>
-
-<p>
-  Pretty self-explanatory. The
-  <code>dropdown</code>
-  argument in the signature is the public API of the component. The
-  <code>event</code>
-  argument will be passed if this event is fired as a consequence of another
-  event (e.g. a click), but will be undefined if it was fired programmatically.
-</p>
-
-<p>What kinds of things you can do with this event?</p>
-
-<p>
-  In general when you want to do something outside the component when this
-  loads. By example, you can delay the loading of some data until the dropdown
-  is opened.
-</p>
-
-<CodeExample @hbs="dropdown-events-1.hbs" @js="dropdown-events-1.js">
-  {{component (ensure-safe-component this.dropDownEvents1Component)}}
-</CodeExample>
-
-<p>
-  There is something you should know about this hook: If you
-  <code>return false;</code>
-  from it you will prevent the component from opening.
-</p>
-
-<p>
-  Let's use this feature along with the public API and event received as
-  aguments to do a nifty trick. We are going to iterate over the example above
-  so we prevent the component from opening, load the users and once loaded we
-  open it.
-</p>
-
-<CodeExample @hbs="dropdown-events-2.hbs" @js="dropdown-events-2.js">
-  {{component (ensure-safe-component this.dropDownEvents2Component)}}
-</CodeExample>
-
-<p><em><small>For the record, I don't think this is good UX</small></em></p>
-
-<h3><code>onClose(dropdown, event?)</code></h3>
-
-<p>
-  Symmetrically, you can perform on action when the dropdown is closed. For
-  example, save the a user selection, and you can also
-  <code>return false</code>
-  to prevent the component from closing.
-</p>
-
-<p>
-  Example: Create a dropdown with some checkboxes inside, and don't allow it to
-  close until one checkbox is selected.
-</p>
-
-<CodeExample @hbs="dropdown-events-3.hbs" @js="dropdown-events-3.js">
-  {{component (ensure-safe-component this.dropDownEvents3Component)}}
-</CodeExample>
-
-<p>Cruel, isn't it?</p>
-
-<p>
-  Those were the events fired by the top-level component, now let's go deep on
-  the events that are fired by the trigger.
-</p>
-
-<div class="doc-page-nav">
-  <LinkTo
-    @route="public-pages.docs.how-to-use-it"
-    class="doc-page-nav-link-prev"
-  >&lt; How to use it</LinkTo>
-  <LinkTo
-    @route="public-pages.docs.trigger-events"
-    class="doc-page-nav-link-next"
-  >Trigger events &gt;</LinkTo>
-</div>
\ No newline at end of file
diff --git a/docs/app/templates/public-pages/docs/how-to-use-it.gts b/docs/app/templates/public-pages/docs/how-to-use-it.gts
new file mode 100644
index 00000000..e71ee3ef
--- /dev/null
+++ b/docs/app/templates/public-pages/docs/how-to-use-it.gts
@@ -0,0 +1,121 @@
+import CodeExample from '../../../components/code-example';
+import { LinkTo } from '@ember/routing';
+import HowToUseIt1Component from '../../../components/snippets/how-to-use-it-1';
+import HowToUseIt2Component from '../../../components/snippets/how-to-use-it-2';
+import HowToUseIt3Component from '../../../components/snippets/how-to-use-it-3';
+
+<template>
+  <h1 class="doc-page-title">How to use it</h1>
+
+  <p>
+    This component is built with a technique known as
+    <em>Contextual Components</em>. If you haven't heard of it, check
+    <a
+      href="https://guides.emberjs.com/v2.8.0/components/wrapping-content-in-a-component/#toc_sharing-component-data-with-its-wrapped-content"
+    >the official guides</a>
+    for some background.
+  </p>
+
+  <p>
+    The basic usage is pretty simple. There are no mandatory fields. Just invoke
+    the
+    <code>basic-dropdown</code>
+    component which yields the public API to its block. That top-level component
+    has no markup, just pure behaviour. Once inside the block, the yielded API
+    has two contextual components on it that you can use:
+    <code>trigger</code>
+    and
+    <code>content</code>.
+  </p>
+
+  <p>
+    Go, use it and inspect the DOM. I know it looks ugly, we'll style it later.
+  </p>
+
+  <CodeExample @glimmerTs="how-to-use-it-1.gts">
+    <HowToUseIt1Component />
+  </CodeExample>
+
+  <p>
+    As you've inspected, the markup is very simple.
+  </p>
+  <p>
+    The
+    <code>\{{dd.Trigger}}</code>
+    component generates a simple div with some self-explainatory classes and
+    <code>\{{dd.Content}}</code>
+    doesn't render anything until you open the select.
+  </p>
+
+  <p>
+    Out of the box the component already takes care of most things you need.
+  </p>
+
+  <p>
+    First of all, the component opens when you click on the trigger and closes
+    when you click anywhere else in the page. If you are reading this on a
+    smartphone you can also see that it opens when you tap on the trigger and it
+    already distinguishes proper taps from taps used for scrolling. The dropdown
+    is rendered not next to the trigger, but in a placeholder div in the root of
+    the application and positioned automatically with inline styles.
+  </p>
+
+  <p>
+    Lastly, if you inspect the DOM a second time you can see all the
+    <strong>a11y</strong>
+    machinery in place to make the component accesible. Even the trigger,
+    despite being a div, is focusable as it should be for a good keyboard
+    experience. Also if you have the trigger focus, you can open and close it
+    with the enter or space keys.
+  </p>
+
+  <p>
+    Now let's fix that terrible look. I'll give the dropdown a look and feel
+    inspired by dropdown buttons in bootstrap:
+  </p>
+
+  <CodeExample @glimmerTs="how-to-use-it-2.gts" @css="how-to-use-it-2-css.scss">
+    <HowToUseIt2Component />
+  </CodeExample>
+
+  <p>
+    It just took a little bit of CSS. You could also have just assigned the
+    right classes and reused the styles from the framework (I can't demo that
+    because I don't have bootstrap here).
+  </p>
+
+  <p>
+    I want to stress that when it comes to CSS, the dropdown really doesn't
+    care. Let's make a material-like round button with a round content.
+  </p>
+
+  <CodeExample @glimmerTs="how-to-use-it-3.gts" @css="how-to-use-it-3-css.scss">
+    <HowToUseIt3Component />
+  </CodeExample>
+
+  <p>
+    I got you.
+  </p>
+
+  <p>
+    And this is more or less everything you need to know about styles. Basically
+    there is none, so you can add create your own in CSS or reuse the classes
+    that CSS frameworks give you.
+  </p>
+
+  <p>
+    In the next section we will see the basic action hooks that this component
+    gives you to hook to events like opening and closing and many others.
+  </p>
+
+  <div class="doc-page-nav">
+    <LinkTo
+      @route="public-pages.docs.installation"
+      class="doc-page-nav-link-prev"
+    >&lt; Installation</LinkTo>
+    <LinkTo
+      @route="public-pages.docs.dropdown-events"
+      class="doc-page-nav-link-next"
+    >Dropdown events &gt;</LinkTo>
+  </div>
+</template>
diff --git a/docs/app/templates/public-pages/docs/how-to-use-it.hbs b/docs/app/templates/public-pages/docs/how-to-use-it.hbs
deleted file mode 100644
index f15d2add..00000000
--- a/docs/app/templates/public-pages/docs/how-to-use-it.hbs
+++ /dev/null
@@ -1,113 +0,0 @@
-<h1 class="doc-page-title">How to use it</h1>
-
-<p>
-  This component is built with a technique known as
-  <em>Contextual Components</em>. If you haven't heard of it, check
-  <a
-    href="https://guides.emberjs.com/v2.8.0/components/wrapping-content-in-a-component/#toc_sharing-component-data-with-its-wrapped-content"
-  >the official guides</a>
-  for some background.
-</p>
-
-<p>
-  The basic usage is pretty simple. There are no mandatory fields. Just invoke
-  the
-  <code>basic-dropdown</code>
-  component which yields the public API to its block. That top-level component
-  has no markup, just pure behaviour. Once inside the block, the yielded API has
-  two contextual components on it that you can use:
-  <code>trigger</code>
-  and
-  <code>content</code>.
-</p>
-
-<p>
-  Go, use it and inspect the DOM. I know it looks ugly, we'll style it later.
-</p>
-
-<CodeExample @hbs="how-to-use-it-1.hbs">
-  {{component (ensure-safe-component this.howToUseIt1Component)}}
-</CodeExample>
-
-<p>
-  As you've inspected, the markup is very simple.
-</p>
-<p>
-  The
-  <code>\{{dd.Trigger}}</code>
-  component generates a simple div with some self-explainatory classes and
-  <code>\{{dd.Content}}</code>
-  doesn't render anything until you open the select.
-</p>
-
-<p>
-  Out of the box the component already takes care of most things you need.
-</p>
-
-<p>
-  First of all, the component opens when you click on the trigger and closes
-  when you click anywhere else in the page. If you are reading this on a
-  smartphone you can also see that it opens when you tap on the trigger and it
-  already distinguishes proper taps from taps used for scrolling. The dropdown
-  is rendered not next to the trigger, but in a placeholder div in the root of
-  the application and positioned automatically with inline styles.
-</p>
-
-<p>
-  Lastly, if you inspect the DOM a second time you can see all the
-  <strong>a11y</strong>
-  machinery in place to make the component accesible. Even the trigger, despite
-  being a div, is focusable as it should be for a good keyboard experience. Also
-  if you have the trigger focus, you can open and close it with the enter or
-  space keys.
-</p>
-
-<p>
-  Now let's fix that terrible look. I'll give the dropdown a look and feel
-  inspired by dropdown buttons in bootstrap:
-</p>
-
-<CodeExample @hbs="how-to-use-it-2.hbs" @css="how-to-use-it-2-css.scss">
-  {{component (ensure-safe-component this.howToUseIt2Component)}}
-</CodeExample>
-
-<p>
-  It just took a little bit of CSS. You could also have just assigned the right
-  classes and reused the styles from the framework (I can't demo that because I
-  don't have bootstrap here).
-</p>
-
-<p>
-  I want to stress that when it comes to CSS, the dropdown really doesn't care.
-  Let's make a material-like round button with a round content.
-</p>
-
-<CodeExample @hbs="how-to-use-it-3.hbs" @css="how-to-use-it-3-css.scss">
-  {{component (ensure-safe-component this.howToUseIt3Component)}}
-</CodeExample>
-
-<p>
-  I got you.
-</p>
-
-<p>
-  And this is more or less everything you need to know about styles. Basically
-  there is none, so you can add create your own in CSS or reuse the classes that
-  CSS frameworks give you.
-</p>
-
-<p>
-  In the next section we will see the basic action hooks that this component
-  gives you to hook to events like opening and closing and many others.
-</p>
-
-<div class="doc-page-nav">
-  <LinkTo
-    @route="public-pages.docs.installation"
-    class="doc-page-nav-link-prev"
-  >&lt; Installation</LinkTo>
-  <LinkTo
-    @route="public-pages.docs.dropdown-events"
-    class="doc-page-nav-link-next"
-  >Dropdown events &gt;</LinkTo>
-</div>
\ No newline at end of file
diff --git a/docs/app/templates/public-pages/docs/index.gts b/docs/app/templates/public-pages/docs/index.gts
new file mode 100644
index 00000000..0cec3014
--- /dev/null
+++ b/docs/app/templates/public-pages/docs/index.gts
@@ -0,0 +1,80 @@
+import { LinkTo } from '@ember/routing';
+
+<template>
+  <h1 class="doc-page-title">Overview</h1>
+
+  <p>I'm going to tell you the story of how this dropdown addon was born.</p>
+
+  <p>
+    I was building a select component but I realized that a select is nothing
+    more than a dropdown with some extra stuff on top. And datepickers too. And
+    colorpickers, contextual menus and many other widgets.
+  </p>
+
+  <p>
+    Essentially, any floating box of content that is opened when you interact
+    with a trigger is basically a dropdown. Dropdowns are the foundation to at
+    least half a dozen common UI widgets we use daily, so I decided to shape
+    this addon in a way that was easy to reuse and customize to create those
+    other widgets.
+  </p>
+
+  <p>
+    But if a dropdown is just a floating box activated by a trigger,
+    <em>why would you want to use a third part addon for such a simple thing?</em>
+  </p>
+
+  <p>
+    <strong>Well, there are two kinds of people. Those who think that dropdowns
+      are an easy thing and those who have actually built one.</strong>
+  </p>
+
+  <p>
+    When I transitioned from the first kind to the second I learned a lot of
+    stuff.
+  </p>
+
+  <ul>
+    <li>Absolutely position elements in a performant way using the runloop</li>
+    <li>Overcoming z-index limitations</li>
+    <li>How useful MutationObservers and DOM Events can be</li>
+    <li>Proper detection of taps and touch scroll</li>
+    <li>Animating elements being removed from the screen</li>
+    <li>Chasing memory leaks when global events are not properly removed</li>
+    <li>Accessibility and keyboard navigation</li>
+  </ul>
+
+  <p>
+    After I built the initial version, I started to build other widgets on top
+    and I had to step back a few times and identify where it wasn't flexible
+    enough. This process ended up in a component that distilled the essence of
+    what a dropdown is with as few assumptions as possible.
+  </p>
+
+  <p>
+    I honestly want to save you time and tears. I've been there.
+  </p>
+
+  <p>
+    This component is a
+    <strong>building block</strong>
+    for you to build other components on top, so it prioritizes flexibility and
+    explicitness over succinctness in its API, but still allows allows basic
+    usage out of the box with no ceremony.
+  </p>
+
+  <p>
+    Another thing to note is that this component doesn't have any theme by
+    default, so unless you do something about it, it will look pretty ugly. The
+    few styles it has are only to deal with positioning.
+  </p>
+
+  <p>I hope you like it.</p>
+
+  <div class="doc-page-nav">
+    <LinkTo
+      @route="public-pages.docs.installation"
+      class="doc-page-nav-link-next"
+    >Installation &gt;</LinkTo>
+  </div>
+</template>
diff --git a/docs/app/templates/public-pages/docs/index.hbs b/docs/app/templates/public-pages/docs/index.hbs
deleted file mode 100644
index a73223ff..00000000
--- a/docs/app/templates/public-pages/docs/index.hbs
+++ /dev/null
@@ -1,75 +0,0 @@
-<h1 class="doc-page-title">Overview</h1>
-
-<p>I'm going to tell you the story of how this dropdown addon was born.</p>
-
-<p>
-  I was building a select component but I realized that a select is nothing more
-  than a dropdown with some extra stuff on top. And datepickers too. And
-  colorpickers, contextual menus and many other widgets.
-</p>
-
-<p>
-  Essentially, any floating box of content that is opened when you interact with
-  a trigger is basically a dropdown. Dropdowns are the foundation to at least
-  half a dozen common UI widgets we use daily, so I decided to shape this addon
-  in a way that was easy to reuse and customize to create those other widgets.
-</p>
-
-<p>
-  But if a dropdown is just a floating box activated by a trigger,
-  <em>why would you want to use a third part addon for such a simple thing?</em>
-</p>
-
-<p>
-  <strong>Well, there are two kinds of people. Those who think that dropdowns
-    are an easy thing and those who have actually built one.</strong>
-</p>
-
-<p>
-  When I transitioned from the first kind to the second I learned a lot of
-  stuff.
-</p>
-
-<ul>
-  <li>Absolutely position elements in a performant way using the runloop</li>
-  <li>Overcoming z-index limitations</li>
-  <li>How useful MutationObservers and DOM Events can be</li>
-  <li>Proper detection of taps and touch scroll</li>
-  <li>Animating elements being removed from the screen</li>
-  <li>Chasing memory leaks when global events are not properly removed</li>
-  <li>Accessibility and keyboard navigation</li>
-</ul>
-
-<p>
-  After I built the initial version, I started to build other widgets on top and
-  I had to step back a few times and identify where it wasn't flexible enough.
-  This process ended up in a component that distilled the essence of what a
-  dropdown is with as few assumptions as possible.
-</p>
-
-<p>
-  I honestly want to save you time and tears. I've been there.
-</p>
-
-<p>
-  This component is a
-  <strong>building block</strong>
-  for you to build other components on top, so it prioritizes flexibility and
-  explicitness over succinctness in its API, but still allows allows basic usage
-  out of the box with no ceremony.
-</p>
-
-<p>
-  Another thing to note is that this component doesn't have any theme by
-  default, so unless you do something about it, it will look pretty ugly. The
-  few styles it has are only to deal with positioning.
-</p>
-
-<p>I hope you like it.</p>
-
-<div class="doc-page-nav">
-  <LinkTo
-    @route="public-pages.docs.installation"
-    class="doc-page-nav-link-next"
-  >Installation &gt;</LinkTo>
-</div>
\ No newline at end of file
diff --git a/docs/app/templates/public-pages/docs/installation.gts b/docs/app/templates/public-pages/docs/installation.gts
new file mode 100644
index 00000000..48e1f44f
--- /dev/null
+++ b/docs/app/templates/public-pages/docs/installation.gts
@@ -0,0 +1,103 @@
+import CodeExample from '../../../components/code-example';
+import { LinkTo } from '@ember/routing';
+
+<template>
+  <h1 class="doc-page-title">Installation</h1>
+
+  <p>
+    Ember-basic-dropdown is distributed as an
+    <a href="https://www.ember-cli.com/">Ember CLI</a>
+    addon. To install it, run the following command in your ember project
+    directory
+  </p>
+
+  <p>
+    <div class="code-block">
+      <pre>$ ember install ember-basic-dropdown</pre>
+    </div>
+  </p>
+
+  <p>
+    When installing this through
+    <code>ember install</code>
+    the addon will add the necessary snippet above automatically in your app.
+  </p>
+
+  <h3>Manual installation</h3>
+
+  <p>
+    After the installation you need to add the following lines somewhere in your
+    templates where you want to render the dropdown content into e.g. your
+    <code>application.hbs</code>. In this component will be rendered the
+    dropdown content.
+  </p>
+
+  <CodeExample
+    @glimmerTs="installation-0.gts"
+    @showResult={{false}}
+    @activeTab="glimmer-ts"
+  />
+
+  <p>
+    If you use vanilla CSS, you need to add the following line into
+    <code>app.js</code>
+    or in any route/controller/component
+    <code>.js/.ts</code>
+    file:
+  </p>
+
+  <CodeExample @js="installation-1.js" @showResult={{false}} />
+
+  <p>
+    Instead of adding the styling in an
+    <code>.js</code>
+    file and depending from your build config you can also add the css in any
+    template/component css file by using following line
+  </p>
+
+  <CodeExample
+    @css="installation-1.css.txt"
+    @showResult={{false}}
+    @activeTab="css"
+  />
+
+  <p>
+    However, if you are using SASS or LESS you need to add an import statement
+    to your styles.
+  </p>
+
+  <CodeExample
+    @scss="installation-1.scss"
+    @showResult={{false}}
+    @activeTab="scss"
+  />
+
+  <p>
+    If you are using LESS there is also necessary to register the
+    <code>paths</code>
+    in
+    <code>lessOptions</code>
+  </p>
+
+  <CodeExample @js="installation-2-snippet.js" @showResult={{false}} />
+
+  <p>
+    The styles of the addon are
+    <strong>very minimal</strong>
+    and deal mostly with positioning. You can tweak a couple things but we'll
+    get to that later.
+  </p>
+
+  <p>
+    Now let's learn the API of the component.
+  </p>
+
+  <div class="doc-page-nav">
+    <LinkTo @route="public-pages.docs.index" class="doc-page-nav-link-prev">&lt;
+      Overview</LinkTo>
+    <LinkTo
+      @route="public-pages.docs.how-to-use-it"
+      class="doc-page-nav-link-next"
+    >How to use it &gt;</LinkTo>
+  </div>
+</template>
diff --git a/docs/app/templates/public-pages/docs/installation.hbs b/docs/app/templates/public-pages/docs/installation.hbs
deleted file mode 100644
index e86eef7d..00000000
--- a/docs/app/templates/public-pages/docs/installation.hbs
+++ /dev/null
@@ -1,93 +0,0 @@
-<h1 class="doc-page-title">Installation</h1>
-
-<p>
-  Ember-basic-dropdown is distributed as an
-  <a href="https://www.ember-cli.com/">Ember CLI</a>
-  addon. To install it, run the following command in your ember project
-  directory
-</p>
-
-<div class="highlight">
-  <pre><code class="language-text" data-lang="text">$ ember install
-      ember-basic-dropdown</code></pre>
-</div>
-
-<p>
-  When installing this through
-  <code>ember install</code>
-  the addon will add the necessary snippet above automatically in your app.
-</p>
-
-<h3>Manual installation</h3>
-
-<p>
-  After the installation you need to add the following lines somewhere in your
-  templates where you want to render the dropdown content into e.g. your
-  <code>application.hbs</code>. In this component will be rendered the dropdown
-  content.
-</p>
-
-<CodeBlock @language="hbs" @code="<BasicDropdownWormhole />" />
-
-<p>
-  If you use vanilla CSS, you need to add the following line into
-  <code>app.js</code>
-  or in any route/controller/component
-  <code>.js/.ts</code>
-  file:
-</p>
-
-<CodeBlock @language="js" @code="import 'ember-basic-dropdown/styles';" />
-
-<p>
-  Instead of adding the styling in an
-  <code>.js</code>
-  file and depending from your build config you can also add the css in any
-  template/component css file by using following line
-</p>
-
-{{! template-lint-disable no-potential-path-strings }}
-<CodeBlock
-  @language="css"
-  @code="@import 'ember-basic-dropdown/vendor/ember-basic-dropdown.css';"
-/>
-
-<p>
-  However, if you are using SASS or LESS you need to add an import statement to
-  your styles.
-</p>
-
-{{#let (get-code-snippet "installation-1.scss") as |snippet|}}
-  <CodeBlock @language="scss" @code={{snippet.source}} />
-{{/let}}
-
-<p>
-  If you are using LESS there is also necessary to register the
-  <code>paths</code>
-  in
-  <code>lessOptions</code>
-</p>
-
-{{#let (get-code-snippet "installation-2.js") as |snippet|}}
-  <CodeBlock @language="js" @code={{snippet.source}} />
-{{/let}}
-
-<p>
-  The styles of the addon are
-  <strong>very minimal</strong>
-  and deal mostly with positioning. You can tweak a couple things but we'll get
-  to that later.
-</p>
-
-<p>
-  Now let's learn the API of the component.
-</p>
-
-<div class="doc-page-nav">
-  <LinkTo @route="public-pages.docs.index" class="doc-page-nav-link-prev">&lt;
-    Overview</LinkTo>
-  <LinkTo
-    @route="public-pages.docs.how-to-use-it"
-    class="doc-page-nav-link-next"
-  >How to use it &gt;</LinkTo>
-</div>
\ No newline at end of file
diff --git a/docs/app/templates/public-pages/docs/migrate-7-0-to-8-0.gts b/docs/app/templates/public-pages/docs/migrate-7-0-to-8-0.gts
new file mode 100644
index 00000000..e2cc73fd
--- /dev/null
+++ b/docs/app/templates/public-pages/docs/migrate-7-0-to-8-0.gts
@@ -0,0 +1,50 @@
+import CodeExample from '../../../components/code-example';
+import { LinkTo } from '@ember/routing';
+
+<template>
+  <h1 class="doc-page-title">Migrate from 7.0 to 8.0</h1>
+
+  <p>The addon is now a
+    <a href="https://rfcs.emberjs.com/id/0507-embroider-v2-package-format/">V2
+      Embroider Addon</a>. The following changes are necessary:</p>
+
+  <ul>
+    <li>
+      <p>Add following line to your <code>application.hbs</code></p>
+      <CodeExample
+        @glimmerTs="installation-0.gts"
+        @showResult={{false}}
+        @activeTab="glimmer-ts"
+      />
+    </li>
+    <li>
+      <p>Vanilla JS: If you have used vanilla js you must now import the css in
+        <code>app.js</code>
+        manually like (for other css adding examples see under installation)</p>
+      <CodeExample @js="installation-1.js" @showResult={{false}} />
+    </li>
+    <li>
+      <p>LESS: If you are using with less you need to add
+        <code>lessOptions</code>
+        into your
+        <code>ember-cli-build.js</code>
+        file</p>
+      <CodeExample @js="installation-2-snippet.js" @showResult={{false}} />
+    </li>
+    <li>
+      <p>Typescript: There were added / modified / fixed the typescript
+        declarations. This could be braking for consumer app</p>
+    </li>
+  </ul>
+
+  <div class="doc-page-nav">
+    <LinkTo
+      @route="public-pages.docs.animations"
+      class="doc-page-nav-link-prev"
+    >&lt; Animations</LinkTo>
+    <LinkTo
+      @route="public-pages.docs.test-helpers"
+      class="doc-page-nav-link-next"
+    >Test helpers &gt;</LinkTo>
+  </div>
+</template>
diff --git a/docs/app/templates/public-pages/docs/migrate-7-0-to-8-0.hbs b/docs/app/templates/public-pages/docs/migrate-7-0-to-8-0.hbs
deleted file mode 100644
index be3a7ad6..00000000
--- a/docs/app/templates/public-pages/docs/migrate-7-0-to-8-0.hbs
+++ /dev/null
@@ -1,43 +0,0 @@
-<h1 class="doc-page-title">Migrate from 7.0 to 8.0</h1>
-
-<p>The addon is now a
-  <a href="https://rfcs.emberjs.com/id/0507-embroider-v2-package-format/">V2
-    Embroider Addon</a>. The following changes are necessary:</p>
-
-<ul>
-  <li>
-    <p>Add following line to your <code>application.hbs</code></p>
-    <CodeBlock @language="hbs" @code="<BasicDropdownWormhole />" />
-  </li>
-  <li>
-    <p>Vanilla JS: If you have used vanilla js you must now import the css in
-      <code>app.js</code>
-      manually like (for other css adding examples see under installation)</p>
-    <CodeBlock @language="js" @code="import 'ember-basic-dropdown/styles';" />
-  </li>
-  <li>
-    <p>LESS: If you are using with less you need to add
-      <code>lessOptions</code>
-      into your
-      <code>ember-cli-build.js</code>
-      file</p>
-    {{#let (get-code-snippet "installation-2.js") as |snippet|}}
-      <CodeBlock @language="js" @code={{snippet.source}} />
-    {{/let}}
-  </li>
-  <li>
-    <p>Typescript: There were added / modified / fixed the typescript
-      declarations. This could be braking for consumer app</p>
-  </li>
-</ul>
-
-<div class="doc-page-nav">
-  <LinkTo
-    @route="public-pages.docs.animations"
-    class="doc-page-nav-link-prev"
-  >&lt; Animations</LinkTo>
-  <LinkTo
-    @route="public-pages.docs.test-helpers"
-    class="doc-page-nav-link-next"
-  >Test helpers &gt;</LinkTo>
-</div>
\ No newline at end of file
diff --git a/docs/app/templates/public-pages/docs/overlays.gts b/docs/app/templates/public-pages/docs/overlays.gts
new file mode 100644
index 00000000..98914087
--- /dev/null
+++ b/docs/app/templates/public-pages/docs/overlays.gts
@@ -0,0 +1,53 @@
+import CodeExample from '../../../components/code-example';
+import { LinkTo } from '@ember/routing';
+import Overlays1Component from '../../../components/snippets/overlays-1';
+
+<template>
+  <h1 class="doc-page-title">Overlays</h1>
+
+  <p>
+    By default the dropdown renders floating above the rest of your page but it
+    doesn't prevent the user from clicking on any other item. Overlays can fix
+    that and make dropdowns look cooler.
+  </p>
+
+  <CodeExample @glimmerTs="overlays-1.gts">
+    <Overlays1Component />
+  </CodeExample>
+
+  <p>
+    What do you have to know:
+  </p>
+
+  <ul>
+    <li>
+      By default overlays have a semitransparent black background, but you can
+      change that using the
+      <code>$ember-basic-dropdown-overlay-background</code>
+      SASS variable or target the
+      <code>.ember-basic-dropdown-overlay</code>
+    </li>
+    <li>
+      By default overlays have
+      <code>pointer-events: none</code>, so it is transparent to clicks but you
+      can change that using the
+      <code>$ember-basic-dropdown-overlay-pointer-events</code>
+      SASS variable or target the same class.
+    </li>
+  </ul>
+
+  <p>
+    In the next section we'll talk more how to customize the styles.
+  </p>
+
+  <div class="doc-page-nav">
+    <LinkTo
+      @route="public-pages.docs.position"
+      class="doc-page-nav-link-prev"
+    >&lt; Disabled</LinkTo>
+    <LinkTo
+      @route="public-pages.docs.styles"
+      class="doc-page-nav-link-next"
+    >Styles &gt;</LinkTo>
+  </div>
+</template>
diff --git a/docs/app/templates/public-pages/docs/overlays.hbs b/docs/app/templates/public-pages/docs/overlays.hbs
deleted file mode 100644
index c3c9a33f..00000000
--- a/docs/app/templates/public-pages/docs/overlays.hbs
+++ /dev/null
@@ -1,47 +0,0 @@
-<h1 class="doc-page-title">Overlays</h1>
-
-<p>
-  By default the dropdown renders floating above the rest of your page but it
-  doesn't prevent the user from clicking on any other item. Overlays can fix
-  that and make dropdowns look cooler.
-</p>
-
-<CodeExample @hbs="overlays-1.hbs">
-  {{component (ensure-safe-component this.overlays1Component)}}
-</CodeExample>
-
-<p>
-  What do you have to know:
-</p>
-
-<ul>
-  <li>
-    By default overlays have a semitransparent black background, but you can
-    change that using the
-    <code>$ember-basic-dropdown-overlay-background</code>
-    SASS variable or target the
-    <code>.ember-basic-dropdown-overlay</code>
-  </li>
-  <li>
-    By default overlays have
-    <code>pointer-events: none</code>, so it is transparent to clicks but you
-    can change that using the
-    <code>$ember-basic-dropdown-overlay-pointer-events</code>
-    SASS variable or target the same class.
-  </li>
-</ul>
-
-<p>
-  In the next section we'll talk more how to customize the styles.
-</p>
-
-<div class="doc-page-nav">
-  <LinkTo
-    @route="public-pages.docs.position"
-    class="doc-page-nav-link-prev"
-  >&lt; Disabled</LinkTo>
-  <LinkTo
-    @route="public-pages.docs.styles"
-    class="doc-page-nav-link-next"
-  >Styles &gt;</LinkTo>
-</div>
\ No newline at end of file
diff --git a/docs/app/templates/public-pages/docs/position.gts b/docs/app/templates/public-pages/docs/position.gts
new file mode 100644
index 00000000..4b9a3e27
--- /dev/null
+++ b/docs/app/templates/public-pages/docs/position.gts
@@ -0,0 +1,131 @@
+import CodeExample from '../../../components/code-example';
+import { LinkTo } from '@ember/routing';
+import Position1Component from '../../../components/snippets/position-1';
+import Position2Component from '../../../components/snippets/position-2';
+import Position3Component from '../../../components/snippets/position-3';
+
+<template>
+  <h1 class="doc-page-title">Position</h1>
+
+  <p>
+    The number one thing that you will want to customize in a dropdown is where
+    the floating content will be positioned in relation to the trigger.
+  </p>
+
+  <h3><code>horizontalPosition / verticalPosition</code></h3>
+
+  <p>
+    Ember Basic Dropdown comes with a nice set of defaults. The rules are as
+    follow:
+  </p>
+
+  <ul>
+    <li>
+      The
+      <code>&lt;dd.Content&gt;</code>
+      has not pre-defined size, so it will adapt to the size its childs.
+    </li>
+    <li>
+      The dropdown's content is positioned below the trigger, unless there is
+      not enough space to fit it, in which case it is positioned above it.
+    </li>
+    <li>
+      The content's left border will be aligned with the trigger's left border
+      and content will flow towards the right.
+    </li>
+    <li>
+      If there isn't enough size towards the right to fit the content but there
+      is enough room to the left, the right border of the content will align
+      with the right border of the trigger and it will grow towards the left.
+    </li>
+    <li>
+      All the rules above are re-checked every time the content of the dropdown
+      changes, the browser is resized or the orientation of the device changes.
+    </li>
+  </ul>
+
+  <p>This sounds like a lot, but with an example it will be crystal clear.</p>
+
+  <CodeExample @glimmerTs="position-1.gts">
+    <Position1Component />
+  </CodeExample>
+
+  <p>
+    In this example above I'm using the options
+    <code>verticalPosition</code>
+    and
+    <code>horizontalPosition</code>
+    to override the default behaviour.
+  </p>
+
+  <p>
+    The default value for both options is
+    <code>auto</code>, but you can pass
+    <code>verticalPosition=above|below</code>
+    and
+    <code>horizontalPosition=auto-right|right|center|left</code>.
+  </p>
+
+  <p>Narrow the window of the browser and play with scroll to see the automatic
+    positioning in action.</p>
+
+  <h3><code>renderInPlace</code></h3>
+
+  <p>
+    Although by default the component renders the content in the root of the app
+    and positions it absolutely, there are some situations where you want the
+    content to be
+    <em>physically</em>
+    next to the trigger.
+  </p>
+
+  <p>
+    To do so, pass
+    <code>renderInPlace=true</code>
+    to the component. Inspect the DOM of the next example to see the difference.
+  </p>
+
+  <CodeExample @glimmerTs="position-2.gts">
+    <Position2Component />
+  </CodeExample>
+
+  <p>
+    Please note that when rendering the content in place, the vertical position
+    will not automatically detect the best position based on the space around
+    the trigger. You have to explicitly pass
+    <code>verticalPosition="above"</code>
+    to render it over the trigger.
+  </p>
+
+  <h3><code>matchTriggerWidth</code></h3>
+
+  <p>
+    There is a few widgets in which the width of the floating box has to match
+    the width of the trigger design reasons. Since this is common enough, there
+    is an option to enable this behaviour.
+  </p>
+
+  <CodeExample @glimmerTs="position-3.gts">
+    <Position3Component />
+  </CodeExample>
+
+  <p>
+    In the section about
+    <a href="/docs/custom-position">Custom Position</a>
+    strategies we will see how to totally customize how the dropdown is
+    positioned by passing it a function. If you do so the options in this
+    section will not work unless your function, which will receive those
+    options, honors them.
+  </p>
+
+  <div class="doc-page-nav">
+    <LinkTo
+      @route="public-pages.docs.trigger-events"
+      class="doc-page-nav-link-prev"
+    >&lt; Trigger events</LinkTo>
+    <LinkTo
+      @route="public-pages.docs.disabled"
+      class="doc-page-nav-link-next"
+    >Disabled &gt;</LinkTo>
+  </div>
+</template>
diff --git a/docs/app/templates/public-pages/docs/position.hbs b/docs/app/templates/public-pages/docs/position.hbs
deleted file mode 100644
index 5582ef66..00000000
--- a/docs/app/templates/public-pages/docs/position.hbs
+++ /dev/null
@@ -1,122 +0,0 @@
-<h1 class="doc-page-title">Position</h1>
-
-<p>
-  The number one thing that you will want to customize in a dropdown is where
-  the floating content will be positioned in relation to the trigger.
-</p>
-
-<h3><code>horizontalPosition / verticalPosition</code></h3>
-
-<p>
-  Ember Basic Dropdown comes with a nice set of defaults. The rules are as
-  follow:
-</p>
-
-<ul>
-  <li>
-    The
-    <code>&lt;dd.Content&gt;</code>
-    has not pre-defined size, so it will adapt to the size its childs.
-  </li>
-  <li>
-    The dropdown's content is positioned below the trigger, unless there is not
-    enough space to fit it, in which case it is positioned above it.
-  </li>
-  <li>
-    The content's left border will be aligned with the trigger's left border and
-    content will flow towards the right.
-  </li>
-  <li>
-    If there isn't enough size towards the right to fit the content but there is
-    enough room to the left, the right border of the content will align with the
-    right border of the trigger and it will grow towards the left.
-  </li>
-  <li>
-    All the rules above are re-checked every time the content of the dropdown
-    changes, the browser is resized or the orientation of the device changes.
-  </li>
-</ul>
-
-<p>This sounds like a lot, but with an example it will be crystal clear.</p>
-
-<CodeExample @hbs="position-1.hbs" @js="position-1.js">
-  {{component (ensure-safe-component this.position1Component)}}
-</CodeExample>
-
-<p>
-  In this example above I'm using the options
-  <code>verticalPosition</code>
-  and
-  <code>horizontalPosition</code>
-  to override the default behaviour.
-</p>
-
-<p>
-  The default value for both options is
-  <code>auto</code>, but you can pass
-  <code>verticalPosition=above|below</code>
-  and
-  <code>horizontalPosition=auto-right|right|center|left</code>.
-</p>
-
-<p>Narrow the window of the browser and play with scroll to see the automatic
-  positioning in action.</p>
-
-<h3><code>renderInPlace</code></h3>
-
-<p>
-  Although by default the component renders the content in the root of the app
-  and positions it absolutely, there are some situations where you want the
-  content to be
-  <em>physically</em>
-  next to the trigger.
-</p>
-
-<p>
-  To do so, pass
-  <code>renderInPlace=true</code>
-  to the component. Inspect the DOM of the next example to see the difference.
-</p>
-
-<CodeExample @hbs="position-2.hbs">
-  {{component (ensure-safe-component this.position2Component)}}
-</CodeExample>
-
-<p>
-  Please note that when rendering the content in place, the vertical position
-  will not automatically detect the best position based on the space around the
-  trigger. You have to explicitly pass
-  <code>verticalPosition="above"</code>
-  to render it over the trigger.
-</p>
-
-<h3><code>matchTriggerWidth</code></h3>
-
-<p>
-  There is a few widgets in which the width of the floating box has to match the
-  width of the trigger design reasons. Since this is common enough, there is an
-  option to enable this behaviour.
-</p>
-
-<CodeExample @hbs="position-3.hbs">
-  {{component (ensure-safe-component this.position3Component)}}
-</CodeExample>
-
-<p>
-  In the section about
-  <a href="/docs/custom-position">Custom Position</a>
-  strategies we will see how to totally customize how the dropdown is positioned
-  by passing it a function. If you do so the options in this section will not
-  work unless your function, which will receive those options, honors them.
-</p>
-
-<div class="doc-page-nav">
-  <LinkTo
-    @route="public-pages.docs.trigger-events"
-    class="doc-page-nav-link-prev"
-  >&lt; Trigger events</LinkTo>
-  <LinkTo
-    @route="public-pages.docs.disabled"
-    class="doc-page-nav-link-next"
-  >Disabled &gt;</LinkTo>
-</div>
\ No newline at end of file
diff --git a/docs/app/templates/public-pages/docs/styles.gts b/docs/app/templates/public-pages/docs/styles.gts
new file mode 100644
index 00000000..8df723bc
--- /dev/null
+++ b/docs/app/templates/public-pages/docs/styles.gts
@@ -0,0 +1,49 @@
+import { LinkTo } from '@ember/routing';
+import CodeExample from '../../../components/code-example';
+
+<template>
+  <h1 class="doc-page-title">Styles</h1>
+
+  <p>
+    Since this component doesn't any visual theme, you can apply styles to it
+    just with plain CSS or even adding the classes your favourite CSS framework
+    gives you.
+  </p>
+
+  <p>
+    If don't use any css pre-processor this is all. If you do use SASS or LESS,
+    the addon will know it and will have to
+    <code>@import</code>
+    the styles explicitly. This gives you the chance to set a few variables that
+    Ember Basic Dropdown will use.
+  </p>
+
+  <p>
+    There is only four variables you can tweak (Sass syntax)
+  </p>
+
+  <CodeExample @scss="styles-1.scss" @showResult={{false}} @activeTab="scss" />
+
+  <p>
+    If by example you want to change the colour of the overlay to be blue, you
+    could do this in your
+    <code>app.scss</code>/<code>app.less</code>.
+  </p>
+
+  <CodeExample @scss="styles-2.scss" @showResult={{false}} @activeTab="scss" />
+
+  <p>
+    In the next sections we'll give in more involved customizations.
+  </p>
+
+  <div class="doc-page-nav">
+    <LinkTo
+      @route="public-pages.docs.overlays"
+      class="doc-page-nav-link-prev"
+    >&lt; Overlays</LinkTo>
+    <LinkTo
+      @route="public-pages.docs.custom-position"
+      class="doc-page-nav-link-next"
+    >Custom position &gt;</LinkTo>
+  </div>
+</template>
diff --git a/docs/app/templates/public-pages/docs/styles.hbs b/docs/app/templates/public-pages/docs/styles.hbs
deleted file mode 100644
index 3b9990bb..00000000
--- a/docs/app/templates/public-pages/docs/styles.hbs
+++ /dev/null
@@ -1,48 +0,0 @@
-<h1 class="doc-page-title">Styles</h1>
-
-<p>
-  Since this component doesn't any visual theme, you can apply styles to it just
-  with plain CSS or even adding the classes your favourite CSS framework gives
-  you.
-</p>
-
-<p>
-  If don't use any css pre-processor this is all. If you do use SASS or LESS,
-  the addon will know it and will have to
-  <code>@import</code>
-  the styles explicitly. This gives you the chance to set a few variables that
-  Ember Basic Dropdown will use.
-</p>
-
-<p>
-  There is only four variables you can tweak (Sass syntax)
-</p>
-
-{{#let (get-code-snippet "styles-1.scss") as |snippet|}}
-  <CodeBlock @language="scss" @code={{snippet.source}} />
-{{/let}}
-
-<p>
-  If by example you want to change the colour of the overlay to be blue, you
-  could do this in your
-  <code>app.scss</code>/<code>app.less</code>.
-</p>
-
-{{#let (get-code-snippet "styles-2.scss") as |snippet|}}
-  <CodeBlock @language="scss" @code={{snippet.source}} />
-{{/let}}
-
-<p>
-  In the next sections we'll give in more involved customizations.
-</p>
-
-<div class="doc-page-nav">
-  <LinkTo
-    @route="public-pages.docs.overlays"
-    class="doc-page-nav-link-prev"
-  >&lt; Overlays</LinkTo>
-  <LinkTo
-    @route="public-pages.docs.custom-position"
-    class="doc-page-nav-link-next"
-  >Custom position &gt;</LinkTo>
-</div>
\ No newline at end of file
diff --git a/docs/app/templates/public-pages/docs/test-helpers.gts b/docs/app/templates/public-pages/docs/test-helpers.gts
new file mode 100644
index 00000000..b85a06d4
--- /dev/null
+++ b/docs/app/templates/public-pages/docs/test-helpers.gts
@@ -0,0 +1,60 @@
+import { LinkTo } from '@ember/routing';
+import CodeExample from '../../../components/code-example';
+
+<template>
+  <h1 class="doc-page-title">Test helpers</h1>
+
+  <br />
+
+  <p>
+    Ember Basic Dropdown bundles some handy test helpers (<code
+    >clickDropdown</code>
+    and
+    <code>tapDropdown</code>) that make it easier to simulate user interaction
+    in acceptance tests.
+  </p>
+
+  <p>
+    You can just have to import them at the top of your tests and call them
+    preceded by
+    <code>await</code>.
+  </p>
+
+  <CodeExample @js="test-helpers-1-js-snippet.js" @showResult={{false}} />
+
+  <h3><code>clickTrigger(scope = null, eventOptions)</code></h3>
+
+  <p>
+    Simulates a click to open or close the dropdown. As all integration test
+    helpers is already runloop aware, so you don't need to wrap it in
+    <code>Ember.run</code>.
+  </p>
+
+  <p>
+    In case there is more than one dropdown rendered at the same time you can
+    pass a string with the scope to trigger it over the desired one.
+  </p>
+
+  <CodeExample @js="test-helpers-2-js-snippet.js" @showResult={{false}} />
+
+  <h3><code>tapTrigger(scope = null, eventOptions)</code></h3>
+
+  <p>
+    Identical to
+    <code>clickTrigger</code>
+    but simulates a tap instead.
+  </p>
+
+  <CodeExample @js="test-helpers-3-js-snippet.js" @showResult={{false}} />
+
+  <div class="doc-page-nav">
+    <LinkTo
+      @route="public-pages.docs.migrate-7-0-to-8-0"
+      class="doc-page-nav-link-prev"
+    >&lt; Migrate from 7.0 to 8.0</LinkTo>
+    <LinkTo
+      @route="public-pages.docs.api-reference"
+      class="doc-page-nav-link-next"
+    >API reference &gt;</LinkTo>
+  </div>
+</template>
diff --git a/docs/app/templates/public-pages/docs/test-helpers.hbs b/docs/app/templates/public-pages/docs/test-helpers.hbs
deleted file mode 100644
index 6b59cfe1..00000000
--- a/docs/app/templates/public-pages/docs/test-helpers.hbs
+++ /dev/null
@@ -1,61 +0,0 @@
-<h1 class="doc-page-title">Test helpers</h1>
-
-<br />
-
-<p>
-  Ember Basic Dropdown bundles some handy test helpers (<code
-  >clickDropdown</code>
-  and
-  <code>tapDropdown</code>) that make it easier to simulate user interaction in
-  acceptance tests.
-</p>
-
-<p>
-  You can just have to import them at the top of your tests and call them
-  preceded by
-  <code>await</code>.
-</p>
-
-{{#let (get-code-snippet "test-helpers-1-js.js") as |snippet|}}
-  <CodeBlock @language="js" @code={{snippet.source}} />
-{{/let}}
-
-<h3><code>clickTrigger(scope = null, eventOptions)</code></h3>
-
-<p>
-  Simulates a click to open or close the dropdown. As all integration test
-  helpers is already runloop aware, so you don't need to wrap it in
-  <code>Ember.run</code>.
-</p>
-
-<p>
-  In case there is more than one dropdown rendered at the same time you can pass
-  a string with the scope to trigger it over the desired one.
-</p>
-
-{{#let (get-code-snippet "test-helpers-2-js.js") as |snippet|}}
-  <CodeBlock @language="js" @code={{snippet.source}} />
-{{/let}}
-
-<h3><code>tapTrigger(scope = null, eventOptions)</code></h3>
-
-<p>
-  Identical to
-  <code>clickTrigger</code>
-  but simulates a tap instead.
-</p>
-
-{{#let (get-code-snippet "test-helpers-3-js.js") as |snippet|}}
-  <CodeBlock @language="js" @code={{snippet.source}} />
-{{/let}}
-
-<div class="doc-page-nav">
-  <LinkTo
-    @route="public-pages.docs.migrate-7-0-to-8-0"
-    class="doc-page-nav-link-prev"
-  >&lt; Migrate from 7.0 to 8.0</LinkTo>
-  <LinkTo
-    @route="public-pages.docs.api-reference"
-    class="doc-page-nav-link-next"
-  >API reference &gt;</LinkTo>
-</div>
\ No newline at end of file
diff --git a/docs/app/templates/public-pages/docs/trigger-events.gts b/docs/app/templates/public-pages/docs/trigger-events.gts
new file mode 100644
index 00000000..d637ef88
--- /dev/null
+++ b/docs/app/templates/public-pages/docs/trigger-events.gts
@@ -0,0 +1,160 @@
+import { LinkTo } from '@ember/routing';
+import CodeExample from '../../../components/code-example';
+import TriggerEvents0Component from '../../../components/snippets/trigger-events-0';
+import TriggerEvents1Component from '../../../components/snippets/trigger-events-1';
+import TriggerEvents2Component from '../../../components/snippets/trigger-events-2';
+import TriggerEvents3Component from '../../../components/snippets/trigger-events-3';
+import TriggerEvents4Component from '../../../components/snippets/trigger-events-4';
+
+<template>
+  <h1 class="doc-page-title">Trigger events</h1>
+
+  <p>
+    The trigger is the component in charge of opening and closing the dropdown
+    (although it also closes if you click outside it). By default the event that
+    to which the trigger reacts is the
+    <code>click</code>
+    event.
+  </p>
+
+  <p>
+    You can change that passing the
+    <code>eventType="mousedown"</code>
+    to the trigger. Check below for both approaches. The difference is subtle.
+  </p>
+
+  <CodeExample @glimmerTs="trigger-events-0.gts">
+    <TriggerEvents0Component />
+  </CodeExample>
+
+  <p>
+    This does not affect to the behavior of the dropdown on touch devices. On
+    mobile or tablets the dropdown automatically depends on the
+    <code>"touchend"</code>
+    event.
+  </p>
+
+  <h2>Event handlers</h2>
+
+  <p>
+    As with any regular HTML element, you can attach events to the trigger using
+    the
+    <code>\{{on}}</code>
+    element modifier. The events you subscribe to using this approach will aways
+    run before the default events that this component attaches, giving you a
+    chance to prevent the default behavior by calling
+    <code>event.stopImmediatePropagation()</code>.
+  </p>
+
+  <p>
+    What can you do with this? Let's see some examples.
+  </p>
+
+  <h3><code>\{{on "keydown"}}</code></h3>
+
+  <p>
+    One real world situation where I found this to be necessary, is when you
+    want to open the dropdown with a key that usually does not open it, like by
+    example the arrow keys.
+  </p>
+
+  <CodeExample @glimmerTs="trigger-events-1.gts">
+    <TriggerEvents1Component />
+  </CodeExample>
+
+  <p>
+    As with any other event, calling
+    <code>e.stopImmediatePropagation()</code>
+    will stop the default handler from running, so you can use this action to
+    prevent the
+    <kbd>space</kbd>,
+    <kbd>enter</kbd>
+    and
+    <kbd>esc</kbd>
+    keys from doing what they do by default.
+  </p>
+
+  <h3><code>\{{on "click"}}</code></h3>
+
+  <p>
+    The
+    <code>click</code>
+    event is the one that usually opens the dropdown, but you can pass your own
+    function.
+  </p>
+
+  <p>
+    Good examples of this are preventing the component from opening with the
+    mouse and/or react in some way to those attempts.
+  </p>
+
+  <CodeExample @glimmerTs="trigger-events-2.gts">
+    <TriggerEvents2Component />
+  </CodeExample>
+
+  <h3><code>\{{on "touchend"}}</code></h3>
+
+  <p>
+    Exactly identical to
+    <code>\{{on "click"}}</code>
+    but for touch screens. I'm not even going to create another example.
+  </p>
+
+  <h3><code>\{{on "mouseenter"}} / \{{on "mouseleave"}}</code></h3>
+
+  <p>
+    I use this event to open the dropdown when you hover it and close it when
+    you leave but you can really use it a lot more.
+  </p>
+
+  <p>
+    By example, imagine that a dropdown is disabled and you want to highlight
+    some other element in the form that the user must enable first.
+  </p>
+
+  <CodeExample @glimmerTs="trigger-events-3.gts">
+    <TriggerEvents3Component />
+  </CodeExample>
+
+  <h3><code>\{{on "focus"}}/\{{on "blur"}}</code></h3>
+
+  <p>
+    I've used this two events in conjuntion to style a parent element while some
+    of the components inside it have the focus, achieving a poor mans' version
+    of the upcoming CSS
+    <code>:focus-within</code>
+    pseudo selector.
+  </p>
+
+  <CodeExample @glimmerTs="trigger-events-4.gts">
+    <TriggerEvents4Component />
+  </CodeExample>
+
+  <p>
+    This is the most involved example yet. Both the text input and the trigger
+    are focusable on their own, but by tracking when they get and loose the
+    focus we simulate that the entire input-group is focused, which would be
+    impossible just just CSS today.
+  </p>
+
+  <p>
+    Right now this behavior cannot be achieved across browsers without some help
+    from javascript.
+  </p>
+
+  <p>
+    Those are just some examples of the kind of behaviors you can implement
+    adding custom events to the trigger.
+  </p>
+
+  <div class="doc-page-nav">
+    <LinkTo
+      @route="public-pages.docs.dropdown-events"
+      class="doc-page-nav-link-prev"
+    >&lt; Dropdown events</LinkTo>
+    <LinkTo
+      @route="public-pages.docs.content-events"
+      class="doc-page-nav-link-next"
+    >Content events &gt;</LinkTo>
+  </div>
+</template>
diff --git a/docs/app/templates/public-pages/docs/trigger-events.hbs b/docs/app/templates/public-pages/docs/trigger-events.hbs
deleted file mode 100644
index ffc63e4d..00000000
--- a/docs/app/templates/public-pages/docs/trigger-events.hbs
+++ /dev/null
@@ -1,150 +0,0 @@
-<h1 class="doc-page-title">Trigger events</h1>
-
-<p>
-  The trigger is the component in charge of opening and closing the dropdown
-  (although it also closes if you click outside it). By default the event that
-  to which the trigger reacts is the
-  <code>click</code>
-  event.
-</p>
-
-<p>
-  You can change that passing the
-  <code>eventType="mousedown"</code>
-  to the trigger. Check below for both approaches. The difference is subtle.
-</p>
-
-<CodeExample @hbs="trigger-events-0.hbs">
-  {{component (ensure-safe-component this.triggerEvents0Component)}}
-</CodeExample>
-
-<p>
-  This does not affect to the behavior of the dropdown on touch devices. On
-  mobile or tablets the dropdown automatically depends on the
-  <code>"touchend"</code>
-  event.
-</p>
-
-<h2>Event handlers</h2>
-
-<p>
-  As with any regular HTML element, you can attach events to the trigger using
-  the
-  <code>\{{on}}</code>
-  element modifier. The events you subscribe to using this approach will aways
-  run before the default events that this component attaches, giving you a
-  chance to prevent the default behavior by calling
-  <code>event.stopImmediatePropagation()</code>.
-</p>
-
-<p>
-  What can you do with this? Let's see some examples.
-</p>
-
-<h3><code>\{{on "keydown"}}</code></h3>
-
-<p>
-  One real world situation where I found this to be necessary, is when you want
-  to open the dropdown with a key that usually does not open it, like by example
-  the arrow keys.
-</p>
-
-<CodeExample @hbs="trigger-events-1.hbs" @js="trigger-events-1.js">
-  {{component (ensure-safe-component this.triggerEvents1Component)}}
-</CodeExample>
-
-<p>
-  As with any other event, calling
-  <code>e.stopImmediatePropagation()</code>
-  will stop the default handler from running, so you can use this action to
-  prevent the
-  <kbd>space</kbd>,
-  <kbd>enter</kbd>
-  and
-  <kbd>esc</kbd>
-  keys from doing what they do by default.
-</p>
-
-<h3><code>\{{on "click"}}</code></h3>
-
-<p>
-  The
-  <code>click</code>
-  event is the one that usually opens the dropdown, but you can pass your own
-  function.
-</p>
-
-<p>
-  Good examples of this are preventing the component from opening with the mouse
-  and/or react in some way to those attempts.
-</p>
-
-<CodeExample @hbs="trigger-events-2.hbs" @js="trigger-events-2.js">
-  {{component (ensure-safe-component this.triggerEvents2Component)}}
-</CodeExample>
-
-<h3><code>\{{on "touchend"}}</code></h3>
-
-<p>
-  Exactly identical to
-  <code>\{{on "click"}}</code>
-  but for touch screens. I'm not even going to create another example.
-</p>
-
-<h3><code>\{{on "mouseenter"}} / \{{on "mouseleave"}}</code></h3>
-
-<p>
-  I use this event to open the dropdown when you hover it and close it when you
-  leave but you can really use it a lot more.
-</p>
-
-<p>
-  By example, imagine that a dropdown is disabled and you want to highlight some
-  other element in the form that the user must enable first.
-</p>
-
-<CodeExample @hbs="trigger-events-3.hbs" @js="trigger-events-3.js">
-  {{component (ensure-safe-component this.triggerEvents3Component)}}
-</CodeExample>
-
-<h3><code>\{{on "focus"}}/\{{on "blur"}}</code></h3>
-
-<p>
-  I've used this two events in conjuntion to style a parent element while some
-  of the components inside it have the focus, achieving a poor mans' version of
-  the upcoming CSS
-  <code>:focus-within</code>
-  pseudo selector.
-</p>
-
-<CodeExample @hbs="trigger-events-4.hbs" @js="trigger-events-4.js">
-  {{component (ensure-safe-component this.triggerEvents4Component)}}
-</CodeExample>
-
-<p>
-  This is the most involved example yet. Both the text input and the trigger are
-  focusable on their own, but by tracking when they get and loose the focus we
-  simulate that the entire input-group is focused, which would be impossible
-  just just CSS today.
-</p>
-
-<p>
-  Right now this behavior cannot be achieved across browsers without some help
-  from javascript.
-</p>
-
-<p>
-  Those are just some examples of the kind of behaviors you can implement adding
-  custom events to the trigger.
-</p>
-
-<div class="doc-page-nav">
-  <LinkTo
-    @route="public-pages.docs.dropdown-events"
-    class="doc-page-nav-link-prev"
-  >&lt; Dropdown events</LinkTo>
-  <LinkTo
-    @route="public-pages.docs.content-events"
-    class="doc-page-nav-link-next"
-  >Content events &gt;</LinkTo>
-</div>
\ No newline at end of file
diff --git a/docs/app/templates/public-pages/index.gts b/docs/app/templates/public-pages/index.gts
new file mode 100644
index 00000000..1fb6277f
--- /dev/null
+++ b/docs/app/templates/public-pages/index.gts
@@ -0,0 +1,67 @@
+import { LinkTo } from '@ember/routing';
+
+<template>
+  <section class="main-page-headline">
+    <h1 class="main-page-headline-content">
+      The basic dropdown that your
+      <img src="/ember_logo.png" alt="ember" />
+      needs
+    </h1>
+  </section>
+  <section class="selling-points">
+    <article class="selling-point">
+      <svg
+        class="selling-point-icon"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 512 512"
+      >
+        <path
+          fill="currentColor"
+          d="M505.12019,19.09375c-1.18945-5.53125-6.65819-11-12.207-12.1875C460.716,0,435.507,0,410.40747,0,307.17523,0,245.26909,55.20312,199.05238,128H94.83772c-16.34763.01562-35.55658,11.875-42.88664,26.48438L2.51562,253.29688A28.4,28.4,0,0,0,0,264a24.00867,24.00867,0,0,0,24.00582,24H127.81618l-22.47457,22.46875c-11.36521,11.36133-12.99607,32.25781,0,45.25L156.24582,406.625c11.15623,11.1875,32.15619,13.15625,45.27726,0l22.47457-22.46875V488a24.00867,24.00867,0,0,0,24.00581,24,28.55934,28.55934,0,0,0,10.707-2.51562l98.72834-49.39063c14.62888-7.29687,26.50776-26.5,26.50776-42.85937V312.79688c72.59753-46.3125,128.03493-108.40626,128.03493-211.09376C512.07526,76.5,512.07526,51.29688,505.12019,19.09375ZM384.04033,168A40,40,0,1,1,424.05,128,40.02322,40.02322,0,0,1,384.04033,168Z"
+        >
+        </path>
+      </svg>
+      <div class="selling-point-text">
+        <h2>Ready to go</h2>
+        Prepared out of the box with a minimum set of defaults that let you drop
+        it into your app, style it to your taste and not worry about the little
+        details.
+      </div>
+    </article>
+
+    <article class="selling-point">
+      <div class="selling-point-code">
+        \{{#ember as |ember|}}
+      </div>
+      <div class="selling-point-text">
+        <h2>With Ember for Ember</h2>
+        Built on top of other ember addons, it provides an API based on
+        contextual components that feels natural to use and style.
+      </div>
+    </article>
+
+    <article class="selling-point">
+      <svg
+        class="selling-point-icon"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 640 512"
+      >
+        <path
+          fill="currentColor"
+          d="M512.1 191l-8.2 14.3c-3 5.3-9.4 7.5-15.1 5.4-11.8-4.4-22.6-10.7-32.1-18.6-4.6-3.8-5.8-10.5-2.8-15.7l8.2-14.3c-6.9-8-12.3-17.3-15.9-27.4h-16.5c-6 0-11.2-4.3-12.2-10.3-2-12-2.1-24.6 0-37.1 1-6 6.2-10.4 12.2-10.4h16.5c3.6-10.1 9-19.4 15.9-27.4l-8.2-14.3c-3-5.2-1.9-11.9 2.8-15.7 9.5-7.9 20.4-14.2 32.1-18.6 5.7-2.1 12.1.1 15.1 5.4l8.2 14.3c10.5-1.9 21.2-1.9 31.7 0L552 6.3c3-5.3 9.4-7.5 15.1-5.4 11.8 4.4 22.6 10.7 32.1 18.6 4.6 3.8 5.8 10.5 2.8 15.7l-8.2 14.3c6.9 8 12.3 17.3 15.9 27.4h16.5c6 0 11.2 4.3 12.2 10.3 2 12 2.1 24.6 0 37.1-1 6-6.2 10.4-12.2 10.4h-16.5c-3.6 10.1-9 19.4-15.9 27.4l8.2 14.3c3 5.2 1.9 11.9-2.8 15.7-9.5 7.9-20.4 14.2-32.1 18.6-5.7 2.1-12.1-.1-15.1-5.4l-8.2-14.3c-10.4 1.9-21.2 1.9-31.7 0zm-10.5-58.8c38.5 29.6 82.4-14.3 52.8-52.8-38.5-29.7-82.4 14.3-52.8 52.8zM386.3 286.1l33.7 16.8c10.1 5.8 14.5 18.1 10.5 29.1-8.9 24.2-26.4 46.4-42.6 65.8-7.4 8.9-20.2 11.1-30.3 5.3l-29.1-16.8c-16 13.7-34.6 24.6-54.9 31.7v33.6c0 11.6-8.3 21.6-19.7 23.6-24.6 4.2-50.4 4.4-75.9 0-11.5-2-20-11.9-20-23.6V418c-20.3-7.2-38.9-18-54.9-31.7L74 403c-10 5.8-22.9 3.6-30.3-5.3-16.2-19.4-33.3-41.6-42.2-65.7-4-10.9.4-23.2 10.5-29.1l33.3-16.8c-3.9-20.9-3.9-42.4 0-63.4L12 205.8c-10.1-5.8-14.6-18.1-10.5-29 8.9-24.2 26-46.4 42.2-65.8 7.4-8.9 20.2-11.1 30.3-5.3l29.1 16.8c16-13.7 34.6-24.6 54.9-31.7V57.1c0-11.5 8.2-21.5 19.6-23.5 24.6-4.2 50.5-4.4 76-.1 11.5 2 20 11.9 20 23.6v33.6c20.3 7.2 38.9 18 54.9 31.7l29.1-16.8c10-5.8 22.9-3.6 30.3 5.3 16.2 19.4 33.2 41.6 42.1 65.8 4 10.9.1 23.2-10 29.1l-33.7 16.8c3.9 21 3.9 42.5 0 63.5zm-117.6 21.1c59.2-77-28.7-164.9-105.7-105.7-59.2 77 28.7 164.9 105.7 105.7zm243.4 182.7l-8.2 14.3c-3 5.3-9.4 7.5-15.1 5.4-11.8-4.4-22.6-10.7-32.1-18.6-4.6-3.8-5.8-10.5-2.8-15.7l8.2-14.3c-6.9-8-12.3-17.3-15.9-27.4h-16.5c-6 0-11.2-4.3-12.2-10.3-2-12-2.1-24.6 0-37.1 1-6 6.2-10.4 12.2-10.4h16.5c3.6-10.1 9-19.4 15.9-27.4l-8.2-14.3c-3-5.2-1.9-11.9 2.8-15.7 9.5-7.9 20.4-14.2 32.1-18.6 5.7-2.1 12.1.1 15.1 5.4l8.2 14.3c10.5-1.9 21.2-1.9 31.7 0l8.2-14.3c3-5.3 9.4-7.5 15.1-5.4 11.8 4.4 22.6 10.7 32.1 18.6 4.6 3.8 5.8 10.5 2.8 15.7l-8.2 14.3c6.9 8 12.3 17.3 15.9 27.4h16.5c6 0 11.2 4.3 12.2 10.3 2 12 2.1 24.6 0 37.1-1 6-6.2 10.4-12.2 10.4h-16.5c-3.6 10.1-9 19.4-15.9 27.4l8.2 14.3c3 5.2 1.9 11.9-2.8 15.7-9.5 7.9-20.4 14.2-32.1 18.6-5.7 2.1-12.1-.1-15.1-5.4l-8.2-14.3c-10.4 1.9-21.2 1.9-31.7 0zM501.6 431c38.5 29.6 82.4-14.3 52.8-52.8-38.5-29.6-82.4 14.3-52.8 52.8z"
+        >
+        </path>
+      </svg>
+      <div class="selling-point-text">
+        <h2>Low level primitives</h2>
+        Designed as a building block for your own components, it has no styles
+        and makes no assumptions. It gives you the right primitives to taylor
+        your perfect widget.
+      </div>
+    </article>
+  </section>
+  <div class="text-center get-started">
+    <LinkTo @route="public-pages.docs.index" class="get-started-button">Get
+      started</LinkTo>
+  </div>
+</template>
diff --git a/docs/app/templates/public-pages/index.hbs b/docs/app/templates/public-pages/index.hbs
deleted file mode 100644
index 4ec4831e..00000000
--- a/docs/app/templates/public-pages/index.hbs
+++ /dev/null
@@ -1,63 +0,0 @@
-<section class="main-page-headline">
-  <h1 class="main-page-headline-content">
-    The basic dropdown that your
-    <img src="/ember_logo.png" alt="ember" />
-    needs
-  </h1>
-</section>
-<section class="selling-points">
-  <article class="selling-point">
-    <svg
-      class="selling-point-icon"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 512 512"
-    >
-      <path
-        fill="currentColor"
-        d="M505.12019,19.09375c-1.18945-5.53125-6.65819-11-12.207-12.1875C460.716,0,435.507,0,410.40747,0,307.17523,0,245.26909,55.20312,199.05238,128H94.83772c-16.34763.01562-35.55658,11.875-42.88664,26.48438L2.51562,253.29688A28.4,28.4,0,0,0,0,264a24.00867,24.00867,0,0,0,24.00582,24H127.81618l-22.47457,22.46875c-11.36521,11.36133-12.99607,32.25781,0,45.25L156.24582,406.625c11.15623,11.1875,32.15619,13.15625,45.27726,0l22.47457-22.46875V488a24.00867,24.00867,0,0,0,24.00581,24,28.55934,28.55934,0,0,0,10.707-2.51562l98.72834-49.39063c14.62888-7.29687,26.50776-26.5,26.50776-42.85937V312.79688c72.59753-46.3125,128.03493-108.40626,128.03493-211.09376C512.07526,76.5,512.07526,51.29688,505.12019,19.09375ZM384.04033,168A40,40,0,1,1,424.05,128,40.02322,40.02322,0,0,1,384.04033,168Z"
-      >
-      </path>
-    </svg>
-    <div class="selling-point-text">
-      <h2>Ready to go</h2>
-      Prepared out of the box with a minimum set of defaults that let you drop
-      it into your app, style it to your taste and not worry about the little
-      details.
-    </div>
-  </article>
-
-  <article class="selling-point">
-    <div class="selling-point-code">
-      \{{#ember as |ember|}}
-    </div>
-    <div class="selling-point-text">
-      <h2>With Ember for Ember</h2>
-      Built on top of other ember addons, it provides an API based on contextual
-      components that feels natural to use and style.
-    </div>
-  </article>
-
-  <article class="selling-point">
-    <svg
-      class="selling-point-icon"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 640 512"
-    >
-      <path
-        fill="currentColor"
-        d="M512.1 191l-8.2 14.3c-3 5.3-9.4 7.5-15.1 5.4-11.8-4.4-22.6-10.7-32.1-18.6-4.6-3.8-5.8-10.5-2.8-15.7l8.2-14.3c-6.9-8-12.3-17.3-15.9-27.4h-16.5c-6 0-11.2-4.3-12.2-10.3-2-12-2.1-24.6 0-37.1 1-6 6.2-10.4 12.2-10.4h16.5c3.6-10.1 9-19.4 15.9-27.4l-8.2-14.3c-3-5.2-1.9-11.9 2.8-15.7 9.5-7.9 20.4-14.2 32.1-18.6 5.7-2.1 12.1.1 15.1 5.4l8.2 14.3c10.5-1.9 21.2-1.9 31.7 0L552 6.3c3-5.3 9.4-7.5 15.1-5.4 11.8 4.4 22.6 10.7 32.1 18.6 4.6 3.8 5.8 10.5 2.8 15.7l-8.2 14.3c6.9 8 12.3 17.3 15.9 27.4h16.5c6 0 11.2 4.3 12.2 10.3 2 12 2.1 24.6 0 37.1-1 6-6.2 10.4-12.2 10.4h-16.5c-3.6 10.1-9 19.4-15.9 27.4l8.2 14.3c3 5.2 1.9 11.9-2.8 15.7-9.5 7.9-20.4 14.2-32.1 18.6-5.7 2.1-12.1-.1-15.1-5.4l-8.2-14.3c-10.4 1.9-21.2 1.9-31.7 0zm-10.5-58.8c38.5 29.6 82.4-14.3 52.8-52.8-38.5-29.7-82.4 14.3-52.8 52.8zM386.3 286.1l33.7 16.8c10.1 5.8 14.5 18.1 10.5 29.1-8.9 24.2-26.4 46.4-42.6 65.8-7.4 8.9-20.2 11.1-30.3 5.3l-29.1-16.8c-16 13.7-34.6 24.6-54.9 31.7v33.6c0 11.6-8.3 21.6-19.7 23.6-24.6 4.2-50.4 4.4-75.9 0-11.5-2-20-11.9-20-23.6V418c-20.3-7.2-38.9-18-54.9-31.7L74 403c-10 5.8-22.9 3.6-30.3-5.3-16.2-19.4-33.3-41.6-42.2-65.7-4-10.9.4-23.2 10.5-29.1l33.3-16.8c-3.9-20.9-3.9-42.4 0-63.4L12 205.8c-10.1-5.8-14.6-18.1-10.5-29 8.9-24.2 26-46.4 42.2-65.8 7.4-8.9 20.2-11.1 30.3-5.3l29.1 16.8c16-13.7 34.6-24.6 54.9-31.7V57.1c0-11.5 8.2-21.5 19.6-23.5 24.6-4.2 50.5-4.4 76-.1 11.5 2 20 11.9 20 23.6v33.6c20.3 7.2 38.9 18 54.9 31.7l29.1-16.8c10-5.8 22.9-3.6 30.3 5.3 16.2 19.4 33.2 41.6 42.1 65.8 4 10.9.1 23.2-10 29.1l-33.7 16.8c3.9 21 3.9 42.5 0 63.5zm-117.6 21.1c59.2-77-28.7-164.9-105.7-105.7-59.2 77 28.7 164.9 105.7 105.7zm243.4 182.7l-8.2 14.3c-3 5.3-9.4 7.5-15.1 5.4-11.8-4.4-22.6-10.7-32.1-18.6-4.6-3.8-5.8-10.5-2.8-15.7l8.2-14.3c-6.9-8-12.3-17.3-15.9-27.4h-16.5c-6 0-11.2-4.3-12.2-10.3-2-12-2.1-24.6 0-37.1 1-6 6.2-10.4 12.2-10.4h16.5c3.6-10.1 9-19.4 15.9-27.4l-8.2-14.3c-3-5.2-1.9-11.9 2.8-15.7 9.5-7.9 20.4-14.2 32.1-18.6 5.7-2.1 12.1.1 15.1 5.4l8.2 14.3c10.5-1.9 21.2-1.9 31.7 0l8.2-14.3c3-5.3 9.4-7.5 15.1-5.4 11.8 4.4 22.6 10.7 32.1 18.6 4.6 3.8 5.8 10.5 2.8 15.7l-8.2 14.3c6.9 8 12.3 17.3 15.9 27.4h16.5c6 0 11.2 4.3 12.2 10.3 2 12 2.1 24.6 0 37.1-1 6-6.2 10.4-12.2 10.4h-16.5c-3.6 10.1-9 19.4-15.9 27.4l8.2 14.3c3 5.2 1.9 11.9-2.8 15.7-9.5 7.9-20.4 14.2-32.1 18.6-5.7 2.1-12.1-.1-15.1-5.4l-8.2-14.3c-10.4 1.9-21.2 1.9-31.7 0zM501.6 431c38.5 29.6 82.4-14.3 52.8-52.8-38.5-29.6-82.4 14.3-52.8 52.8z"
-      >
-      </path>
-    </svg>
-    <div class="selling-point-text">
-      <h2>Low level primitives</h2>
-      Designed as a building block for your own components, it has no styles and
-      makes no assumptions. It gives you the right primitives to taylor your
-      perfect widget.
-    </div>
-  </article>
-</section>
-<div class="text-center get-started">
-  <LinkTo @route="public-pages.docs.index" class="get-started-button">Get
-    started</LinkTo>
-</div>
\ No newline at end of file
diff --git a/docs/app/templates/public-pages/support-the-project.hbs b/docs/app/templates/public-pages/support-the-project.hbs
deleted file mode 100644
index 7c16d265..00000000
--- a/docs/app/templates/public-pages/support-the-project.hbs
+++ /dev/null
@@ -1,112 +0,0 @@
-<section class="docs">
-  <section class="doc-page">
-    <h1 class="doc-page-title">Support the Ember Power Project</h1>
-
-    <p>
-      The Ember Power Project started with the goal of providing the Ember
-      ecosystem with a set of curated components that cover common UX needs,
-      built in Ember and designed work well in Ember apps., from following good
-      patterns like DDAU to also be test-friend and render property in Fastboot.
-    </p>
-
-    <p>
-      Over the time this evolved a bit into a theory of how an ecosystem should
-      shape it's addons: Basic components that compose to create more complex
-      components using good practices and allowing programmers to customize or
-      directly replace the parts they don't like.
-    </p>
-
-    <p>
-      Those components are divided in three tiers of complexity:
-      <ul>
-        <li><strong>Building blocks</strong>: Components that do only one thing
-          but do it right. They are low-level, take very few opinions and are
-          focused on flexibility.
-          <a href="https://github.com/cibernox/ember-basic-dropdown">Ember Basic
-            Dropdown</a>
-          and
-          <a
-            href="https://github.com/cibernox/ember-text-measurer"
-          >ember-text-measurer</a>
-          are two of them.</li>
-        <li>
-          <strong>Power Components</strong>: Components that solve an UX problen
-          <em>The Ember Way</em>. That is, they provide opinions and work out of
-          the box with a nice public API, yet provide hooks for the users to
-          customize or replace parts of it.
-          <strong>Ember Power Select</strong>
-          and
-          <a href="http://www.ember-power-calendar.com">Ember Power Calendar</a>
-          are of this kind.
-        </li>
-        <li>
-          <strong>Power Meta-addons</strong>: Components that based on other
-          components of the second tier but customize them for a specific
-          purpose or pattern that is common enough to deserve to be shared so
-          other users can use them without having to do the customization
-          themselves.
-          <a
-            href="https://github.com/cibernox/ember-power-select-sortable"
-          >ember-power-select-sortable</a>,
-          <a
-            href="https://github.com/cibernox/ember-power-select-typeahead"
-          >ember-power-select-typeahead</a>,
-          <a
-            href="https://github.com/cibernox/ember-power-select-with-fallback"
-          >ember-power-select-with-fallback</a>
-          are some examples, but there is many more.
-        </li>
-      </ul>
-    </p>
-
-    <p>
-      By creating a network if addons that compose between them to create even
-      more addons, we share more. The more we share, the smaller our apps become
-      because we don't need to reinvent wheels.
-    </p>
-
-    <p>
-      If you enjoy the addons this project provides and they help you in your
-      daily work, you can support the development of the addons and it's
-      documentation pages with a any contribution you feel appropiate by
-      clicking on the button below but above all, by contributing, opening
-      issues and Pull Requests, answering questions in Slack or StackOverflow
-      and above all, showing appreciation for everyone who works on the Open
-      Source Software we all use everyday.
-    </p>
-
-    <form
-      action="https://www.paypal.com/cgi-bin/webscr"
-      method="post"
-      target="_top"
-      style=""
-    >
-      <input type="hidden" name="cmd" value="_s-xclick" />
-      <input
-        type="hidden"
-        name="encrypted"
-        value="-----BEGIN PKCS7-----MIIHRwYJKoZIhvcNAQcEoIIHODCCBzQCAQExggEwMIIBLAIBADCBlDCBjjELMAkGA1UEBhMCVVMxCzAJBgNVBAgTAkNBMRYwFAYDVQQHEw1Nb3VudGFpbiBWaWV3MRQwEgYDVQQKEwtQYXlQYWwgSW5jLjETMBEGA1UECxQKbGl2ZV9jZXJ0czERMA8GA1UEAxQIbGl2ZV9hcGkxHDAaBgkqhkiG9w0BCQEWDXJlQHBheXBhbC5jb20CAQAwDQYJKoZIhvcNAQEBBQAEgYAfnTPFUF7oBhPn11GMQm/UczjTzpGKjsvcEjuV4YarOa5Vd+KXIfERjkDdrMaXFaeyz/2CSA38F162Xsdk1P6HNQbm1ZWWjmtQ85FFkyiNfFmvkwbto7SuzmDmPw0bUjMV56kXE3EljUxhBbF2D4SCNE3I/aAsfWS4RYHEZOPuEjELMAkGBSsOAwIaBQAwgcQGCSqGSIb3DQEHATAUBggqhkiG9w0DBwQIEPQoYICrEbCAgaD6XDy5HbO/+Zr36kl4+CNU6k4Kh+6MKneulnjvy18vYZ1/j/bUMUp48WhdMYaE6hCzKAYGC2LURC0HHYWKvboUr1OOBu3Xv3rJQvXCETfAZV9WVDMdMttaLAAOwx6zq/+zIJwHyxb8SIIHx2dQeNuoFv3v8mNBPhjqOPy4oKh1il94MFatfNRL+RmXmYm8DvYFZnR8+1H540I9aB556uCUoIIDhzCCA4MwggLsoAMCAQICAQAwDQYJKoZIhvcNAQEFBQAwgY4xCzAJBgNVBAYTAlVTMQswCQYDVQQIEwJDQTEWMBQGA1UEBxMNTW91bnRhaW4gVmlldzEUMBIGA1UEChMLUGF5UGFsIEluYy4xEzARBgNVBAsUCmxpdmVfY2VydHMxETAPBgNVBAMUCGxpdmVfYXBpMRwwGgYJKoZIhvcNAQkBFg1yZUBwYXlwYWwuY29tMB4XDTA0MDIxMzEwMTMxNVoXDTM1MDIxMzEwMTMxNVowgY4xCzAJBgNVBAYTAlVTMQswCQYDVQQIEwJDQTEWMBQGA1UEBxMNTW91bnRhaW4gVmlldzEUMBIGA1UEChMLUGF5UGFsIEluYy4xEzARBgNVBAsUCmxpdmVfY2VydHMxETAPBgNVBAMUCGxpdmVfYXBpMRwwGgYJKoZIhvcNAQkBFg1yZUBwYXlwYWwuY29tMIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDBR07d/ETMS1ycjtkpkvjXZe9k+6CieLuLsPumsJ7QC1odNz3sJiCbs2wC0nLE0uLGaEtXynIgRqIddYCHx88pb5HTXv4SZeuv0Rqq4+axW9PLAAATU8w04qqjaSXgbGLP3NmohqM6bV9kZZwZLR/klDaQGo1u9uDb9lr4Yn+rBQIDAQABo4HuMIHrMB0GA1UdDgQWBBSWn3y7xm8XvVk/UtcKG+wQ1mSUazCBuwYDVR0jBIGzMIGwgBSWn3y7xm8XvVk/UtcKG+wQ1mSUa6GBlKSBkTCBjjELMAkGA1UEBhMCVVMxCzAJBgNVBAgTAkNBMRYwFAYDVQQHEw1Nb3VudGFpbiBWaWV3MRQwEgYDVQQKEwtQYXlQYWwgSW5jLjETMBEGA1UECxQKbGl2ZV9jZXJ0czERMA8GA1UEAxQIbGl2ZV9hcGkxHDAaBgkqhkiG9w0BCQEWDXJlQHBheXBhbC5jb22CAQAwDAYDVR0TBAUwAwEB/zANBgkqhkiG9w0BAQUFAAOBgQCBXzpWmoBa5e9fo6ujionW1hUhPkOBakTr3YCDjbYfvJEiv/2P+IobhOGJr85+XHhN0v4gUkEDI8r2/rNk1m0GA8HKddvTjyGw/XqXa+LSTlDYkqI8OwR8GEYj4efEtcRpRYBxV8KxAW93YDWzFGvruKnnLbDAF6VR5w/cCMn5hzGCAZowggGWAgEBMIGUMIGOMQswCQYDVQQGEwJVUzELMAkGA1UECBMCQ0ExFjAUBgNVBAcTDU1vdW50YWluIFZpZXcxFDASBgNVBAoTC1BheVBhbCBJbmMuMRMwEQYDVQQLFApsaXZlX2NlcnRzMREwDwYDVQQDFAhsaXZlX2FwaTEcMBoGCSqGSIb3DQEJARYNcmVAcGF5cGFsLmNvbQIBADAJBgUrDgMCGgUAoF0wGAYJKoZIhvcNAQkDMQsGCSqGSIb3DQEHATAcBgkqhkiG9w0BCQUxDxcNMTYxMDI2MDk1NDM0WjAjBgkqhkiG9w0BCQQxFgQUwlQ11iyvw6DjyoU014noLLB8Bq0wDQYJKoZIhvcNAQEBBQAEgYCQvp0NIt5Z2T9EmN0Xl/ASwC8kIyR3NTsm3i5C9ZI1AtzbjIVupfPAne8nTBV5DRPYd3dGJYasAsteXn2w/r5AdIH05deuox+4gsIjLlL5IVxMewImydoCL1isA2WGNp6px4zg/Z3qrEKRegk3PCeezIPzUm7NePLjuPGICZ20BA==-----END PKCS7-----"
-      />
-      <input
-        type="image"
-        src="https://www.paypalobjects.com/en_GB/i/btn/btn_donate_LG.gif"
-        border="0"
-        name="submit"
-        alt="PayPal – The safer, easier way to pay online!"
-        style="display: block; margin: 0 auto;"
-      />
-      <img
-        alt=""
-        role="none"
-        border="0"
-        src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif"
-        width="1"
-        height="1"
-      />
-    </form>
-
-    <p>
-      Thank you!
-    </p>
-  </section>
-</section>
\ No newline at end of file
diff --git a/docs/app/templates/scrolling-container.gts b/docs/app/templates/scrolling-container.gts
new file mode 100644
index 00000000..4302859c
--- /dev/null
+++ b/docs/app/templates/scrolling-container.gts
@@ -0,0 +1,22 @@
+import ScrollableContainer1Component from '../components/snippets/scrollable-container-1';
+import CodeExample from 'docs/components/code-example';
+
+<template>
+  <div class="scrolling-container-temporal-demo">
+
+    <h1 class="doc-page-title">Usage with a scrollable container</h1>
+
+    <p>
+      What if your app doesn't scroll on the body tag? You can have the dropdown
+      render wherever you would like. If you render it on an element inside the
+      block that is scrolling the dropdown will automatically scroll with your
+      trigger. You need to give the target element
+      <code>position: relative;</code>
+      for the dropdown to be positioned properly.
+    </p>
+
+    <CodeExample @glimmerTs="scrollable-container-1.gts">
+      <ScrollableContainer1Component />
+    </CodeExample>
+  </div>
+</template>
diff --git a/docs/app/templates/scrolling-container.hbs b/docs/app/templates/scrolling-container.hbs
deleted file mode 100644
index 82044c08..00000000
--- a/docs/app/templates/scrolling-container.hbs
+++ /dev/null
@@ -1,17 +0,0 @@
-<div class="scrolling-container-temporal-demo">
-
-  <h1 class="doc-page-title">Usage with a scrollable container</h1>
-
-  <p>
-    What if your app doesn't scroll on the body tag? You can have the dropdown
-    render wherever you would like. If you render it on an element inside the
-    block that is scrolling the dropdown will automatically scroll with your
-    trigger. You need to give the target element
-    <code>position: relative;</code>
-    for the dropdown to be positioned properly.
-  </p>
-
-  <CodeExample @hbs="scrollable-container-1.hbs">
-    {{component (ensure-safe-component this.scrollableContainer1Component)}}
-  </CodeExample>
-</div>
\ No newline at end of file
diff --git a/docs/app/templates/snippets/system-wide-config-1-js.js b/docs/app/templates/snippets/system-wide-config-1-js.js
deleted file mode 100644
index 1c88e92e..00000000
--- a/docs/app/templates/snippets/system-wide-config-1-js.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import EmberBasicDropdown from 'ember-basic-dropdown/components/basic-dropdown';
-
-export default class extends EmberBasicDropdown {
-  // Place here your system-wide preferences
-  triggerComponent = 'my-custom-trigger';
-  calculatePosition() {
-    // your custom function to position the dropdown
-  }
-}
diff --git a/docs/ember-cli-build.js b/docs/ember-cli-build.js
index 8aaf07ac..4145d349 100644
--- a/docs/ember-cli-build.js
+++ b/docs/ember-cli-build.js
@@ -6,7 +6,7 @@ const crawl = require('prember-crawler');
 module.exports = function (defaults) {
   const app = new EmberApp(defaults, {
     'ember-cli-babel': { enableTypeScriptTransform: true },
-    snippetPaths: ['app/components/snippets', 'app/templates/snippets'],
+    snippetPaths: ['app/components/snippets'],
     prember: {
       urls: crawl,
     },
diff --git a/docs/eslint.config.mjs b/docs/eslint.config.mjs
index 5156ec47..19ae44b2 100644
--- a/docs/eslint.config.mjs
+++ b/docs/eslint.config.mjs
@@ -62,7 +62,7 @@ export default ts.config(
       'dist/',
       'node_modules/',
       'coverage/',
-      'app/templates/snippets/',
+      'app/components/snippets/*-snippet.*',
       '!**/.*',
     ],
   },
diff --git a/docs/package.json b/docs/package.json
index 5e9bdfe5..8fdbabc1 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -51,7 +51,6 @@
     "@glint/environment-ember-template-imports": "^1.5.2",
     "@glint/template": "1.5.2",
     "@tsconfig/ember": "^3.0.11",
-    "@types/prismjs": "^1.26.5",
     "@types/qunit": "^2.19.13",
     "@types/rsvp": "^4.0.9",
     "broccoli-asset-rev": "^3.0.0",
@@ -80,6 +79,7 @@
     "ember-source-channel-url": "^3.0.0",
     "ember-template-imports": "^4.3.0",
     "ember-template-lint": "^7.9.3",
+    "ember-truth-helpers": "^5.0.0",
     "ember-try": "^4.0.0",
     "eslint": "^9.36.0",
     "eslint-config-prettier": "^10.1.8",
@@ -92,12 +92,11 @@
     "prember-crawler": "^1.0.0",
     "prettier": "^3.6.2",
     "prettier-plugin-ember-template-tag": "^2.1.0",
-    "prismjs": "^1.30.0",
-    "prismjs-glimmer": "^1.1.1",
     "qunit": "^2.24.1",
     "qunit-dom": "^3.5.0",
     "rsvp": "^4.8.5",
     "sass": "^1.93.2",
+    "shiki": "^3.13.0",
     "stylelint": "^16.24.0",
     "stylelint-config-standard": "^39.0.0",
     "tracked-built-ins": "^4.0.0",
diff --git a/docs/tests/integration/components/code-block-test.ts b/docs/tests/integration/components/code-block-test.ts
deleted file mode 100644
index deb637a1..00000000
--- a/docs/tests/integration/components/code-block-test.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'docs/tests/helpers';
-import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
-
-module('Integration | Component | code-block', function (hooks) {
-  setupRenderingTest(hooks);
-
-  test('it renders', async function (assert) {
-    // Set any properties with this.set('myProperty', 'value');
-    // Handle any actions with this.set('myAction', function(val) { ... });
-
-    await render(
-      hbs`<CodeBlock @language="js" @code="console.log('hello');" />`,
-    );
-
-    assert.dom().hasText("console.log('hello');");
-  });
-});
diff --git a/docs/tests/integration/components/code-inline-test.ts b/docs/tests/integration/components/code-inline-test.ts
deleted file mode 100644
index 073abb09..00000000
--- a/docs/tests/integration/components/code-inline-test.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'docs/tests/helpers';
-import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
-
-module('Integration | Component | code-inline', function (hooks) {
-  setupRenderingTest(hooks);
-
-  test('it renders', async function (assert) {
-    // Set any properties with this.set('myProperty', 'value');
-    // Handle any actions with this.set('myAction', function(val) { ... });
-
-    await render(
-      hbs`<CodeInline @language="js" @code="console.log('hello');" />`,
-    );
-
-    assert.dom().hasText("console.log('hello');");
-  });
-});
diff --git a/docs/tsconfig.json b/docs/tsconfig.json
index d0f1c6f4..a15a5200 100644
--- a/docs/tsconfig.json
+++ b/docs/tsconfig.json
@@ -13,6 +13,6 @@
       "docs/*": ["app/*"],
       "*": ["types/*"]
     },
-    "types": ["ember-source/types", "./node_modules/@types/prismjs"]
+    "types": ["ember-source/types"]
   }
 }
diff --git a/ember-basic-dropdown/README.md b/ember-basic-dropdown/README.md
index e54d58db..2362036d 100644
--- a/ember-basic-dropdown/README.md
+++ b/ember-basic-dropdown/README.md
@@ -1,25 +1,32 @@
-# Ember-basic-dropdown
+[![NPM](https://badge.fury.io/js/ember-basic-dropdown.svg)](https://www.npmjs.com/package/ember-basic-dropdown)
+[![Ember Observer Score](https://emberobserver.com/badges/ember-basic-dropdown.svg)](https://emberobserver.com/addons/ember-basic-dropdown)
+![Ember Version](https://img.shields.io/badge/ember-%3E%3D3.28-brightgreen?logo=emberdotjs&logoColor=white)
+[![Discord](https://img.shields.io/badge/chat-discord-blue?style=flat&logo=discord)](https://discord.com/channels/480462759797063690/486202731766349824)
+[![Build Status](https://github.com/cibernox/ember-basic-dropdown/actions/workflows/ci.yml/badge.svg?branch=master)](https://github.com/cibernox/ember-basic-dropdown)
 
-[![Build Status](https://github.com/cibernox/ember-basic-dropdown/actions/workflows/ci.yml/badge.svg?branch=master)](https://travis-ci.org/cibernox/ember-basic-dropdown)
+# ember-basic-dropdown
 
 This is a very minimal dropdown. That means that it is agnostic about what it is going to contain.
 
-It is intended to be a building block for more complex components but is perfectly usable. It is
-by example the addon on which [ember-power-select](https://www.ember-power-select.com)
-or `ember-paper`'s [menu component](http://miguelcobain.github.io/ember-paper/#/components/menu) are built upon.
+It is intended to be a building block for more complex components but is perfectly usable.
 
-### Compatibility
-
-- Ember.js v3.28 or above
-- Ember CLI v3.28 or above
-
-Versions 1.X require Ember 2.16 or greater
+### Highlights
 
-Version 2.X requires Ember 3.13 or greater
+- 🖊 **TypeScript support** – ships with type definitions for smooth TypeScript integration.
+- ✨ **Glint support** – template type-checking out of the box for safer templates.
+- 🚀 **FastBoot compatible** – works in server-rendered Ember apps.
+- 🕶 **Shadow DOM support** – can be rendered inside shadow roots without breaking positioning or events.
+- 🛠 **Addon v2 ready** – modern Ember Addon v2 format.
+- 🎯 **Headless & lightweight** – provides dropdown logic and accessibility without forcing styles.
+- 🔧 **Flexible API** – fully customizable trigger and content; you control the markup and styling.
+- 🧩 **Composable** – integrates seamlessly with other Ember addons (e.g. [ember-power-select](https://www.ember-power-select.com)).
+- ♿ **Accessible by default** – full keyboard navigation, ARIA attributes, and focus management built-in.
+- 📱 **Responsive positioning** – automatic repositioning on scroll and viewport boundaries.
 
-Version 3.X - 6.X requires Ember 3.24 or greater
+### Compatibility
 
-Version 7.X - 8.X requires Ember 3.28 or greater
+- Embroider or ember-auto-import v2
+- Ember.js v3.28 or above
 
 ### Installation
 
@@ -33,11 +40,15 @@ For more installation details see [documentation](https://ember-basic-dropdown.c
 
 This component leverages contextual components for its API:
 
-```hbs
-<BasicDropdown as |dd|>
-  <dd.Trigger>Click me</dd.Trigger>
-  <dd.Content>Content of the trigger</dd.Content>
-</BasicDropdown>
+```glimmer-ts
+import BasicDropdown from "ember-basic-dropdown/components/basic-dropdown";
+
+<template>
+  <BasicDropdown as |dd|>
+    <dd.Trigger>Click me</dd.Trigger>
+    <dd.Content>Content of the trigger</dd.Content>
+  </BasicDropdown>
+</template>
 ```
 
 The yielded `dropdown` object is the public API of the component, and contains
@@ -46,24 +57,29 @@ properties and actions that you can use to control the component.
 ```js
 {
   uniqueId: <string>,
-  isOpen: <boolean>,
   disabled: <boolean>,
+  isOpen: <boolean>,
   actions: {
     open: <action>,
     close: <action>,
     toggle: <action>,
-    reposition: <action>
-  }
+    reposition: <action>,
+    registerTriggerElement: <action>,
+    registerDropdownElement: <action>,
+    getTriggerElement: <action>
+  },
+  Trigger: <component>,
+  Content: <component>
 }
 ```
 
-Check the full documentation with live examples in http://ember-basic-dropdown.com
+Check the full documentation with live examples in https://ember-basic-dropdown.com
 
 ### Features
 
 #### Renders on the body or in place
 
-By default this component will render the dropdown in the body using `#-in-element` and absolutely
+By default this component will render the dropdown in the body using `#in-element` and absolutely
 position it to place it in the proper coordinates.
 
 You can opt out to this behavior by passing `renderInPlace=true`. That will add the dropdown just
@@ -75,14 +91,18 @@ You don't need to care about adding or removing events, it does that for you.
 
 You can make the dropdown content standout a little more by adding `overlay=true` to the content options, see example below. This will add a semi transparent overlay covering the whole screen. Also this will stop bubbling the click/touch event which closed the dropdown.
 
-```hbs
-<BasicDropdown as |dd|>
-  <dd.Trigger>Click me!</dd.Trigger>
-  <dd.Content @overlay={{true}}>
-    {{! here! }}
-    content!
-  </dd.Content>
-</BasicDropdown>
+```glimmer-ts
+import BasicDropdown from "ember-basic-dropdown/components/basic-dropdown";
+
+<template>
+  <BasicDropdown as |dd|>
+    <dd.Trigger>Click me!</dd.Trigger>
+    <dd.Content @overlay={{true}}>
+      {{! here! }}
+      content!
+    </dd.Content>
+  </BasicDropdown>
+</template>
 ```
 
 NOTE: If for some reason clicking outside a dropdown doesn't work, you might want to make sure the `<body>` spans the entire viewport. Adding a css rule like `body {min-height: 100vh;}` would do the trick. It ensures that wherever you click on the page, it will close the dropdown.
@@ -91,15 +111,19 @@ NOTE: If for some reason clicking outside a dropdown doesn't work, you might wan
 
 If you'd like the dropdown to close itself after a user clicks on it, you can use `dd.actions.close` from our public API.
 
-```hbs
-<BasicDropdown as |dd|>
-  <dd.Trigger>Click me!</dd.Trigger>
-  <dd.Content>
-    <div {{action dd.actions.close}}>
-      {{yield dd}}
-    </div>
-  </dd.Content>
-</BasicDropdown>
+```glimmer-ts
+import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown';
+
+<template>
+  <BasicDropdown as |dd|>
+    <dd.Trigger>Click me!</dd.Trigger>
+    <dd.Content>
+      <div {{action dd.actions.close}}>
+        {{yield dd}}
+      </div>
+    </dd.Content>
+  </BasicDropdown>
+<template>
 ```
 
 #### Keyboard and touchscreen support
@@ -115,7 +139,7 @@ you can do pretty much anything you want.
 #### Easy to animate.
 
 You can animate it, in an out, with just CSS3 animations.
-Check the example in the [Ember Power Select documentation](http://www.ember-power-select.com/cookbook/css-animations)
+Check the example in the [Ember Power Select documentation](https://www.ember-power-select.com/cookbook/css-animations)
 
 #### Intelligent and customizable positioning
 
@@ -140,12 +164,3 @@ where `horizontalPosition` is a string (`"right" | "center" | "left"`), `vertica
 
 It has a handy collection of test helpers to make interaction with the component seamless in your
 test suite.
-
-### Providing an Ember Twiddle
-
-If you want to provide an [Ember Twiddle](https://www.ember-twiddle.com) with an issue/reproduction **you need to add the following to the end of your template**:
-`<div id="ember-basic-dropdown-wormhole"></div>`
-
-Since `Ember Twiddle` does not run `EmberCLI's` hooks this `div` won't be added to the application and it's required (There's an issue in [Ember Twiddle](https://github.com/joostdevries/twiddle-backend/issues/35) tracking this).
-
-In order to create the Ember Twiddle you'll also need to add a reference to `ember-basic-dropdown: version` in the `addons` section of `twiddle.json`
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a04f203a..54e4f08e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -90,9 +90,6 @@ importers:
       '@tsconfig/ember':
         specifier: ^3.0.11
         version: 3.0.11
-      '@types/prismjs':
-        specifier: ^1.26.5
-        version: 1.26.5
       '@types/qunit':
         specifier: ^2.19.13
         version: 2.19.13
@@ -177,6 +174,9 @@ importers:
       ember-template-lint:
         specifier: ^7.9.3
         version: 7.9.3
+      ember-truth-helpers:
+        specifier: ^5.0.0
+        version: 5.0.0
       ember-try:
         specifier: ^4.0.0
         version: 4.0.0(encoding@0.1.13)
@@ -213,12 +213,6 @@ importers:
       prettier-plugin-ember-template-tag:
         specifier: ^2.1.0
         version: 2.1.0(prettier@3.6.2)
-      prismjs:
-        specifier: ^1.30.0
-        version: 1.30.0
-      prismjs-glimmer:
-        specifier: ^1.1.1
-        version: 1.1.1(prismjs@1.30.0)
       qunit:
         specifier: ^2.24.1
         version: 2.24.1
@@ -231,6 +225,9 @@ importers:
       sass:
         specifier: ^1.93.2
         version: 1.93.2
+      shiki:
+        specifier: ^3.13.0
+        version: 3.13.0
       stylelint:
         specifier: ^16.24.0
         version: 16.24.0(typescript@5.9.3)
@@ -2018,6 +2015,27 @@ packages:
   '@rtsao/scc@1.1.0':
     resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==}
 
+  '@shikijs/core@3.13.0':
+    resolution: {integrity: sha512-3P8rGsg2Eh2qIHekwuQjzWhKI4jV97PhvYjYUzGqjvJfqdQPz+nMlfWahU24GZAyW1FxFI1sYjyhfh5CoLmIUA==}
+
+  '@shikijs/engine-javascript@3.13.0':
+    resolution: {integrity: sha512-Ty7xv32XCp8u0eQt8rItpMs6rU9Ki6LJ1dQOW3V/56PKDcpvfHPnYFbsx5FFUP2Yim34m/UkazidamMNVR4vKg==}
+
+  '@shikijs/engine-oniguruma@3.13.0':
+    resolution: {integrity: sha512-O42rBGr4UDSlhT2ZFMxqM7QzIU+IcpoTMzb3W7AlziI1ZF7R8eS2M0yt5Ry35nnnTX/LTLXFPUjRFCIW+Operg==}
+
+  '@shikijs/langs@3.13.0':
+    resolution: {integrity: sha512-672c3WAETDYHwrRP0yLy3W1QYB89Hbpj+pO4KhxK6FzIrDI2FoEXNiNCut6BQmEApYLfuYfpgOZaqbY+E9b8wQ==}
+
+  '@shikijs/themes@3.13.0':
+    resolution: {integrity: sha512-Vxw1Nm1/Od8jyA7QuAenaV78BG2nSr3/gCGdBkLpfLscddCkzkL36Q5b67SrLLfvAJTOUzW39x4FHVCFriPVgg==}
+
+  '@shikijs/types@3.13.0':
+    resolution: {integrity: sha512-oM9P+NCFri/mmQ8LoFGVfVyemm5Hi27330zuOBp0annwJdKH1kOLndw3zCtAVDehPLg9fKqoEx3Ht/wNZxolfw==}
+
+  '@shikijs/vscode-textmate@10.0.2':
+    resolution: {integrity: sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==}
+
   '@simple-dom/document@1.4.0':
     resolution: {integrity: sha512-/RUeVH4kuD3rzo5/91+h4Z1meLSLP66eXqpVAw/4aZmYozkeqUkMprq0znL4psX/adEed5cBgiNJcfMz/eKZLg==}
 
@@ -2107,6 +2125,9 @@ packages:
     resolution: {integrity: sha512-00UxlRaIUvYm4R4W9WYkN8/J+kV8fmOQ7okeH6YFtGWFMt3odD45tpG5yA5wnL7HE6lLgjaTW5n14ju2hl2NNA==}
     deprecated: This is a stub types definition. glob provides its own type definitions, so you do not need this installed.
 
+  '@types/hast@3.0.4':
+    resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
+
   '@types/http-errors@2.0.5':
     resolution: {integrity: sha512-r8Tayk8HJnX0FztbZN7oVqGccWgw98T/0neJphO91KkmOzug1KkofZURD4UaD5uH8AqcFLfdPErnBod0u71/qg==}
 
@@ -2142,9 +2163,6 @@ packages:
     resolution: {integrity: sha512-EULJ8LApcVEPbrfND0cRQqutIOdiIgJ1Mgrhpy755r14xMohPTEpkV/k28SJvuOs9bHRFW8x+KeDAEPiGQPB9Q==}
     deprecated: This is a stub types definition. parse-path provides its own type definitions, so you do not need this installed.
 
-  '@types/prismjs@1.26.5':
-    resolution: {integrity: sha512-AUZTa7hQ2KY5L7AmtSiqxlhWxb4ina0yd8hNbl4TWuqnv/pFP0nDMb3YrfSBf4hJVGLh2YEIBfKaBW/9UEl6IQ==}
-
   '@types/qs@6.14.0':
     resolution: {integrity: sha512-eOunJqu0K1923aExK6y8p6fsihYEn/BYuQ4g0CxAAgFc4b/ZLN4CrsRZ55srTdqoiLzU2B2evC+apEIxprEzkQ==}
 
@@ -2234,6 +2252,9 @@ packages:
     resolution: {integrity: sha512-qsaFBA3e09MIDAGFUrTk+dzqtfv1XPVz8t8d1f0ybTzrCY7BKiMC5cjrl1O/P7UmHsNyW90EYSkU/ZWpmXelag==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@ungap/structured-clone@1.3.0':
+    resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
+
   '@warp-drive/build-config@5.6.0':
     resolution: {integrity: sha512-7qdE7x1U0yRhbGy1wO47lirgKO6cjMqmKJUdLhpIhX31fIo0MM2/6n8p/+2rNTlZiCMhLNeV7RelA8LoIkxW3Q==}
 
@@ -3004,6 +3025,9 @@ packages:
   caseless@0.12.0:
     resolution: {integrity: sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==}
 
+  ccount@2.0.1:
+    resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
+
   chalk@1.1.3:
     resolution: {integrity: sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==}
     engines: {node: '>=0.10.0'}
@@ -3020,6 +3044,12 @@ packages:
     resolution: {integrity: sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==}
     engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
 
+  character-entities-html4@2.1.0:
+    resolution: {integrity: sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==}
+
+  character-entities-legacy@3.0.0:
+    resolution: {integrity: sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==}
+
   character-entities@2.0.2:
     resolution: {integrity: sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==}
 
@@ -3174,6 +3204,9 @@ packages:
     resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
     engines: {node: '>= 0.8'}
 
+  comma-separated-tokens@2.0.3:
+    resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
+
   commander@2.20.3:
     resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
 
@@ -4898,6 +4931,12 @@ packages:
     resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
     engines: {node: '>= 0.4'}
 
+  hast-util-to-html@9.0.5:
+    resolution: {integrity: sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==}
+
+  hast-util-whitespace@3.0.0:
+    resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==}
+
   heimdalljs-fs-monitor@1.1.2:
     resolution: {integrity: sha512-M7OPf3Tu+ybhAXdiC07O1vUYFyhCgfew4L3vaG2nn4Be05xzNvtBcU6IKMTfHJ9AxWFa3w9rrmiJovkxHhpopw==}
 
@@ -4944,6 +4983,9 @@ packages:
     resolution: {integrity: sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==}
     engines: {node: '>=8'}
 
+  html-void-elements@3.0.0:
+    resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
+
   http-cache-semantics@4.2.0:
     resolution: {integrity: sha512-dTxcvPXqPvXBQpq5dUr6mEMJX4oIEFv6bwom3FDwKRDsuIjjJGANqhBuoAn9c1RQJIdAKav33ED65E2ys+87QQ==}
 
@@ -5751,6 +5793,9 @@ packages:
   mdast-util-from-markdown@2.0.2:
     resolution: {integrity: sha512-uZhTV/8NBuw0WHkPTrCqDOl0zVe1BIng5ZtHoDk49ME1qqcjYmmLmOf0gELgcRMxN4w2iuIeVso5/6QymSrgmA==}
 
+  mdast-util-to-hast@13.2.0:
+    resolution: {integrity: sha512-QGYKEuUsYT9ykKBCMOEDLsU5JRObWQusAolFMeko/tYPufNkRffBAQjIE+99jbA87xv6FgmjLtwjh9wBWajwAA==}
+
   mdast-util-to-string@4.0.0:
     resolution: {integrity: sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==}
 
@@ -6229,6 +6274,12 @@ packages:
     resolution: {integrity: sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==}
     engines: {node: '>=18'}
 
+  oniguruma-parser@0.12.1:
+    resolution: {integrity: sha512-8Unqkvk1RYc6yq2WBYRj4hdnsAxVze8i7iPfQr8e4uSP3tRv0rpZcbGUDvxfQQcdwHt/e9PrMvGCsa8OqG9X3w==}
+
+  oniguruma-to-es@4.3.3:
+    resolution: {integrity: sha512-rPiZhzC3wXwE59YQMRDodUwwT9FZ9nNBwQQfsd1wfdtlKEyCdRV0avrTcSZ5xlIvGRVPd/cx6ZN45ECmS39xvg==}
+
   open@10.2.0:
     resolution: {integrity: sha512-YgBpdJHPyQ2UE5x+hlSXcnejzAvD0b22U2OuAP+8OnlJT+PjWPxtgmGqKKc+RgTM63U9gN0YzrYc71R2WT/hTA==}
     engines: {node: '>=18'}
@@ -6584,16 +6635,6 @@ packages:
     resolution: {integrity: sha512-is0ctgGdPJ5951KulgfzvHGwJtZ5ck8l042vRkV6jrkpBzTmb/lueTqguWHy2JfVA+RY6gFVlaZgUS0j7S/dsw==}
     engines: {node: '>= 0.9.0'}
 
-  prismjs-glimmer@1.1.1:
-    resolution: {integrity: sha512-GNLdqx749bMQx40nPtLtRjhs6c+xBGmJCRizv0mZs2LPH2bhw6sYBEYKbXZWMmFWdhPdGQWB8Qf8h/k9wgBIvw==}
-    engines: {node: '>= 10'}
-    peerDependencies:
-      prismjs: ^1.23.0
-
-  prismjs@1.30.0:
-    resolution: {integrity: sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==}
-    engines: {node: '>=6'}
-
   private@0.1.8:
     resolution: {integrity: sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg==}
     engines: {node: '>= 0.6'}
@@ -6635,6 +6676,9 @@ packages:
   proper-lockfile@4.1.2:
     resolution: {integrity: sha512-TjNPblN4BwAWMXU8s9AEz4JmQxnD1NNL7bNOY/AKUzyamc379FWASUhc/K1pL2noVb+XmZKLL68cjzLsiOAMaA==}
 
+  property-information@7.1.0:
+    resolution: {integrity: sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==}
+
   protocols@2.0.2:
     resolution: {integrity: sha512-hHVTzba3wboROl0/aWRRG9dMytgH6ow//STBZh43l/wQgmMhYhOFi0EHWAPtoCz9IAUymsyP0TSBHkhgMEGNnQ==}
 
@@ -6757,6 +6801,15 @@ packages:
     resolution: {integrity: sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==}
     engines: {node: '>=0.10.0'}
 
+  regex-recursion@6.0.2:
+    resolution: {integrity: sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg==}
+
+  regex-utilities@2.3.0:
+    resolution: {integrity: sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==}
+
+  regex@6.0.1:
+    resolution: {integrity: sha512-uorlqlzAKjKQZ5P+kTJr3eeJGSVroLKoHmquUj4zHWuR+hEyNqlXsSKlYYF5F4NI6nl7tWCs0apKJ0lmfsXAPA==}
+
   regexp.prototype.flags@1.5.4:
     resolution: {integrity: sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==}
     engines: {node: '>= 0.4'}
@@ -7148,6 +7201,9 @@ packages:
   shellwords@0.1.1:
     resolution: {integrity: sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==}
 
+  shiki@3.13.0:
+    resolution: {integrity: sha512-aZW4l8Og16CokuCLf8CF8kq+KK2yOygapU5m3+hoGw0Mdosc6fPitjM+ujYarppj5ZIKGyPDPP1vqmQhr+5/0g==}
+
   side-channel-list@1.0.0:
     resolution: {integrity: sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==}
     engines: {node: '>= 0.4'}
@@ -7272,6 +7328,9 @@ packages:
     resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==}
     deprecated: Please use @jridgewell/sourcemap-codec instead
 
+  space-separated-tokens@2.0.2:
+    resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
+
   spawn-args@0.2.0:
     resolution: {integrity: sha512-73BoniQDcRWgnLAf/suKH6V5H54gd1KLzwYN9FB6J/evqTV33htH9xwV/4BHek+++jzxpVlZQKKZkqstPQPmQg==}
 
@@ -7359,6 +7418,9 @@ packages:
   string_decoder@1.3.0:
     resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==}
 
+  stringify-entities@4.0.4:
+    resolution: {integrity: sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==}
+
   strip-ansi@3.0.1:
     resolution: {integrity: sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==}
     engines: {node: '>=0.10.0'}
@@ -7646,6 +7708,9 @@ packages:
     resolution: {integrity: sha512-OLWW+Nd99NOM53aZ8ilT/YpEiOo6mXD3F4/wLbARqybSZ3Jb8IxHK5UGVbZaae0wtXAyQshVV+SeqVBik+Fbmw==}
     engines: {node: '>=8'}
 
+  trim-lines@3.0.1:
+    resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
+
   ts-api-utils@2.1.0:
     resolution: {integrity: sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==}
     engines: {node: '>=18.12'}
@@ -7789,9 +7854,21 @@ packages:
     resolution: {integrity: sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==}
     engines: {node: '>=8'}
 
+  unist-util-is@6.0.0:
+    resolution: {integrity: sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==}
+
+  unist-util-position@5.0.0:
+    resolution: {integrity: sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==}
+
   unist-util-stringify-position@4.0.0:
     resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==}
 
+  unist-util-visit-parents@6.0.1:
+    resolution: {integrity: sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==}
+
+  unist-util-visit@5.0.0:
+    resolution: {integrity: sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==}
+
   universal-user-agent@7.0.3:
     resolution: {integrity: sha512-TmnEAEAsBJVZM/AADELsK76llnwcf9vMKuPz8JflO1frO8Lchitr0fNaN9d+Ap0BjKtqWqd/J17qeDnXh8CL2A==}
 
@@ -7888,6 +7965,12 @@ packages:
     resolution: {integrity: sha512-ZZKSmDAEFOijERBLkmYfJ+vmk3w+7hOLYDNkRCuRuMJGEmqYNCNLyBBFwWKVMhfwaEF3WOd0Zlw86U/WC/+nYw==}
     engines: {'0': node >=0.6.0}
 
+  vfile-message@4.0.3:
+    resolution: {integrity: sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==}
+
+  vfile@6.0.3:
+    resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
+
   vscode-jsonrpc@8.1.0:
     resolution: {integrity: sha512-6TDy/abTQk+zDGYazgbIPc+4JoXdwC8NHU9Pbn4UJP1fehUyZmM4RHp5IthX7A6L5KS30PRui+j+tbbMMMafdw==}
     engines: {node: '>=14.0.0'}
@@ -8208,6 +8291,9 @@ packages:
     resolution: {integrity: sha512-CzhO+pFNo8ajLM2d2IW/R93ipy99LWjtwblvC1RsoSUMZgyLbYFr221TnSNT7GjGdYui6P459mw9JH/g/zW2ug==}
     engines: {node: '>=18'}
 
+  zwitch@2.0.4:
+    resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
+
 snapshots:
 
   '@asamuzakjp/css-color@3.2.0':
@@ -9954,6 +10040,39 @@ snapshots:
 
   '@rtsao/scc@1.1.0': {}
 
+  '@shikijs/core@3.13.0':
+    dependencies:
+      '@shikijs/types': 3.13.0
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+      hast-util-to-html: 9.0.5
+
+  '@shikijs/engine-javascript@3.13.0':
+    dependencies:
+      '@shikijs/types': 3.13.0
+      '@shikijs/vscode-textmate': 10.0.2
+      oniguruma-to-es: 4.3.3
+
+  '@shikijs/engine-oniguruma@3.13.0':
+    dependencies:
+      '@shikijs/types': 3.13.0
+      '@shikijs/vscode-textmate': 10.0.2
+
+  '@shikijs/langs@3.13.0':
+    dependencies:
+      '@shikijs/types': 3.13.0
+
+  '@shikijs/themes@3.13.0':
+    dependencies:
+      '@shikijs/types': 3.13.0
+
+  '@shikijs/types@3.13.0':
+    dependencies:
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+
+  '@shikijs/vscode-textmate@10.0.2': {}
+
   '@simple-dom/document@1.4.0':
     dependencies:
       '@simple-dom/interface': 1.4.0
@@ -10057,6 +10176,10 @@ snapshots:
     dependencies:
       glob: 8.1.0
 
+  '@types/hast@3.0.4':
+    dependencies:
+      '@types/unist': 3.0.3
+
   '@types/http-errors@2.0.5': {}
 
   '@types/json-schema@7.0.15': {}
@@ -10089,8 +10212,6 @@ snapshots:
     dependencies:
       parse-path: 7.1.0
 
-  '@types/prismjs@1.26.5': {}
-
   '@types/qs@6.14.0': {}
 
   '@types/qunit@2.19.13': {}
@@ -10216,6 +10337,8 @@ snapshots:
       '@typescript-eslint/types': 8.45.0
       eslint-visitor-keys: 4.2.1
 
+  '@ungap/structured-clone@1.3.0': {}
+
   '@warp-drive/build-config@5.6.0(@glint/template@1.5.2)':
     dependencies:
       '@embroider/addon-shim': 1.10.0
@@ -11399,6 +11522,8 @@ snapshots:
 
   caseless@0.12.0: {}
 
+  ccount@2.0.1: {}
+
   chalk@1.1.3:
     dependencies:
       ansi-styles: 2.2.1
@@ -11420,6 +11545,10 @@ snapshots:
 
   chalk@5.6.2: {}
 
+  character-entities-html4@2.1.0: {}
+
+  character-entities-legacy@3.0.0: {}
+
   character-entities@2.0.2: {}
 
   chardet@0.7.0: {}
@@ -11562,6 +11691,8 @@ snapshots:
     dependencies:
       delayed-stream: 1.0.0
 
+  comma-separated-tokens@2.0.3: {}
+
   commander@2.20.3: {}
 
   commander@2.8.1:
@@ -13876,6 +14007,24 @@ snapshots:
     dependencies:
       function-bind: 1.1.2
 
+  hast-util-to-html@9.0.5:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      ccount: 2.0.1
+      comma-separated-tokens: 2.0.3
+      hast-util-whitespace: 3.0.0
+      html-void-elements: 3.0.0
+      mdast-util-to-hast: 13.2.0
+      property-information: 7.1.0
+      space-separated-tokens: 2.0.2
+      stringify-entities: 4.0.4
+      zwitch: 2.0.4
+
+  hast-util-whitespace@3.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+
   heimdalljs-fs-monitor@1.1.2:
     dependencies:
       callsites: 3.1.0
@@ -13929,6 +14078,8 @@ snapshots:
 
   html-tags@3.3.1: {}
 
+  html-void-elements@3.0.0: {}
+
   http-cache-semantics@4.2.0: {}
 
   http-errors@1.6.3:
@@ -14844,6 +14995,18 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  mdast-util-to-hast@13.2.0:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      '@ungap/structured-clone': 1.3.0
+      devlop: 1.1.0
+      micromark-util-sanitize-uri: 2.0.1
+      trim-lines: 3.0.1
+      unist-util-position: 5.0.0
+      unist-util-visit: 5.0.0
+      vfile: 6.0.3
+
   mdast-util-to-string@4.0.0:
     dependencies:
       '@types/mdast': 4.0.4
@@ -15393,6 +15556,14 @@ snapshots:
     dependencies:
       mimic-function: 5.0.1
 
+  oniguruma-parser@0.12.1: {}
+
+  oniguruma-to-es@4.3.3:
+    dependencies:
+      oniguruma-parser: 0.12.1
+      regex: 6.0.1
+      regex-recursion: 6.0.2
+
   open@10.2.0:
     dependencies:
       default-browser: 5.2.1
@@ -15752,12 +15923,6 @@ snapshots:
 
   printf@0.6.1: {}
 
-  prismjs-glimmer@1.1.1(prismjs@1.30.0):
-    dependencies:
-      prismjs: 1.30.0
-
-  prismjs@1.30.0: {}
-
   private@0.1.8: {}
 
   proc-log@5.0.0: {}
@@ -15789,6 +15954,8 @@ snapshots:
       retry: 0.12.0
       signal-exit: 3.0.7
 
+  property-information@7.1.0: {}
+
   protocols@2.0.2: {}
 
   proxy-addr@2.0.7:
@@ -15943,6 +16110,16 @@ snapshots:
       extend-shallow: 3.0.2
       safe-regex: 1.1.0
 
+  regex-recursion@6.0.2:
+    dependencies:
+      regex-utilities: 2.3.0
+
+  regex-utilities@2.3.0: {}
+
+  regex@6.0.1:
+    dependencies:
+      regex-utilities: 2.3.0
+
   regexp.prototype.flags@1.5.4:
     dependencies:
       call-bind: 1.0.8
@@ -16424,6 +16601,17 @@ snapshots:
 
   shellwords@0.1.1: {}
 
+  shiki@3.13.0:
+    dependencies:
+      '@shikijs/core': 3.13.0
+      '@shikijs/engine-javascript': 3.13.0
+      '@shikijs/engine-oniguruma': 3.13.0
+      '@shikijs/langs': 3.13.0
+      '@shikijs/themes': 3.13.0
+      '@shikijs/types': 3.13.0
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+
   side-channel-list@1.0.0:
     dependencies:
       es-errors: 1.3.0
@@ -16603,6 +16791,8 @@ snapshots:
 
   sourcemap-codec@1.4.8: {}
 
+  space-separated-tokens@2.0.2: {}
+
   spawn-args@0.2.0: {}
 
   split-string@3.1.0:
@@ -16712,6 +16902,11 @@ snapshots:
     dependencies:
       safe-buffer: 5.2.1
 
+  stringify-entities@4.0.4:
+    dependencies:
+      character-entities-html4: 2.1.0
+      character-entities-legacy: 3.0.0
+
   strip-ansi@3.0.1:
     dependencies:
       ansi-regex: 2.1.1
@@ -17137,6 +17332,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  trim-lines@3.0.1: {}
+
   ts-api-utils@2.1.0(typescript@5.9.3):
     dependencies:
       typescript: 5.9.3
@@ -17289,10 +17486,29 @@ snapshots:
     dependencies:
       crypto-random-string: 2.0.0
 
+  unist-util-is@6.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-position@5.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
   unist-util-stringify-position@4.0.0:
     dependencies:
       '@types/unist': 3.0.3
 
+  unist-util-visit-parents@6.0.1:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.0
+
+  unist-util-visit@5.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.0
+      unist-util-visit-parents: 6.0.1
+
   universal-user-agent@7.0.3: {}
 
   universalify@0.1.2: {}
@@ -17367,6 +17583,16 @@ snapshots:
       core-util-is: 1.0.2
       extsprintf: 1.3.0
 
+  vfile-message@4.0.3:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-stringify-position: 4.0.0
+
+  vfile@6.0.3:
+    dependencies:
+      '@types/unist': 3.0.3
+      vfile-message: 4.0.3
+
   vscode-jsonrpc@8.1.0: {}
 
   vscode-languageserver-protocol@3.17.3:
@@ -17716,3 +17942,5 @@ snapshots:
   yoctocolors-cjs@2.1.3: {}
 
   yoctocolors@2.1.2: {}
+
+  zwitch@2.0.4: {}
diff --git a/test-app/app/components/my-custom-content.hbs b/test-app/app/components/my-custom-content.hbs
index 81704f2a..3415a3fd 100644
--- a/test-app/app/components/my-custom-content.hbs
+++ b/test-app/app/components/my-custom-content.hbs
@@ -1 +1 @@
-<span id='my-custom-content' ...attributes>My custom content</span>
\ No newline at end of file
+<span id="my-custom-content" ...attributes>My custom content</span>
\ No newline at end of file
diff --git a/test-app/app/components/my-custom-trigger.hbs b/test-app/app/components/my-custom-trigger.hbs
index 2a65423f..399e864f 100644
--- a/test-app/app/components/my-custom-trigger.hbs
+++ b/test-app/app/components/my-custom-trigger.hbs
@@ -1 +1 @@
-<span id='my-custom-trigger' ...attributes>My custom trigger</span>
\ No newline at end of file
+<span id="my-custom-trigger" ...attributes>My custom trigger</span>
\ No newline at end of file
diff --git a/test-app/app/styles/app.scss b/test-app/app/styles/app.scss
index bea4c62d..0bfa078d 100644
--- a/test-app/app/styles/app.scss
+++ b/test-app/app/styles/app.scss
@@ -1,2 +1,2 @@
 // Basic dropdown
-@import 'ember-basic-dropdown';
+@import "ember-basic-dropdown";
diff --git a/test-app/tests/integration/components/basic-dropdown-test.js b/test-app/tests/integration/components/basic-dropdown-test.js
index f2efa623..154daf74 100644
--- a/test-app/tests/integration/components/basic-dropdown-test.js
+++ b/test-app/tests/integration/components/basic-dropdown-test.js
@@ -1421,12 +1421,17 @@ module('Integration | Component | basic-dropdown', function (hooks) {
       .dom('.ember-basic-dropdown-content', find('[data-shadow]').shadowRoot)
       .exists('The dropdown is rendered');
 
+    assert
+      .dom('#dropdown-is-opened', find('[data-shadow]').shadowRoot)
+      .exists('The dropdown is opened');
 
-    assert.dom('#dropdown-is-opened', find('[data-shadow]').shadowRoot).exists('The dropdown is opened');
-
-    await click(find('[data-shadow]').shadowRoot.getElementById('dropdown-is-opened'));
+    await click(
+      find('[data-shadow]').shadowRoot.getElementById('dropdown-is-opened'),
+    );
 
-    assert.dom('#dropdown-is-opened', find('[data-shadow]').shadowRoot).exists('The dropdown stays opened when clicking content');
+    assert
+      .dom('#dropdown-is-opened', find('[data-shadow]').shadowRoot)
+      .exists('The dropdown stays opened when clicking content');
 
     await click(triggerElement);
 
@@ -1436,11 +1441,17 @@ module('Integration | Component | basic-dropdown', function (hooks) {
 
     await click(triggerElement);
 
-    assert.dom('#dropdown-is-opened', find('[data-shadow]').shadowRoot).exists('The dropdown is opened 2d time');
+    assert
+      .dom('#dropdown-is-opened', find('[data-shadow]').shadowRoot)
+      .exists('The dropdown is opened 2d time');
 
-    await click(find('[data-shadow]').shadowRoot.getElementById('dropdown-is-opened'));
+    await click(
+      find('[data-shadow]').shadowRoot.getElementById('dropdown-is-opened'),
+    );
 
-    assert.dom('#dropdown-is-opened', find('[data-shadow]').shadowRoot).exists('The dropdown stays opened when clicking content after 2d open');
+    assert
+      .dom('#dropdown-is-opened', find('[data-shadow]').shadowRoot)
+      .exists('The dropdown stays opened when clicking content after 2d open');
   });
 
   test('Shadow dom: Its `toggle` action opens and closes the dropdown when wormhole is inside shadow dom', async function (assert) {