From b0073002ef615019b9973d5d19a8b4ddb0c5cac5 Mon Sep 17 00:00:00 2001
From: Markus Sanin <markus.sanin@zeppelin-group.com>
Date: Sun, 15 Feb 2026 17:54:11 +0100
Subject: [PATCH 1/5] Convert docs to GTS

---
 docs/app/app.ts                               |  15 -
 .../calendar-nav-with-year-buttons.gts        |  36 ++
 .../calendar-nav-with-year-buttons.hbs        |  25 --
 .../calendar-nav-with-year-buttons.ts         |  11 -
 docs/app/components/code-block.gts            |  29 ++
 docs/app/components/code-block.hbs            |   8 -
 docs/app/components/code-block.ts             |  27 --
 docs/app/components/code-example.gts          | 163 ++++++++
 docs/app/components/code-example.hbs          |  67 ----
 docs/app/components/code-example.js           |  21 --
 docs/app/components/code-inline.gts           |  57 +++
 docs/app/components/code-inline.hbs           |   3 -
 docs/app/components/code-inline.ts            |  66 ----
 docs/app/components/code-snippet.hbs          |   3 -
 docs/app/components/code-snippet.ts           |  17 -
 .../days-grid-without-mon-or-wed.gts          |  62 ++++
 .../days-grid-without-mon-or-wed.hbs          |  21 --
 .../days-grid-without-mon-or-wed.js           |  37 --
 .../components/snippets/action-handling-1.gts |  25 ++
 .../components/snippets/action-handling-1.hbs |   8 -
 .../components/snippets/action-handling-1.js  |  12 -
 .../components/snippets/action-handling-2.gts |  27 ++
 .../components/snippets/action-handling-2.hbs |  10 -
 .../components/snippets/action-handling-2.js  |  14 -
 .../components/snippets/action-handling-3.gts |  25 ++
 .../components/snippets/action-handling-3.hbs |   8 -
 .../components/snippets/action-handling-3.js  |  12 -
 docs/app/components/snippets/datepicker-1.gts |  56 +++
 docs/app/components/snippets/datepicker-1.hbs |  31 --
 docs/app/components/snippets/datepicker-1.js  |  18 -
 .../components/snippets/how-to-use-it-1.gts   |   7 +
 .../components/snippets/how-to-use-it-1.hbs   |   3 -
 .../components/snippets/how-to-use-it-1.js    |   4 -
 .../components/snippets/how-to-use-it-2.gts   |  13 +
 .../components/snippets/how-to-use-it-2.hbs   |   3 -
 .../components/snippets/how-to-use-it-2.js    |   6 -
 .../components/snippets/how-to-use-it-3.gts   |  14 +
 .../components/snippets/how-to-use-it-3.hbs   |   4 -
 .../components/snippets/how-to-use-it-3.js    |   6 -
 .../components/snippets/how-to-use-it-4.gts   |  14 +
 .../components/snippets/how-to-use-it-4.hbs   |   4 -
 .../components/snippets/how-to-use-it-4.js    |   6 -
 .../components/snippets/how-to-use-it-5.gts   |   5 +
 .../components/snippets/how-to-use-it-5.hbs   |   1 -
 .../components/snippets/how-to-use-it-5.js    |   4 -
 docs/app/components/snippets/i18n-1.gts       |  35 ++
 docs/app/components/snippets/i18n-1.hbs       |  14 -
 docs/app/components/snippets/i18n-1.js        |  14 -
 docs/app/components/snippets/i18n-2.gts       |   8 +
 docs/app/components/snippets/i18n-2.hbs       |   4 -
 docs/app/components/snippets/i18n-2.js        |   4 -
 .../components/snippets/installation-2.ts.txt |   1 +
 .../snippets/installation-3.css.txt           |   1 +
 .../{installation.js => installation.ts}      |   0
 .../components/snippets/multiple-months-1.gts |  65 ++++
 .../components/snippets/multiple-months-1.hbs |  33 --
 .../components/snippets/multiple-months-1.js  |  23 --
 .../components/snippets/multiple-months-2.gts |  49 +++
 .../components/snippets/multiple-months-2.hbs |  15 -
 .../components/snippets/multiple-months-2.js  |  27 --
 .../snippets/multiple-selection-1.gts         |  33 ++
 .../snippets/multiple-selection-1.hbs         |  10 -
 .../snippets/multiple-selection-1.js          |  18 -
 .../snippets/multiple-selection-2.gts         |  52 +++
 .../snippets/multiple-selection-2.hbs         |   9 -
 .../snippets/multiple-selection-2.js          |  33 --
 .../snippets/multiple-selection-3.gts         |  36 ++
 .../snippets/multiple-selection-3.hbs         |  18 -
 .../snippets/multiple-selection-3.js          |  13 -
 .../snippets/multiple-selection-4.gts         |  24 ++
 .../snippets/multiple-selection-4.hbs         |   7 -
 .../snippets/multiple-selection-4.js          |  12 -
 docs/app/components/snippets/nav-select-1.gts | 100 +++++
 docs/app/components/snippets/nav-select-1.hbs |  39 --
 docs/app/components/snippets/nav-select-1.js  |  35 --
 docs/app/components/snippets/nav-select-2.gts | 119 ++++++
 docs/app/components/snippets/nav-select-2.hbs |  28 --
 docs/app/components/snippets/nav-select-2.js  |  64 ----
 docs/app/components/snippets/nav-select-3.gts |  67 ++++
 docs/app/components/snippets/nav-select-3.hbs |  20 -
 docs/app/components/snippets/nav-select-3.js  |  33 --
 .../components/snippets/range-selection-1.gts |  33 ++
 .../components/snippets/range-selection-1.hbs |   9 -
 .../components/snippets/range-selection-1.js  |  16 -
 .../components/snippets/range-selection-2.gts |  40 ++
 .../components/snippets/range-selection-2.hbs |  11 -
 .../components/snippets/range-selection-2.js  |  21 --
 .../components/snippets/range-selection-3.gts |  44 +++
 .../components/snippets/range-selection-3.hbs |  11 -
 .../components/snippets/range-selection-3.js  |  22 --
 .../components/snippets/range-selection-4.gts |  37 ++
 .../components/snippets/range-selection-4.hbs |  11 -
 .../components/snippets/range-selection-4.js  |  22 --
 .../components/snippets/range-selection-5.gts |  38 ++
 .../components/snippets/range-selection-5.hbs |  12 -
 .../components/snippets/range-selection-5.js  |  22 --
 .../components/snippets/range-selection-6.gts |  35 ++
 .../components/snippets/range-selection-6.hbs |  14 -
 .../components/snippets/range-selection-6.js  |  17 -
 .../components/snippets/range-selection-7.gts |  29 ++
 .../components/snippets/range-selection-7.hbs |   9 -
 .../components/snippets/range-selection-7.js  |  17 -
 .../snippets/system-wide-config-1-js.js       |   5 -
 .../components/snippets/test-helpers-1-js.js  |  10 -
 docs/app/components/snippets/the-days-0.gts   |  62 ++++
 docs/app/components/snippets/the-days-0.hbs   |  11 -
 docs/app/components/snippets/the-days-0.js    |  38 --
 docs/app/components/snippets/the-days-1.gts   |  19 +
 docs/app/components/snippets/the-days-1.hbs   |  13 -
 docs/app/components/snippets/the-days-1.js    |   4 -
 docs/app/components/snippets/the-days-2.gts   |  73 ++++
 docs/app/components/snippets/the-days-2.hbs   |  28 --
 docs/app/components/snippets/the-days-2.js    |  40 --
 docs/app/components/snippets/the-days-3.gts   |  16 +
 docs/app/components/snippets/the-days-3.hbs   |   7 -
 docs/app/components/snippets/the-days-3.js    |   4 -
 docs/app/components/snippets/the-days-4.gts   |  76 ++++
 docs/app/components/snippets/the-days-4.hbs   |  59 ---
 docs/app/components/snippets/the-days-4.js    |  12 -
 docs/app/components/snippets/the-days-5.gts   |  14 +
 docs/app/components/snippets/the-days-5.hbs   |   4 -
 docs/app/components/snippets/the-days-5.js    |   6 -
 docs/app/components/snippets/the-days-6.gts   |  29 ++
 docs/app/components/snippets/the-days-6.hbs   |   9 -
 docs/app/components/snippets/the-days-6.js    |  15 -
 docs/app/components/snippets/the-days-7.gts   |  33 ++
 docs/app/components/snippets/the-days-7.hbs   |   9 -
 docs/app/components/snippets/the-days-7.js    |  18 -
 docs/app/components/snippets/the-days-8.gts   |  46 +++
 docs/app/components/snippets/the-days-8.hbs   |  28 --
 docs/app/components/snippets/the-days-8.js    |  12 -
 docs/app/components/snippets/the-nav-1.gts    |  12 +
 docs/app/components/snippets/the-nav-1.hbs    |   7 -
 docs/app/components/snippets/the-nav-1.js     |   4 -
 docs/app/components/snippets/the-nav-2.gts    |  55 +++
 docs/app/components/snippets/the-nav-2.hbs    |  35 --
 docs/app/components/snippets/the-nav-2.js     |  12 -
 docs/app/components/snippets/the-nav-3.gts    |  29 ++
 docs/app/components/snippets/the-nav-3.hbs    |  11 -
 docs/app/components/snippets/the-nav-3.js     |  12 -
 docs/app/controllers/application.js           |   9 -
 docs/app/controllers/public-pages.js          |  38 --
 docs/app/controllers/public-pages/cookbook.js |  48 ---
 .../public-pages/cookbook/datepicker.js       |   6 -
 .../public-pages/cookbook/multiple-months.js  |   8 -
 .../public-pages/cookbook/nav-select.js       |  10 -
 docs/app/controllers/public-pages/docs.js     |  59 ---
 .../public-pages/docs/action-handling.js      |  10 -
 .../public-pages/docs/how-to-use-it.js        |  14 -
 .../app/controllers/public-pages/docs/i18n.js |   8 -
 .../public-pages/docs/multiple-selection.js   |  12 -
 .../public-pages/docs/range-selection.js      |  18 -
 .../controllers/public-pages/docs/the-days.js |  22 --
 .../controllers/public-pages/docs/the-nav.js  |  10 -
 docs/app/controllers/public-pages/index.js    |   5 -
 docs/app/helpers/format-date.js               |   8 -
 .../{global-locale.js => global-locale.ts}    |   3 +-
 docs/app/router.ts                            |   3 -
 docs/app/templates/application.gts            |   7 +
 docs/app/templates/application.hbs            |   3 -
 docs/app/templates/public-pages.gts           | 104 ++++++
 docs/app/templates/public-pages.hbs           |  51 ---
 docs/app/templates/public-pages/addons.gts    |   7 +
 docs/app/templates/public-pages/addons.hbs    |   5 -
 .../templates/public-pages/addons/index.gts   |  44 +++
 .../templates/public-pages/addons/index.hbs   |  42 ---
 docs/app/templates/public-pages/cookbook.gts  |  95 +++++
 docs/app/templates/public-pages/cookbook.hbs  |  40 --
 .../public-pages/cookbook/datepicker.hbs      |  62 ----
 .../templates/public-pages/cookbook/index.gts |  64 ++++
 .../templates/public-pages/cookbook/index.hbs |  52 ---
 .../public-pages/cookbook/multiple-months.gts |  64 ++++
 .../public-pages/cookbook/multiple-months.hbs |  59 ---
 .../public-pages/cookbook/nav-select.gts      |  98 +++++
 .../public-pages/cookbook/nav-select.hbs      |  91 -----
 docs/app/templates/public-pages/docs.gts      | 122 ++++++
 docs/app/templates/public-pages/docs.hbs      |  50 ---
 .../public-pages/docs/action-handling.gts     | 167 +++++++++
 .../public-pages/docs/action-handling.hbs     | 159 --------
 .../public-pages/docs/api-reference.gts       | 117 ++++++
 .../public-pages/docs/api-reference.hbs       | 115 ------
 .../public-pages/docs/how-to-use-it.gts       | 145 ++++++++
 .../public-pages/docs/how-to-use-it.hbs       | 134 -------
 docs/app/templates/public-pages/docs/i18n.gts |  49 +++
 docs/app/templates/public-pages/docs/i18n.hbs |  42 ---
 .../app/templates/public-pages/docs/index.gts |  83 +++++
 .../app/templates/public-pages/docs/index.hbs |  79 ----
 .../public-pages/docs/installation.gts        | 199 ++++++++++
 .../public-pages/docs/installation.hbs        | 164 --------
 .../public-pages/docs/multiple-selection.gts  | 104 ++++++
 .../public-pages/docs/multiple-selection.hbs  |  95 -----
 .../public-pages/docs/range-selection.gts     | 167 +++++++++
 .../public-pages/docs/range-selection.hbs     | 155 --------
 .../public-pages/docs/test-helpers.gts        |  73 ++++
 .../public-pages/docs/test-helpers.hbs        |  95 -----
 .../templates/public-pages/docs/the-days.gts  | 211 +++++++++++
 .../templates/public-pages/docs/the-days.hbs  | 197 ----------
 .../templates/public-pages/docs/the-nav.gts   |  97 +++++
 .../templates/public-pages/docs/the-nav.hbs   |  89 -----
 docs/app/templates/public-pages/index.gts     |  66 ++++
 docs/app/templates/public-pages/index.hbs     |  59 ---
 .../public-pages/support-the-project.hbs      | 112 ------
 docs/package.json                             |   7 +-
 docs/tsconfig.json                            |   2 +-
 docs/types/global.d.ts                        |   9 +-
 .../components/power-calendar-multiple.gts    |   6 +-
 .../src/components/power-calendar-range.gts   |   6 +-
 .../src/components/power-calendar.gts         |   6 +-
 pnpm-lock.yaml                                | 350 +++++++++++++-----
 209 files changed, 4200 insertions(+), 3928 deletions(-)
 create mode 100644 docs/app/components/calendar-nav-with-year-buttons.gts
 delete mode 100644 docs/app/components/calendar-nav-with-year-buttons.hbs
 delete mode 100644 docs/app/components/calendar-nav-with-year-buttons.ts
 create mode 100644 docs/app/components/code-block.gts
 delete mode 100644 docs/app/components/code-block.hbs
 delete mode 100644 docs/app/components/code-block.ts
 create mode 100644 docs/app/components/code-example.gts
 delete mode 100644 docs/app/components/code-example.hbs
 delete mode 100644 docs/app/components/code-example.js
 create mode 100644 docs/app/components/code-inline.gts
 delete mode 100644 docs/app/components/code-inline.hbs
 delete mode 100644 docs/app/components/code-inline.ts
 delete mode 100644 docs/app/components/code-snippet.hbs
 delete mode 100644 docs/app/components/code-snippet.ts
 create mode 100644 docs/app/components/days-grid-without-mon-or-wed.gts
 delete mode 100644 docs/app/components/days-grid-without-mon-or-wed.hbs
 delete mode 100644 docs/app/components/days-grid-without-mon-or-wed.js
 create mode 100644 docs/app/components/snippets/action-handling-1.gts
 delete mode 100644 docs/app/components/snippets/action-handling-1.hbs
 delete mode 100644 docs/app/components/snippets/action-handling-1.js
 create mode 100644 docs/app/components/snippets/action-handling-2.gts
 delete mode 100644 docs/app/components/snippets/action-handling-2.hbs
 delete mode 100644 docs/app/components/snippets/action-handling-2.js
 create mode 100644 docs/app/components/snippets/action-handling-3.gts
 delete mode 100644 docs/app/components/snippets/action-handling-3.hbs
 delete mode 100644 docs/app/components/snippets/action-handling-3.js
 create mode 100644 docs/app/components/snippets/datepicker-1.gts
 delete mode 100644 docs/app/components/snippets/datepicker-1.hbs
 delete mode 100644 docs/app/components/snippets/datepicker-1.js
 create mode 100644 docs/app/components/snippets/how-to-use-it-1.gts
 delete mode 100644 docs/app/components/snippets/how-to-use-it-1.hbs
 delete mode 100644 docs/app/components/snippets/how-to-use-it-1.js
 create mode 100644 docs/app/components/snippets/how-to-use-it-2.gts
 delete mode 100644 docs/app/components/snippets/how-to-use-it-2.hbs
 delete mode 100644 docs/app/components/snippets/how-to-use-it-2.js
 create mode 100644 docs/app/components/snippets/how-to-use-it-3.gts
 delete mode 100644 docs/app/components/snippets/how-to-use-it-3.hbs
 delete mode 100644 docs/app/components/snippets/how-to-use-it-3.js
 create mode 100644 docs/app/components/snippets/how-to-use-it-4.gts
 delete mode 100644 docs/app/components/snippets/how-to-use-it-4.hbs
 delete mode 100644 docs/app/components/snippets/how-to-use-it-4.js
 create mode 100644 docs/app/components/snippets/how-to-use-it-5.gts
 delete mode 100644 docs/app/components/snippets/how-to-use-it-5.hbs
 delete mode 100644 docs/app/components/snippets/how-to-use-it-5.js
 create mode 100644 docs/app/components/snippets/i18n-1.gts
 delete mode 100644 docs/app/components/snippets/i18n-1.hbs
 delete mode 100644 docs/app/components/snippets/i18n-1.js
 create mode 100644 docs/app/components/snippets/i18n-2.gts
 delete mode 100644 docs/app/components/snippets/i18n-2.hbs
 delete mode 100644 docs/app/components/snippets/i18n-2.js
 create mode 100644 docs/app/components/snippets/installation-2.ts.txt
 create mode 100644 docs/app/components/snippets/installation-3.css.txt
 rename docs/app/components/snippets/{installation.js => installation.ts} (100%)
 create mode 100644 docs/app/components/snippets/multiple-months-1.gts
 delete mode 100644 docs/app/components/snippets/multiple-months-1.hbs
 delete mode 100644 docs/app/components/snippets/multiple-months-1.js
 create mode 100644 docs/app/components/snippets/multiple-months-2.gts
 delete mode 100644 docs/app/components/snippets/multiple-months-2.hbs
 delete mode 100644 docs/app/components/snippets/multiple-months-2.js
 create mode 100644 docs/app/components/snippets/multiple-selection-1.gts
 delete mode 100644 docs/app/components/snippets/multiple-selection-1.hbs
 delete mode 100644 docs/app/components/snippets/multiple-selection-1.js
 create mode 100644 docs/app/components/snippets/multiple-selection-2.gts
 delete mode 100644 docs/app/components/snippets/multiple-selection-2.hbs
 delete mode 100644 docs/app/components/snippets/multiple-selection-2.js
 create mode 100644 docs/app/components/snippets/multiple-selection-3.gts
 delete mode 100644 docs/app/components/snippets/multiple-selection-3.hbs
 delete mode 100644 docs/app/components/snippets/multiple-selection-3.js
 create mode 100644 docs/app/components/snippets/multiple-selection-4.gts
 delete mode 100644 docs/app/components/snippets/multiple-selection-4.hbs
 delete mode 100644 docs/app/components/snippets/multiple-selection-4.js
 create mode 100644 docs/app/components/snippets/nav-select-1.gts
 delete mode 100644 docs/app/components/snippets/nav-select-1.hbs
 delete mode 100644 docs/app/components/snippets/nav-select-1.js
 create mode 100644 docs/app/components/snippets/nav-select-2.gts
 delete mode 100644 docs/app/components/snippets/nav-select-2.hbs
 delete mode 100644 docs/app/components/snippets/nav-select-2.js
 create mode 100644 docs/app/components/snippets/nav-select-3.gts
 delete mode 100644 docs/app/components/snippets/nav-select-3.hbs
 delete mode 100644 docs/app/components/snippets/nav-select-3.js
 create mode 100644 docs/app/components/snippets/range-selection-1.gts
 delete mode 100644 docs/app/components/snippets/range-selection-1.hbs
 delete mode 100644 docs/app/components/snippets/range-selection-1.js
 create mode 100644 docs/app/components/snippets/range-selection-2.gts
 delete mode 100644 docs/app/components/snippets/range-selection-2.hbs
 delete mode 100644 docs/app/components/snippets/range-selection-2.js
 create mode 100644 docs/app/components/snippets/range-selection-3.gts
 delete mode 100644 docs/app/components/snippets/range-selection-3.hbs
 delete mode 100644 docs/app/components/snippets/range-selection-3.js
 create mode 100644 docs/app/components/snippets/range-selection-4.gts
 delete mode 100644 docs/app/components/snippets/range-selection-4.hbs
 delete mode 100644 docs/app/components/snippets/range-selection-4.js
 create mode 100644 docs/app/components/snippets/range-selection-5.gts
 delete mode 100644 docs/app/components/snippets/range-selection-5.hbs
 delete mode 100644 docs/app/components/snippets/range-selection-5.js
 create mode 100644 docs/app/components/snippets/range-selection-6.gts
 delete mode 100644 docs/app/components/snippets/range-selection-6.hbs
 delete mode 100644 docs/app/components/snippets/range-selection-6.js
 create mode 100644 docs/app/components/snippets/range-selection-7.gts
 delete mode 100644 docs/app/components/snippets/range-selection-7.hbs
 delete mode 100644 docs/app/components/snippets/range-selection-7.js
 delete mode 100644 docs/app/components/snippets/system-wide-config-1-js.js
 delete mode 100644 docs/app/components/snippets/test-helpers-1-js.js
 create mode 100644 docs/app/components/snippets/the-days-0.gts
 delete mode 100644 docs/app/components/snippets/the-days-0.hbs
 delete mode 100644 docs/app/components/snippets/the-days-0.js
 create mode 100644 docs/app/components/snippets/the-days-1.gts
 delete mode 100644 docs/app/components/snippets/the-days-1.hbs
 delete mode 100644 docs/app/components/snippets/the-days-1.js
 create mode 100644 docs/app/components/snippets/the-days-2.gts
 delete mode 100644 docs/app/components/snippets/the-days-2.hbs
 delete mode 100644 docs/app/components/snippets/the-days-2.js
 create mode 100644 docs/app/components/snippets/the-days-3.gts
 delete mode 100644 docs/app/components/snippets/the-days-3.hbs
 delete mode 100644 docs/app/components/snippets/the-days-3.js
 create mode 100644 docs/app/components/snippets/the-days-4.gts
 delete mode 100644 docs/app/components/snippets/the-days-4.hbs
 delete mode 100644 docs/app/components/snippets/the-days-4.js
 create mode 100644 docs/app/components/snippets/the-days-5.gts
 delete mode 100644 docs/app/components/snippets/the-days-5.hbs
 delete mode 100644 docs/app/components/snippets/the-days-5.js
 create mode 100644 docs/app/components/snippets/the-days-6.gts
 delete mode 100644 docs/app/components/snippets/the-days-6.hbs
 delete mode 100644 docs/app/components/snippets/the-days-6.js
 create mode 100644 docs/app/components/snippets/the-days-7.gts
 delete mode 100644 docs/app/components/snippets/the-days-7.hbs
 delete mode 100644 docs/app/components/snippets/the-days-7.js
 create mode 100644 docs/app/components/snippets/the-days-8.gts
 delete mode 100644 docs/app/components/snippets/the-days-8.hbs
 delete mode 100644 docs/app/components/snippets/the-days-8.js
 create mode 100644 docs/app/components/snippets/the-nav-1.gts
 delete mode 100644 docs/app/components/snippets/the-nav-1.hbs
 delete mode 100644 docs/app/components/snippets/the-nav-1.js
 create mode 100644 docs/app/components/snippets/the-nav-2.gts
 delete mode 100644 docs/app/components/snippets/the-nav-2.hbs
 delete mode 100644 docs/app/components/snippets/the-nav-2.js
 create mode 100644 docs/app/components/snippets/the-nav-3.gts
 delete mode 100644 docs/app/components/snippets/the-nav-3.hbs
 delete mode 100644 docs/app/components/snippets/the-nav-3.js
 delete mode 100644 docs/app/controllers/application.js
 delete mode 100644 docs/app/controllers/public-pages.js
 delete mode 100644 docs/app/controllers/public-pages/cookbook.js
 delete mode 100644 docs/app/controllers/public-pages/cookbook/datepicker.js
 delete mode 100644 docs/app/controllers/public-pages/cookbook/multiple-months.js
 delete mode 100644 docs/app/controllers/public-pages/cookbook/nav-select.js
 delete mode 100644 docs/app/controllers/public-pages/docs.js
 delete mode 100644 docs/app/controllers/public-pages/docs/action-handling.js
 delete mode 100644 docs/app/controllers/public-pages/docs/how-to-use-it.js
 delete mode 100644 docs/app/controllers/public-pages/docs/i18n.js
 delete mode 100644 docs/app/controllers/public-pages/docs/multiple-selection.js
 delete mode 100644 docs/app/controllers/public-pages/docs/range-selection.js
 delete mode 100644 docs/app/controllers/public-pages/docs/the-days.js
 delete mode 100644 docs/app/controllers/public-pages/docs/the-nav.js
 delete mode 100644 docs/app/controllers/public-pages/index.js
 delete mode 100644 docs/app/helpers/format-date.js
 rename docs/app/initializers/{global-locale.js => global-locale.ts} (76%)
 create mode 100644 docs/app/templates/application.gts
 delete mode 100644 docs/app/templates/application.hbs
 create mode 100644 docs/app/templates/public-pages.gts
 delete mode 100644 docs/app/templates/public-pages.hbs
 create mode 100644 docs/app/templates/public-pages/addons.gts
 delete mode 100644 docs/app/templates/public-pages/addons.hbs
 create mode 100644 docs/app/templates/public-pages/addons/index.gts
 delete mode 100644 docs/app/templates/public-pages/addons/index.hbs
 create mode 100644 docs/app/templates/public-pages/cookbook.gts
 delete mode 100644 docs/app/templates/public-pages/cookbook.hbs
 delete mode 100644 docs/app/templates/public-pages/cookbook/datepicker.hbs
 create mode 100644 docs/app/templates/public-pages/cookbook/index.gts
 delete mode 100644 docs/app/templates/public-pages/cookbook/index.hbs
 create mode 100644 docs/app/templates/public-pages/cookbook/multiple-months.gts
 delete mode 100644 docs/app/templates/public-pages/cookbook/multiple-months.hbs
 create mode 100644 docs/app/templates/public-pages/cookbook/nav-select.gts
 delete mode 100644 docs/app/templates/public-pages/cookbook/nav-select.hbs
 create mode 100644 docs/app/templates/public-pages/docs.gts
 delete mode 100644 docs/app/templates/public-pages/docs.hbs
 create mode 100644 docs/app/templates/public-pages/docs/action-handling.gts
 delete mode 100644 docs/app/templates/public-pages/docs/action-handling.hbs
 create mode 100644 docs/app/templates/public-pages/docs/api-reference.gts
 delete mode 100644 docs/app/templates/public-pages/docs/api-reference.hbs
 create mode 100644 docs/app/templates/public-pages/docs/how-to-use-it.gts
 delete mode 100644 docs/app/templates/public-pages/docs/how-to-use-it.hbs
 create mode 100644 docs/app/templates/public-pages/docs/i18n.gts
 delete mode 100644 docs/app/templates/public-pages/docs/i18n.hbs
 create mode 100644 docs/app/templates/public-pages/docs/index.gts
 delete mode 100644 docs/app/templates/public-pages/docs/index.hbs
 create mode 100644 docs/app/templates/public-pages/docs/installation.gts
 delete mode 100644 docs/app/templates/public-pages/docs/installation.hbs
 create mode 100644 docs/app/templates/public-pages/docs/multiple-selection.gts
 delete mode 100644 docs/app/templates/public-pages/docs/multiple-selection.hbs
 create mode 100644 docs/app/templates/public-pages/docs/range-selection.gts
 delete mode 100644 docs/app/templates/public-pages/docs/range-selection.hbs
 create mode 100644 docs/app/templates/public-pages/docs/test-helpers.gts
 delete mode 100644 docs/app/templates/public-pages/docs/test-helpers.hbs
 create mode 100644 docs/app/templates/public-pages/docs/the-days.gts
 delete mode 100644 docs/app/templates/public-pages/docs/the-days.hbs
 create mode 100644 docs/app/templates/public-pages/docs/the-nav.gts
 delete mode 100644 docs/app/templates/public-pages/docs/the-nav.hbs
 create mode 100644 docs/app/templates/public-pages/index.gts
 delete mode 100644 docs/app/templates/public-pages/index.hbs
 delete mode 100644 docs/app/templates/public-pages/support-the-project.hbs

diff --git a/docs/app/app.ts b/docs/app/app.ts
index 441c17f6..b88e6877 100644
--- a/docs/app/app.ts
+++ b/docs/app/app.ts
@@ -5,26 +5,11 @@ import config from 'docs/config/environment';
 import { importSync, isDevelopingApp, macroCondition } from '@embroider/macros';
 import { registerDateLibrary } from 'ember-power-calendar';
 import DateUtils from 'ember-power-calendar-moment';
-import Prism from 'prismjs';
-import 'prismjs/plugins/normalize-whitespace/prism-normalize-whitespace';
-import 'prismjs/components/prism-css';
-import 'prismjs/components/prism-scss';
-import 'prismjs/components/prism-less';
-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);
-
 registerDateLibrary(DateUtils);
 
 export default class App extends Application {
diff --git a/docs/app/components/calendar-nav-with-year-buttons.gts b/docs/app/components/calendar-nav-with-year-buttons.gts
new file mode 100644
index 00000000..efd007a7
--- /dev/null
+++ b/docs/app/components/calendar-nav-with-year-buttons.gts
@@ -0,0 +1,36 @@
+import { fn } from '@ember/helper';
+import { on } from '@ember/modifier';
+import PowerCalendarNav from 'ember-power-calendar/components/power-calendar/nav';
+import { formatDate } from 'ember-power-calendar/utils';
+
+export default class CalendarNavWithYearButtons extends PowerCalendarNav {
+  <template>
+    {{#if @calendar.actions.moveCenter}}
+      <nav class="ember-power-calendar-nav">
+        <button
+          class="ember-power-calendar-nav-control"
+          {{on "click" (fn @calendar.actions.moveCenter -12 "month" @calendar)}}
+          type="button"
+        >«</button>
+        <button
+          class="ember-power-calendar-nav-control"
+          {{on "click" (fn @calendar.actions.moveCenter -1 "month" @calendar)}}
+          type="button"
+        >‹</button>
+        <div class="ember-power-calendar-nav-title">
+          {{formatDate @calendar.center "MMMM YYYY"}}
+        </div>
+        <button
+          class="ember-power-calendar-nav-control"
+          {{on "click" (fn @calendar.actions.moveCenter 1 "month" @calendar)}}
+          type="button"
+        >›</button>
+        <button
+          class="ember-power-calendar-nav-control"
+          {{on "click" (fn @calendar.actions.moveCenter 12 "month" @calendar)}}
+          type="button"
+        >»</button>
+      </nav>
+    {{/if}}
+  </template>
+}
diff --git a/docs/app/components/calendar-nav-with-year-buttons.hbs b/docs/app/components/calendar-nav-with-year-buttons.hbs
deleted file mode 100644
index 1e3ae813..00000000
--- a/docs/app/components/calendar-nav-with-year-buttons.hbs
+++ /dev/null
@@ -1,25 +0,0 @@
-<nav class="ember-power-calendar-nav">
-  <button
-    class="ember-power-calendar-nav-control"
-    {{on "click" (fn @calendar.actions.moveCenter -12 "month")}}
-    type="button"
-  >«</button>
-  <button
-    class="ember-power-calendar-nav-control"
-    {{on "click" (fn @calendar.actions.moveCenter -1 "month")}}
-    type="button"
-  >‹</button>
-  <div class="ember-power-calendar-nav-title">
-    {{format-date @calendar.center "MMMM YYYY"}}
-  </div>
-  <button
-    class="ember-power-calendar-nav-control"
-    {{on "click" (fn @calendar.actions.moveCenter 1 "month")}}
-    type="button"
-  >›</button>
-  <button
-    class="ember-power-calendar-nav-control"
-    {{on "click" (fn @calendar.actions.moveCenter 12 "month")}}
-    type="button"
-  >»</button>
-</nav>
\ No newline at end of file
diff --git a/docs/app/components/calendar-nav-with-year-buttons.ts b/docs/app/components/calendar-nav-with-year-buttons.ts
deleted file mode 100644
index e2061556..00000000
--- a/docs/app/components/calendar-nav-with-year-buttons.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import templateOnly from '@ember/component/template-only';
-
-export interface CalendarNavWithYearButtonsSignature {
-  Element: Element;
-  Args: {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    calendar: any;
-  };
-}
-
-export default templateOnly<CalendarNavWithYearButtonsSignature>();
diff --git a/docs/app/components/code-block.gts b/docs/app/components/code-block.gts
new file mode 100644
index 00000000..690a8f4d
--- /dev/null
+++ b/docs/app/components/code-block.gts
@@ -0,0 +1,29 @@
+import Component from '@glimmer/component';
+import CodeInline from './code-inline';
+
+interface CodeBlockSignature {
+  Element: HTMLElement;
+  Args: {
+    fileName: string;
+    language?: string;
+    class?: string;
+  };
+}
+
+export default class CodeBlock extends Component<CodeBlockSignature> {
+  get language() {
+    return this.args.language ?? 'markup';
+  }
+
+  <template>
+    <div class="code-block {{@class}}">
+      {{~! ~}}
+      <CodeInline
+        ...attributes
+        @fileName={{@fileName}}
+        @language={{@language}}
+      />
+      {{~! ~}}
+    </div>
+  </template>
+}
diff --git a/docs/app/components/code-block.hbs b/docs/app/components/code-block.hbs
deleted file mode 100644
index 143a9a47..00000000
--- a/docs/app/components/code-block.hbs
+++ /dev/null
@@ -1,8 +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-block.ts b/docs/app/components/code-block.ts
deleted file mode 100644
index 76668d0c..00000000
--- a/docs/app/components/code-block.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import Component from '@glimmer/component';
-
-interface CodeBlockSignature {
-  Element: HTMLElement;
-  Args: {
-    code: string;
-    language?: string;
-    showLineNumbers?: boolean;
-    start?: string;
-  };
-}
-
-export default class CodeBlock extends Component<CodeBlockSignature> {
-  get language() {
-    return this.args.language ?? 'markup';
-  }
-
-  get languageClass() {
-    return `language-${this.language}`;
-  }
-}
-
-declare module '@glint/environment-ember-loose/registry' {
-  export default interface Registry {
-    CodeBlock: typeof CodeBlock;
-  }
-}
diff --git a/docs/app/components/code-example.gts b/docs/app/components/code-example.gts
new file mode 100644
index 00000000..e9c152ac
--- /dev/null
+++ b/docs/app/components/code-example.gts
@@ -0,0 +1,163 @@
+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';
+
+interface CodeExampleSignature {
+  Element: HTMLElement;
+  Args: {
+    glimmerTs?: string;
+    hbs?: string;
+    hbs2?: string;
+    js?: string;
+    css?: string;
+    scss?: string;
+    activeTab?: string;
+    showResult?: boolean;
+    codeBlockClass?: string;
+  };
+  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 @glimmerTs}}
+        {{#if (eq this.activeTab "glimmer-ts")}}
+          <CodeBlock
+            @language="gts"
+            @fileName={{@glimmerTs}}
+            @class={{@codeBlockClass}}
+          />
+        {{/if}}
+      {{/if}}
+      {{#if @hbs}}
+        {{#if (eq this.activeTab "hbs")}}
+          <CodeBlock
+            @language="handlebars"
+            @fileName={{@hbs}}
+            @class={{@codeBlockClass}}
+          />
+        {{/if}}
+      {{/if}}
+      {{#if @hbs2}}
+        <CodeBlock
+          @language="handlebars"
+          @fileName={{@hbs2}}
+          @class={{@codeBlockClass}}
+        />
+      {{/if}}
+      {{#if @js}}
+        {{#if (eq this.activeTab "js")}}
+          <CodeBlock
+            @language="js"
+            @fileName={{@js}}
+            @class={{@codeBlockClass}}
+          />
+        {{/if}}
+      {{/if}}
+      {{#if @scss}}
+        {{#if (eq this.activeTab "scss")}}
+          <CodeBlock
+            @language="scss"
+            @fileName={{@scss}}
+            @class={{@codeBlockClass}}
+          />
+        {{/if}}
+      {{/if}}
+      {{#if @css}}
+        {{#if (eq this.activeTab "css")}}
+          <CodeBlock
+            @language="css"
+            @fileName={{@css}}
+            @class={{@codeBlockClass}}
+          />
+        {{/if}}
+      {{/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 7bf731d1..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-example-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="markup" @code={{snippet.source}} />
-    {{/let}}
-  {{/if}}
-  {{#if @hbs2}}
-    {{#let (get-code-snippet @hbs2) as |snippet|}}
-      <CodeBlock @language="markup" @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.gts b/docs/app/components/code-inline.gts
new file mode 100644
index 00000000..efc2001d
--- /dev/null
+++ b/docs/app/components/code-inline.gts
@@ -0,0 +1,57 @@
+import Component from '@glimmer/component';
+import { modifier } from 'ember-modifier';
+import { htmlSafe, type SafeString } from '@ember/template';
+import { tracked } from '@glimmer/tracking';
+import { codeToHtml } from 'shiki';
+import { task } from 'ember-concurrency';
+
+const files = import.meta.glob('./snippets/*', {
+  query: '?raw',
+  import: 'default',
+}) as Record<string, () => Promise<string>>;
+
+async function loadSnippet(name: string) {
+  const path = `./snippets/${name}` as const;
+  const loader = files[path];
+  if (!loader) throw new Error(`File not found: ${path}`);
+  return await loader();
+}
+
+interface CodeInlineSignature {
+  Element: HTMLElement;
+  Args: {
+    fileName: string;
+    language?: string;
+  };
+}
+
+export default class CodeInline extends Component<CodeInlineSignature> {
+  @tracked prismCode: string | SafeString = '';
+
+  get language() {
+    return this.args.language ?? 'markup';
+  }
+
+  setup = modifier(() => {
+    void this.generateCode.perform();
+  });
+
+  generateCode = task(async () => {
+    const language = this.language;
+
+    const code = await loadSnippet(this.args.fileName);
+
+    const htmlCode = await codeToHtml(code, {
+      lang: language,
+      theme: 'github-light-default',
+    });
+
+    this.prismCode = htmlSafe(htmlCode);
+  });
+
+  <template>
+    <div ...attributes {{this.setup}}>
+      {{~! ~}}{{this.prismCode}}{{~! ~}}
+    </div>
+  </template>
+}
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/code-inline.ts b/docs/app/components/code-inline.ts
deleted file mode 100644
index 65a10f64..00000000
--- a/docs/app/components/code-inline.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import Component from '@glimmer/component';
-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';
-
-interface CodeInlineSignature {
-  Element: HTMLElement;
-  Args: {
-    code: string;
-    language?: string;
-  };
-}
-
-export default class CodeInline extends Component<CodeInlineSignature> {
-  @tracked prismCode: string | SafeString = '';
-
-  get code() {
-    const code = this.args.code;
-
-    assert(
-      "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
-      return Prism.plugins['NormalizeWhitespace'].normalize(code) as string;
-    }
-
-    return code;
-  }
-
-  get language() {
-    return this.args.language ?? 'markup';
-  }
-
-  get languageClass() {
-    return `language-${this.language}`;
-  }
-
-  setPrismCode = modifier((element: Element) => {
-    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,
-    });
-  });
-}
-
-declare module '@glint/environment-ember-loose/registry' {
-  export default interface Registry {
-    CodeInline: typeof CodeInline;
-  }
-}
diff --git a/docs/app/components/code-snippet.hbs b/docs/app/components/code-snippet.hbs
deleted file mode 100644
index e026ce9f..00000000
--- a/docs/app/components/code-snippet.hbs
+++ /dev/null
@@ -1,3 +0,0 @@
-{{#let (get-code-snippet @name) as |snippet|}}
-  <CodeBlock @language={{snippet.language}} @code={{snippet.source}} />
-{{/let}}
\ No newline at end of file
diff --git a/docs/app/components/code-snippet.ts b/docs/app/components/code-snippet.ts
deleted file mode 100644
index 332d9110..00000000
--- a/docs/app/components/code-snippet.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import Component from '@glimmer/component';
-
-interface CodeSnippetSignature {
-  Element: HTMLElement;
-  Args: {
-    name: string;
-  };
-}
-
-// eslint-disable-next-line ember/no-empty-glimmer-component-classes
-export default class CodeSnippet extends Component<CodeSnippetSignature> {}
-
-declare module '@glint/environment-ember-loose/registry' {
-  export default interface Registry {
-    CodeSnippet: typeof CodeSnippet;
-  }
-}
diff --git a/docs/app/components/days-grid-without-mon-or-wed.gts b/docs/app/components/days-grid-without-mon-or-wed.gts
new file mode 100644
index 00000000..5c06d043
--- /dev/null
+++ b/docs/app/components/days-grid-without-mon-or-wed.gts
@@ -0,0 +1,62 @@
+import PowerCalendarDays from 'ember-power-calendar/components/power-calendar/days';
+import {
+  add,
+  isBefore,
+  startOf,
+  endOf,
+  weekday,
+  formatDate,
+} from 'ember-power-calendar/utils';
+
+export default class DaysGridWithoutMonOrWed extends PowerCalendarDays {
+  get customDays() {
+    const now = new Date();
+    let day = startOf(startOf(now, 'month'), 'isoWeek');
+    const lastDay = endOf(endOf(now, 'month'), 'isoWeek');
+    const days = [];
+    while (isBefore(day, lastDay)) {
+      if (weekday(day) !== 1 && weekday(day) !== 3) {
+        // Skip Mon/Wed
+        const copy = new Date(day);
+        const isCurrentMonth = copy.getMonth() === now.getMonth();
+        days.push({ date: copy, isCurrentMonth });
+      }
+      day = add(day, 1, 'day');
+    }
+    return days;
+  }
+
+  get weeksWithoutMondaysOrWednesday() {
+    const weeks = [];
+    let i = 0;
+    while (this.customDays[i]) {
+      weeks.push({ days: this.days.slice(i, i + 5) });
+      i += 5;
+    }
+    return weeks;
+  }
+
+  <template>
+    <div class="ember-power-calendar-row ember-power-calendar-weekdays">
+      <div class="ember-power-calendar-weekday">Tue</div>
+      <div class="ember-power-calendar-weekday">Thu</div>
+      <div class="ember-power-calendar-weekday">Fri</div>
+      <div class="ember-power-calendar-weekday">Sat</div>
+      <div class="ember-power-calendar-weekday">Sun</div>
+    </div>
+    <div class="ember-power-calendar-day-grid">
+      {{#each this.weeksWithoutMondaysOrWednesday as |week|}}
+        <div class="ember-power-calendar-row ember-power-calendar-week">
+          {{#each week.days as |day|}}
+            <div
+              class="ember-power-calendar-day
+                {{if day.isCurrentMonth 'ember-power-calendar-day--current-month'}}"
+            >
+              {{formatDate day.date "D"}}
+            </div>
+          {{/each}}
+        </div>
+      {{/each}}
+    </div>
+  </template>
+}
diff --git a/docs/app/components/days-grid-without-mon-or-wed.hbs b/docs/app/components/days-grid-without-mon-or-wed.hbs
deleted file mode 100644
index 50457a93..00000000
--- a/docs/app/components/days-grid-without-mon-or-wed.hbs
+++ /dev/null
@@ -1,21 +0,0 @@
-<div class="ember-power-calendar-row ember-power-calendar-weekdays">
-  <div class="ember-power-calendar-weekday">Tue</div>
-  <div class="ember-power-calendar-weekday">Thu</div>
-  <div class="ember-power-calendar-weekday">Fri</div>
-  <div class="ember-power-calendar-weekday">Sat</div>
-  <div class="ember-power-calendar-weekday">Sun</div>
-</div>
-<div class="ember-power-calendar-day-grid">
-  {{#each this.weeksWithoutMondaysOrWednesday as |week|}}
-    <div class="ember-power-calendar-row ember-power-calendar-week">
-      {{#each week.days as |day|}}
-        <div
-          class="ember-power-calendar-day
-            {{if day.isCurrentMonth 'ember-power-calendar-day--current-month'}}"
-        >
-          {{format-date day.date "D"}}
-        </div>
-      {{/each}}
-    </div>
-  {{/each}}
-</div>
\ No newline at end of file
diff --git a/docs/app/components/days-grid-without-mon-or-wed.js b/docs/app/components/days-grid-without-mon-or-wed.js
deleted file mode 100644
index 2828560b..00000000
--- a/docs/app/components/days-grid-without-mon-or-wed.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import Component from '@glimmer/component';
-import {
-  add,
-  isBefore,
-  startOf,
-  endOf,
-  weekday,
-} from 'ember-power-calendar/utils';
-
-export default class extends Component {
-  get days() {
-    let now = new Date();
-    let day = startOf(startOf(now, 'month'), 'isoWeek');
-    let lastDay = endOf(endOf(now, 'month'), 'isoWeek');
-    let days = [];
-    while (isBefore(day, lastDay)) {
-      if (weekday(day) !== 1 && weekday(day) !== 3) {
-        // Skip Mon/Wed
-        let copy = new Date(day);
-        let isCurrentMonth = copy.getMonth() === now.getMonth();
-        days.push({ date: copy, isCurrentMonth });
-      }
-      day = add(day, 1, 'day');
-    }
-    return days;
-  }
-
-  get weeksWithoutMondaysOrWednesday() {
-    let weeks = [];
-    let i = 0;
-    while (this.days[i]) {
-      weeks.push({ days: this.days.slice(i, i + 5) });
-      i += 5;
-    }
-    return weeks;
-  }
-}
diff --git a/docs/app/components/snippets/action-handling-1.gts b/docs/app/components/snippets/action-handling-1.gts
new file mode 100644
index 00000000..55e87544
--- /dev/null
+++ b/docs/app/components/snippets/action-handling-1.gts
@@ -0,0 +1,25 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import PowerCalendar from 'ember-power-calendar/components/power-calendar';
+import type { NormalizeCalendarValue } from 'ember-power-calendar/utils';
+
+export default class extends Component {
+  @tracked center: Date | undefined;
+
+  @action
+  onCenterChange(selected: NormalizeCalendarValue) {
+    this.center = selected.date;
+  }
+
+  <template>
+    <PowerCalendar
+      @center={{this.center}}
+      @onCenterChange={{this.onCenterChange}}
+      as |calendar|
+    >
+      <calendar.Nav />
+      <calendar.Days />
+    </PowerCalendar>
+  </template>
+}
diff --git a/docs/app/components/snippets/action-handling-1.hbs b/docs/app/components/snippets/action-handling-1.hbs
deleted file mode 100644
index 12f4b89e..00000000
--- a/docs/app/components/snippets/action-handling-1.hbs
+++ /dev/null
@@ -1,8 +0,0 @@
-<PowerCalendar
-  @center={{this.center}}
-  @onCenterChange={{this.onCenterChange}}
-  as |calendar|
->
-  <calendar.Nav />
-  <calendar.Days />
-</PowerCalendar>
\ No newline at end of file
diff --git a/docs/app/components/snippets/action-handling-1.js b/docs/app/components/snippets/action-handling-1.js
deleted file mode 100644
index e5a70c4c..00000000
--- a/docs/app/components/snippets/action-handling-1.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
-
-export default class extends Component {
-  @tracked center;
-
-  @action
-  onCenterChange(selected) {
-    this.center = selected.date;
-  }
-}
diff --git a/docs/app/components/snippets/action-handling-2.gts b/docs/app/components/snippets/action-handling-2.gts
new file mode 100644
index 00000000..c42ef471
--- /dev/null
+++ b/docs/app/components/snippets/action-handling-2.gts
@@ -0,0 +1,27 @@
+import Component from '@glimmer/component';
+import { dropTask, timeout } from 'ember-concurrency';
+import { tracked } from '@glimmer/tracking';
+import PowerCalendar from 'ember-power-calendar/components/power-calendar';
+
+export default class extends Component {
+  @tracked center: Date | undefined;
+
+  updateMonth = dropTask(async ({ date }) => {
+    await timeout(600); // Pretend this is an ajax call to the server...
+    // ...and that here we update the events somehow
+    this.center = date;
+  });
+
+  <template>
+    <PowerCalendar
+      @center={{this.center}}
+      @onCenterChange={{this.updateMonth.perform}}
+      as |calendar|
+    >
+      <div class={{if calendar.loading "loading-spiner-overlay"}}>
+        <calendar.Nav />
+        <calendar.Days />
+      </div>
+    </PowerCalendar>
+  </template>
+}
diff --git a/docs/app/components/snippets/action-handling-2.hbs b/docs/app/components/snippets/action-handling-2.hbs
deleted file mode 100644
index 3fc5fbd4..00000000
--- a/docs/app/components/snippets/action-handling-2.hbs
+++ /dev/null
@@ -1,10 +0,0 @@
-<PowerCalendar
-  @center={{this.center}}
-  @onCenterChange={{perform this.updateMonth}}
-  as |calendar|
->
-  <div class={{if calendar.loading "loading-spiner-overlay"}}>
-    <calendar.Nav />
-    <calendar.Days />
-  </div>
-</PowerCalendar>
\ No newline at end of file
diff --git a/docs/app/components/snippets/action-handling-2.js b/docs/app/components/snippets/action-handling-2.js
deleted file mode 100644
index 2760f50a..00000000
--- a/docs/app/components/snippets/action-handling-2.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import Component from '@glimmer/component';
-import { dropTask, timeout } from 'ember-concurrency';
-import { tracked } from '@glimmer/tracking';
-
-export default class extends Component {
-  @tracked center;
-  @tracked selected;
-
-  updateMonth = dropTask(async ({ date }) => {
-    await timeout(600); // Pretend this is an ajax call to the server...
-    // ...and that here we update the events somehow
-    this.center = date;
-  });
-}
diff --git a/docs/app/components/snippets/action-handling-3.gts b/docs/app/components/snippets/action-handling-3.gts
new file mode 100644
index 00000000..1dcd9f83
--- /dev/null
+++ b/docs/app/components/snippets/action-handling-3.gts
@@ -0,0 +1,25 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import PowerCalendar from 'ember-power-calendar/components/power-calendar';
+import type { NormalizeCalendarValue } from 'ember-power-calendar/utils';
+
+export default class extends Component {
+  @tracked selected: Date | undefined = new Date('2016-05-17');
+
+  @action
+  onSelect(selected: NormalizeCalendarValue) {
+    this.selected = selected.date;
+  }
+
+  <template>
+    <PowerCalendar
+      @selected={{this.selected}}
+      @onSelect={{this.onSelect}}
+      as |calendar|
+    >
+      <calendar.Nav />
+      <calendar.Days />
+    </PowerCalendar>
+  </template>
+}
diff --git a/docs/app/components/snippets/action-handling-3.hbs b/docs/app/components/snippets/action-handling-3.hbs
deleted file mode 100644
index d7c349f9..00000000
--- a/docs/app/components/snippets/action-handling-3.hbs
+++ /dev/null
@@ -1,8 +0,0 @@
-<PowerCalendar
-  @selected={{this.selected}}
-  @onSelect={{this.onSelect}}
-  as |calendar|
->
-  <calendar.Nav />
-  <calendar.Days />
-</PowerCalendar>
\ No newline at end of file
diff --git a/docs/app/components/snippets/action-handling-3.js b/docs/app/components/snippets/action-handling-3.js
deleted file mode 100644
index 31b493ec..00000000
--- a/docs/app/components/snippets/action-handling-3.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
-
-export default class extends Component {
-  @tracked selected = new Date('2016-05-17');
-
-  @action
-  onSelect(selected) {
-    this.selected = selected.date;
-  }
-}
diff --git a/docs/app/components/snippets/datepicker-1.gts b/docs/app/components/snippets/datepicker-1.gts
new file mode 100644
index 00000000..a393d1ce
--- /dev/null
+++ b/docs/app/components/snippets/datepicker-1.gts
@@ -0,0 +1,56 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { on } from '@ember/modifier';
+import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown';
+import PowerCalendar from 'ember-power-calendar/components/power-calendar';
+import { formatDate, type NormalizeCalendarValue, type PowerCalendarDay } from 'ember-power-calendar/utils';
+
+export default class extends Component {
+  @tracked center: Date | undefined = undefined;
+  @tracked selected: Date | undefined = undefined;
+
+  @action
+  onCenterChange(selected: NormalizeCalendarValue) {
+    this.center = selected.date;
+  }
+
+  @action
+  onSelect(selected: PowerCalendarDay) {
+    this.selected = selected.date;
+  }
+
+  <template>
+    <BasicDropdown as |dropdown|>
+      <div>
+        <label for="datepicker-1">Date picker</label>
+      </div>
+
+      <input
+        type="text"
+        data-ebd-id="{{dropdown.uniqueId}}-trigger"
+        class="datepicker-demo-input"
+        value={{if this.selected (formatDate this.selected "DD-MM-YYYY")}}
+        id="datepicker-1"
+        readonly
+        {{on "focus" dropdown.actions.toggle}}
+      />
+
+      <dropdown.Content class="datepicker-demo-dropdown">
+        <PowerCalendar
+          class="demo-calendar-small"
+          @center={{this.center}}
+          @onCenterChange={{this.onCenterChange}}
+          @selected={{this.selected}}
+          @onSelect={{this.onSelect}}
+          @isDatePicker={{true}}
+          @autofocus={{true}}
+          as |calendar|
+        >
+          <calendar.Nav />
+          <calendar.Days />
+        </PowerCalendar>
+      </dropdown.Content>
+    </BasicDropdown>
+  </template>
+}
diff --git a/docs/app/components/snippets/datepicker-1.hbs b/docs/app/components/snippets/datepicker-1.hbs
deleted file mode 100644
index a92e7288..00000000
--- a/docs/app/components/snippets/datepicker-1.hbs
+++ /dev/null
@@ -1,31 +0,0 @@
-<BasicDropdown as |dropdown|>
-  <div>
-    <label for="datepicker-1">Date picker</label>
-  </div>
-
-  <input
-    type="text"
-    data-ebd-id="{{dropdown.uniqueId}}-trigger"
-    class="datepicker-demo-input"
-    value={{if this.selected (format-date this.selected "DD-MM-YYYY")}}
-    id="datepicker-1"
-    readonly
-    {{on "focus" dropdown.actions.toggle}}
-  />
-
-  <dropdown.Content class="datepicker-demo-dropdown">
-    <PowerCalendar
-      class="demo-calendar-small"
-      @center={{this.center}}
-      @onCenterChange={{this.onCenterChange}}
-      @selected={{this.selected}}
-      @onSelect={{this.onSelect}}
-      @isDatePicker={{true}}
-      @autofocus={{true}}
-      as |calendar|
-    >
-      <calendar.Nav />
-      <calendar.Days />
-    </PowerCalendar>
-  </dropdown.Content>
-</BasicDropdown>
\ No newline at end of file
diff --git a/docs/app/components/snippets/datepicker-1.js b/docs/app/components/snippets/datepicker-1.js
deleted file mode 100644
index 0520fdcb..00000000
--- a/docs/app/components/snippets/datepicker-1.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
-
-export default class extends Component {
-  @tracked center = null;
-  @tracked selected = null;
-
-  @action
-  onCenterChange(selected) {
-    this.center = selected.date;
-  }
-
-  @action
-  onSelect(selected) {
-    this.selected = selected.date;
-  }
-}
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..08a6eb01
--- /dev/null
+++ b/docs/app/components/snippets/how-to-use-it-1.gts
@@ -0,0 +1,7 @@
+import PowerCalendar from "ember-power-calendar/components/power-calendar";
+
+<template>
+  <PowerCalendar as |calendar|>
+    <calendar.Days />
+  </PowerCalendar>
+</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 90121f6a..00000000
--- a/docs/app/components/snippets/how-to-use-it-1.hbs
+++ /dev/null
@@ -1,3 +0,0 @@
-<PowerCalendar as |calendar|>
-  <calendar.Days />
-</PowerCalendar>
\ 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..6538a088
--- /dev/null
+++ b/docs/app/components/snippets/how-to-use-it-2.gts
@@ -0,0 +1,13 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import PowerCalendar from 'ember-power-calendar/components/power-calendar';
+
+export default class extends Component {
+  @tracked wedding = new Date(2013, 9, 18);
+
+  <template>
+    <PowerCalendar @center={{this.wedding}} as |calendar|>
+      <calendar.Days />
+    </PowerCalendar>
+  </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 3f7b3850..00000000
--- a/docs/app/components/snippets/how-to-use-it-2.hbs
+++ /dev/null
@@ -1,3 +0,0 @@
-<PowerCalendar @center={{this.wedding}} as |calendar|>
-  <calendar.Days />
-</PowerCalendar>
\ 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 df857396..00000000
--- a/docs/app/components/snippets/how-to-use-it-2.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-
-export default class extends Component {
-  @tracked wedding = new Date(2013, 9, 18);
-}
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..9a840bb1
--- /dev/null
+++ b/docs/app/components/snippets/how-to-use-it-3.gts
@@ -0,0 +1,14 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import PowerCalendar from 'ember-power-calendar/components/power-calendar';
+
+export default class extends Component {
+  @tracked wedding = new Date(2013, 9, 18);
+
+  <template>
+    <PowerCalendar @center={{this.wedding}} as |calendar|>
+      <calendar.Nav />
+      <calendar.Days />
+    </PowerCalendar>
+  </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 e556baeb..00000000
--- a/docs/app/components/snippets/how-to-use-it-3.hbs
+++ /dev/null
@@ -1,4 +0,0 @@
-<PowerCalendar @center={{this.wedding}} as |calendar|>
-  <calendar.Nav />
-  <calendar.Days />
-</PowerCalendar>
\ 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 df857396..00000000
--- a/docs/app/components/snippets/how-to-use-it-3.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-
-export default class extends Component {
-  @tracked wedding = new Date(2013, 9, 18);
-}
diff --git a/docs/app/components/snippets/how-to-use-it-4.gts b/docs/app/components/snippets/how-to-use-it-4.gts
new file mode 100644
index 00000000..f4a78bf0
--- /dev/null
+++ b/docs/app/components/snippets/how-to-use-it-4.gts
@@ -0,0 +1,14 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import PowerCalendar from 'ember-power-calendar/components/power-calendar';
+
+export default class extends Component {
+  @tracked birthday = new Date(1986, 8, 3);
+
+  <template>
+    <PowerCalendar @selected={{this.birthday}} as |calendar|>
+      <calendar.Nav />
+      <calendar.Days />
+    </PowerCalendar>
+  </template>
+}
diff --git a/docs/app/components/snippets/how-to-use-it-4.hbs b/docs/app/components/snippets/how-to-use-it-4.hbs
deleted file mode 100644
index 7a981670..00000000
--- a/docs/app/components/snippets/how-to-use-it-4.hbs
+++ /dev/null
@@ -1,4 +0,0 @@
-<PowerCalendar @selected={{this.birthday}} as |calendar|>
-  <calendar.Nav />
-  <calendar.Days />
-</PowerCalendar>
\ No newline at end of file
diff --git a/docs/app/components/snippets/how-to-use-it-4.js b/docs/app/components/snippets/how-to-use-it-4.js
deleted file mode 100644
index 691164e5..00000000
--- a/docs/app/components/snippets/how-to-use-it-4.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-
-export default class extends Component {
-  @tracked birthday = new Date(1986, 8, 3);
-}
diff --git a/docs/app/components/snippets/how-to-use-it-5.gts b/docs/app/components/snippets/how-to-use-it-5.gts
new file mode 100644
index 00000000..033c95c5
--- /dev/null
+++ b/docs/app/components/snippets/how-to-use-it-5.gts
@@ -0,0 +1,5 @@
+import PowerCalendar from 'ember-power-calendar/components/power-calendar';
+
+<template>
+  <PowerCalendar />
+</template>
diff --git a/docs/app/components/snippets/how-to-use-it-5.hbs b/docs/app/components/snippets/how-to-use-it-5.hbs
deleted file mode 100644
index a8b53a41..00000000
--- a/docs/app/components/snippets/how-to-use-it-5.hbs
+++ /dev/null
@@ -1 +0,0 @@
-<PowerCalendar />
\ No newline at end of file
diff --git a/docs/app/components/snippets/how-to-use-it-5.js b/docs/app/components/snippets/how-to-use-it-5.js
deleted file mode 100644
index 1af80ea0..00000000
--- a/docs/app/components/snippets/how-to-use-it-5.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/i18n-1.gts b/docs/app/components/snippets/i18n-1.gts
new file mode 100644
index 00000000..b9bdbc19
--- /dev/null
+++ b/docs/app/components/snippets/i18n-1.gts
@@ -0,0 +1,35 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { service } from '@ember/service';
+import PowerSelect from 'ember-power-select/components/power-select';
+import PowerCalendar from 'ember-power-calendar/components/power-calendar';
+import type PowerCalendarService from 'ember-power-calendar/services/power-calendar';
+
+export default class extends Component {
+  @service declare powerCalendar: PowerCalendarService;
+
+  locales: string[] = ['en', 'es', 'ru', 'fr', 'pt'];
+
+  // Actions
+  @action
+  changeAppWideLocale(locale: string) {
+    this.powerCalendar.locale = locale;
+  }
+
+  <template>
+    <PowerSelect
+      @triggerClass="i18n-select-demo"
+      @options={{this.locales}}
+      @selected={{this.powerCalendar.locale}}
+      @onChange={{this.changeAppWideLocale}}
+      as |locale|
+    >
+      {{locale}}
+    </PowerSelect>
+    <br />
+    <PowerCalendar as |calendar|>
+      <calendar.Nav />
+      <calendar.Days />
+    </PowerCalendar>
+  </template>
+}
diff --git a/docs/app/components/snippets/i18n-1.hbs b/docs/app/components/snippets/i18n-1.hbs
deleted file mode 100644
index f1613198..00000000
--- a/docs/app/components/snippets/i18n-1.hbs
+++ /dev/null
@@ -1,14 +0,0 @@
-<PowerSelect
-  @triggerClass="i18n-select-demo"
-  @options={{this.locales}}
-  @selected={{this.calendarService.locale}}
-  @onChange={{this.changeAppWideLocale}}
-  as |locale|
->
-  {{locale}}
-</PowerSelect>
-<br />
-<PowerCalendar as |calendar|>
-  <calendar.Nav />
-  <calendar.Days />
-</PowerCalendar>
\ No newline at end of file
diff --git a/docs/app/components/snippets/i18n-1.js b/docs/app/components/snippets/i18n-1.js
deleted file mode 100644
index 54d6e6fc..00000000
--- a/docs/app/components/snippets/i18n-1.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import Component from '@glimmer/component';
-import { action } from '@ember/object';
-import { inject as service } from '@ember/service';
-
-export default class extends Component {
-  @service('power-calendar') calendarService;
-  locales = ['en', 'es', 'ru', 'fr', 'pt'];
-
-  // Actions
-  @action
-  changeAppWideLocale(locale) {
-    this.calendarService.set('locale', locale);
-  }
-}
diff --git a/docs/app/components/snippets/i18n-2.gts b/docs/app/components/snippets/i18n-2.gts
new file mode 100644
index 00000000..76d5c303
--- /dev/null
+++ b/docs/app/components/snippets/i18n-2.gts
@@ -0,0 +1,8 @@
+import PowerCalendar from 'ember-power-calendar/components/power-calendar';
+
+<template>
+  <PowerCalendar @locale="ru" as |calendar|>
+    <calendar.Nav />
+    <calendar.Days />
+  </PowerCalendar>
+</template>
diff --git a/docs/app/components/snippets/i18n-2.hbs b/docs/app/components/snippets/i18n-2.hbs
deleted file mode 100644
index 74b6b884..00000000
--- a/docs/app/components/snippets/i18n-2.hbs
+++ /dev/null
@@ -1,4 +0,0 @@
-<PowerCalendar @locale="ru" as |calendar|>
-  <calendar.Nav />
-  <calendar.Days />
-</PowerCalendar>
\ No newline at end of file
diff --git a/docs/app/components/snippets/i18n-2.js b/docs/app/components/snippets/i18n-2.js
deleted file mode 100644
index 1af80ea0..00000000
--- a/docs/app/components/snippets/i18n-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/installation-2.ts.txt b/docs/app/components/snippets/installation-2.ts.txt
new file mode 100644
index 00000000..e8b143e7
--- /dev/null
+++ b/docs/app/components/snippets/installation-2.ts.txt
@@ -0,0 +1 @@
+import 'ember-power-calendar/styles';
diff --git a/docs/app/components/snippets/installation-3.css.txt b/docs/app/components/snippets/installation-3.css.txt
new file mode 100644
index 00000000..ce0289ee
--- /dev/null
+++ b/docs/app/components/snippets/installation-3.css.txt
@@ -0,0 +1 @@
+@import 'ember-power-calendar/vendor/ember-power-calendar.css';
diff --git a/docs/app/components/snippets/installation.js b/docs/app/components/snippets/installation.ts
similarity index 100%
rename from docs/app/components/snippets/installation.js
rename to docs/app/components/snippets/installation.ts
diff --git a/docs/app/components/snippets/multiple-months-1.gts b/docs/app/components/snippets/multiple-months-1.gts
new file mode 100644
index 00000000..b183b41c
--- /dev/null
+++ b/docs/app/components/snippets/multiple-months-1.gts
@@ -0,0 +1,65 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { add, type NormalizeCalendarValue, type NormalizeRangeActionValue, type SelectedPowerCalendarRange } from 'ember-power-calendar/utils';
+import PowerCalendarRange from 'ember-power-calendar/components/power-calendar-range';
+import powerCalendarFormatDate from 'ember-power-calendar/helpers/power-calendar-format-date';
+
+export default class extends Component {
+  @tracked center: Date | undefined = new Date('2016-05-17');
+  @tracked selected: SelectedPowerCalendarRange | undefined = undefined;
+
+  get nextMonthsCenter(): Date {
+    if (!this.center) {
+      return new Date();
+    }
+
+    return add(this.center, 1, 'month');
+  }
+
+  @action
+  onCenterChange(selected: NormalizeCalendarValue) {
+    this.center = selected.date;
+  }
+
+  @action
+  onSelect(selected: NormalizeRangeActionValue) {
+    this.selected = selected.date;
+  }
+
+  <template>
+    <PowerCalendarRange
+      class="multiple-month-power-calendar-horizontal"
+      @center={{this.center}}
+      @selected={{this.selected}}
+      @onCenterChange={{this.onCenterChange}}
+      @onSelect={{this.onSelect}}
+      as |calendar|
+    >
+      <calendar.Nav>
+        <div class="month-name">
+          {{powerCalendarFormatDate
+            calendar.center
+            "MMMM"
+            locale=calendar.locale
+          }}
+        </div>
+        <div class="month-name">
+          {{powerCalendarFormatDate
+            this.nextMonthsCenter
+            "MMMM"
+            locale=calendar.locale
+          }}
+        </div>
+      </calendar.Nav>
+
+      <div class="months-container">
+        <calendar.Days @showDaysAround={{false}} />
+        <calendar.Days
+          @center={{this.nextMonthsCenter}}
+          @showDaysAround={{false}}
+        />
+      </div>
+    </PowerCalendarRange>
+  </template>
+}
diff --git a/docs/app/components/snippets/multiple-months-1.hbs b/docs/app/components/snippets/multiple-months-1.hbs
deleted file mode 100644
index 7268ac16..00000000
--- a/docs/app/components/snippets/multiple-months-1.hbs
+++ /dev/null
@@ -1,33 +0,0 @@
-<PowerCalendarRange
-  class="multiple-month-power-calendar-horizontal"
-  @center={{this.center}}
-  @selected={{this.selected}}
-  @onCenterChange={{this.onCenterChange}}
-  @onSelect={{this.onSelect}}
-  as |calendar|
->
-  <calendar.Nav>
-    <div class="month-name">
-      {{power-calendar-format-date
-        calendar.center
-        "MMMM"
-        locale=calendar.locale
-      }}
-    </div>
-    <div class="month-name">
-      {{power-calendar-format-date
-        this.nextMonthsCenter
-        "MMMM"
-        locale=calendar.locale
-      }}
-    </div>
-  </calendar.Nav>
-
-  <div class="months-container">
-    <calendar.Days @showDaysAround={{false}} />
-    <calendar.Days
-      @center={{this.nextMonthsCenter}}
-      @showDaysAround={{false}}
-    />
-  </div>
-</PowerCalendarRange>
\ No newline at end of file
diff --git a/docs/app/components/snippets/multiple-months-1.js b/docs/app/components/snippets/multiple-months-1.js
deleted file mode 100644
index c0df9e3a..00000000
--- a/docs/app/components/snippets/multiple-months-1.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
-import { add } from 'ember-power-calendar/utils';
-
-export default class extends Component {
-  @tracked center = new Date('2016-05-17');
-  @tracked selected = null;
-
-  get nextMonthsCenter() {
-    return add(this.center, 1, 'month');
-  }
-
-  @action
-  onCenterChange(selected) {
-    this.center = selected.date;
-  }
-
-  @action
-  onSelect(selected) {
-    this.selected = selected.date;
-  }
-}
diff --git a/docs/app/components/snippets/multiple-months-2.gts b/docs/app/components/snippets/multiple-months-2.gts
new file mode 100644
index 00000000..f9212a0c
--- /dev/null
+++ b/docs/app/components/snippets/multiple-months-2.gts
@@ -0,0 +1,49 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import PowerCalendarRange from 'ember-power-calendar/components/power-calendar-range';
+import powerCalendarFormatDate from 'ember-power-calendar/helpers/power-calendar-format-date';
+import type { NormalizeRangeActionValue, SelectedPowerCalendarRange } from 'ember-power-calendar/utils';
+
+export default class extends Component {
+  @tracked selected: SelectedPowerCalendarRange | undefined = undefined;
+  @tracked center: Date = new Date('2016-05-17');
+
+  months: Date[] = [
+    new Date('2016-01-15'),
+    new Date('2016-02-15'),
+    new Date('2016-03-15'),
+    new Date('2016-04-15'),
+    new Date('2016-05-15'),
+    new Date('2016-06-15'),
+    new Date('2016-07-15'),
+    new Date('2016-08-15'),
+    new Date('2016-09-15'),
+    new Date('2016-10-15'),
+    new Date('2016-11-15'),
+    new Date('2016-12-15'),
+  ];
+
+  @action
+  onSelect(selected: NormalizeRangeActionValue) {
+    this.selected = selected.date;
+  }
+
+  <template>
+    <PowerCalendarRange
+      class="multiple-month-power-calendar-vertical"
+      @selected={{this.selected}}
+      @onSelect={{this.onSelect}}
+      as |calendar|
+    >
+      <div class="months-container">
+        {{#each this.months as |month|}}
+          <calendar.Nav>
+            {{powerCalendarFormatDate month "MMMM" locale=calendar.locale}}
+          </calendar.Nav>
+          <calendar.Days @center={{month}} @showDaysAround={{false}} />
+        {{/each}}
+      </div>
+    </PowerCalendarRange>
+  </template>
+}
diff --git a/docs/app/components/snippets/multiple-months-2.hbs b/docs/app/components/snippets/multiple-months-2.hbs
deleted file mode 100644
index 2ca5582c..00000000
--- a/docs/app/components/snippets/multiple-months-2.hbs
+++ /dev/null
@@ -1,15 +0,0 @@
-<PowerCalendarRange
-  class="multiple-month-power-calendar-vertical"
-  @selected={{this.selected}}
-  @onSelect={{this.onSelect}}
-  as |calendar|
->
-  <div class="months-container">
-    {{#each this.months as |month|}}
-      <calendar.Nav>
-        {{power-calendar-format-date month "MMMM" locale=calendar.locale}}
-      </calendar.Nav>
-      <calendar.Days @center={{month}} @showDaysAround={{false}} />
-    {{/each}}
-  </div>
-</PowerCalendarRange>
\ No newline at end of file
diff --git a/docs/app/components/snippets/multiple-months-2.js b/docs/app/components/snippets/multiple-months-2.js
deleted file mode 100644
index 4427dd21..00000000
--- a/docs/app/components/snippets/multiple-months-2.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
-
-export default class extends Component {
-  @tracked selected = null;
-  @tracked center = new Date('2016-05-17');
-  months = [
-    new Date('2016-01-15'),
-    new Date('2016-02-15'),
-    new Date('2016-03-15'),
-    new Date('2016-04-15'),
-    new Date('2016-05-15'),
-    new Date('2016-06-15'),
-    new Date('2016-07-15'),
-    new Date('2016-08-15'),
-    new Date('2016-09-15'),
-    new Date('2016-10-15'),
-    new Date('2016-11-15'),
-    new Date('2016-12-15'),
-  ];
-
-  @action
-  onSelect(selected) {
-    this.selected = selected.date;
-  }
-}
diff --git a/docs/app/components/snippets/multiple-selection-1.gts b/docs/app/components/snippets/multiple-selection-1.gts
new file mode 100644
index 00000000..af10aaa6
--- /dev/null
+++ b/docs/app/components/snippets/multiple-selection-1.gts
@@ -0,0 +1,33 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import PowerCalendarMultiple from 'ember-power-calendar/components/power-calendar-multiple';
+import type { NormalizeCalendarValue, NormalizeMultipleActionValue } from 'ember-power-calendar/utils';
+
+export default class extends Component {
+  @tracked center: Date | undefined = new Date('2016-05-17');
+  @tracked collection: Date[] = [];
+
+  @action
+  onCenterChange(selected: NormalizeCalendarValue) {
+    this.center = selected.date;
+  }
+
+  @action
+  onSelect(selected: NormalizeMultipleActionValue) {
+    this.collection = selected.date;
+  }
+
+  <template>
+    <PowerCalendarMultiple
+      @center={{this.center}}
+      @selected={{this.collection}}
+      @onSelect={{this.onSelect}}
+      @onCenterChange={{this.onCenterChange}}
+      as |calendar|
+    >
+      <calendar.Nav />
+      <calendar.Days />
+    </PowerCalendarMultiple>
+  </template>
+}
diff --git a/docs/app/components/snippets/multiple-selection-1.hbs b/docs/app/components/snippets/multiple-selection-1.hbs
deleted file mode 100644
index 9386ff91..00000000
--- a/docs/app/components/snippets/multiple-selection-1.hbs
+++ /dev/null
@@ -1,10 +0,0 @@
-<PowerCalendarMultiple
-  @center={{this.center}}
-  @selected={{this.collection}}
-  @onSelect={{this.onSelect}}
-  @onCenterChange={{this.onCenterChange}}
-  as |calendar|
->
-  <calendar.Nav />
-  <calendar.Days />
-</PowerCalendarMultiple>
\ No newline at end of file
diff --git a/docs/app/components/snippets/multiple-selection-1.js b/docs/app/components/snippets/multiple-selection-1.js
deleted file mode 100644
index 7e1fab1a..00000000
--- a/docs/app/components/snippets/multiple-selection-1.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
-
-export default class extends Component {
-  @tracked center = new Date('2016-05-17');
-  @tracked collection = [];
-
-  @action
-  onCenterChange(selected) {
-    this.center = selected.date;
-  }
-
-  @action
-  onSelect(selected) {
-    this.collection = selected.date;
-  }
-}
diff --git a/docs/app/components/snippets/multiple-selection-2.gts b/docs/app/components/snippets/multiple-selection-2.gts
new file mode 100644
index 00000000..f63f97d7
--- /dev/null
+++ b/docs/app/components/snippets/multiple-selection-2.gts
@@ -0,0 +1,52 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import PowerCalendarMultiple from 'ember-power-calendar/components/power-calendar-multiple';
+import type { NormalizeMultipleActionValue } from 'ember-power-calendar/utils';
+
+const primes = [2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31];
+
+export default class extends Component {
+  @tracked center: Date = new Date('2016-05-17');
+  @tracked selectedPrimes: Date[] = [];
+
+  @action
+  selectClosestPrime(selected: NormalizeMultipleActionValue) {
+    const dates = selected.date;
+
+    const lastOne = dates[dates.length - 1];
+
+    if (!lastOne) {
+      return;
+    }
+
+    const number = lastOne.getDate();
+
+    if (primes.indexOf(number) === -1) {
+      const nextPrimeIndex = primes.findIndex((p) => p > number);
+      const nextPrime = primes[nextPrimeIndex] ?? 0;
+      const prevPrime = primes[nextPrimeIndex - 1] ?? 0;
+      const closestPrime =
+        nextPrime - number < number - prevPrime ? nextPrime : prevPrime;
+      if (dates.some((m) => m.getDate() === closestPrime)) {
+        dates.pop();
+      } else {
+        lastOne.setDate(closestPrime);
+      }
+    }
+
+    this.selectedPrimes = dates;
+  }
+
+  <template>
+    <PowerCalendarMultiple
+      @center={{this.center}}
+      @selected={{this.selectedPrimes}}
+      @onSelect={{this.selectClosestPrime}}
+      as |calendar|
+    >
+      <calendar.Nav />
+      <calendar.Days />
+    </PowerCalendarMultiple>
+  </template>
+}
diff --git a/docs/app/components/snippets/multiple-selection-2.hbs b/docs/app/components/snippets/multiple-selection-2.hbs
deleted file mode 100644
index f16dc6a3..00000000
--- a/docs/app/components/snippets/multiple-selection-2.hbs
+++ /dev/null
@@ -1,9 +0,0 @@
-<PowerCalendarMultiple
-  @center={{this.center}}
-  @selected={{this.selectedPrimes}}
-  @onSelect={{this.selectClosestPrime}}
-  as |calendar|
->
-  <calendar.Nav />
-  <calendar.Days />
-</PowerCalendarMultiple>
\ No newline at end of file
diff --git a/docs/app/components/snippets/multiple-selection-2.js b/docs/app/components/snippets/multiple-selection-2.js
deleted file mode 100644
index c3d73c83..00000000
--- a/docs/app/components/snippets/multiple-selection-2.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import Component from '@glimmer/component';
-import { action } from '@ember/object';
-import { tracked } from '@glimmer/tracking';
-
-const primes = [2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31];
-
-export default class extends Component {
-  @tracked center = new Date('2016-05-17');
-  @tracked collection = [];
-  @tracked selectedPrimes = [];
-
-  @action
-  selectClosestPrime(selected) {
-    let dates = selected.date;
-
-    let lastOne = dates[dates.length - 1];
-    let number = lastOne.getDate();
-    if (primes.indexOf(number) === -1) {
-      let nextPrimeIndex = primes.findIndex((p) => p > number);
-      let nextPrime = primes[nextPrimeIndex];
-      let prevPrime = primes[nextPrimeIndex - 1];
-      let closestPrime =
-        nextPrime - number < number - prevPrime ? nextPrime : prevPrime;
-      if (dates.some((m) => m.getDate() === closestPrime)) {
-        dates.pop();
-      } else {
-        lastOne.setDate(closestPrime);
-      }
-    }
-
-    this.selectedPrimes = dates;
-  }
-}
diff --git a/docs/app/components/snippets/multiple-selection-3.gts b/docs/app/components/snippets/multiple-selection-3.gts
new file mode 100644
index 00000000..3711c9be
--- /dev/null
+++ b/docs/app/components/snippets/multiple-selection-3.gts
@@ -0,0 +1,36 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import PowerCalendarMultiple from 'ember-power-calendar/components/power-calendar-multiple';
+import { formatDate, type NormalizeMultipleActionValue } from 'ember-power-calendar/utils';
+
+export default class extends Component {
+  @tracked center: Date = new Date('2016-05-17');
+  @tracked preferredDates: Date[] = [];
+
+  @action
+  onSelect(selected: NormalizeMultipleActionValue) {
+    this.preferredDates = selected.date;
+  }
+
+  <template>
+    <p>Choose the dates you prefer in the order you prefer them:</p>
+
+    <PowerCalendarMultiple
+      @center={{this.center}}
+      @selected={{this.preferredDates}}
+      @onSelect={{this.onSelect}}
+      as |calendar|
+    >
+      <calendar.Nav />
+      <calendar.Days />
+    </PowerCalendarMultiple>
+
+    Preferred dates:
+    <ol>
+      {{#each this.preferredDates as |d|}}
+        <li>{{formatDate d "LLL"}}</li>
+      {{/each}}
+    </ol>
+  </template>
+}
diff --git a/docs/app/components/snippets/multiple-selection-3.hbs b/docs/app/components/snippets/multiple-selection-3.hbs
deleted file mode 100644
index f9416303..00000000
--- a/docs/app/components/snippets/multiple-selection-3.hbs
+++ /dev/null
@@ -1,18 +0,0 @@
-<p>Choose the dates you prefer in the order you prefer them:</p>
-
-<PowerCalendarMultiple
-  @center={{this.center}}
-  @selected={{this.preferredDates}}
-  @onSelect={{this.onSelect}}
-  as |calendar|
->
-  <calendar.Nav />
-  <calendar.Days />
-</PowerCalendarMultiple>
-
-Preferred dates:
-<ol>
-  {{#each this.preferredDates as |d|}}
-    <li>{{format-date d "LLL"}}</li>
-  {{/each}}
-</ol>
\ No newline at end of file
diff --git a/docs/app/components/snippets/multiple-selection-3.js b/docs/app/components/snippets/multiple-selection-3.js
deleted file mode 100644
index 2eada4a6..00000000
--- a/docs/app/components/snippets/multiple-selection-3.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
-
-export default class extends Component {
-  @tracked center = new Date('2016-05-17');
-  @tracked preferredDates = [];
-
-  @action
-  onSelect(selected) {
-    this.preferredDates = selected.date;
-  }
-}
diff --git a/docs/app/components/snippets/multiple-selection-4.gts b/docs/app/components/snippets/multiple-selection-4.gts
new file mode 100644
index 00000000..df609691
--- /dev/null
+++ b/docs/app/components/snippets/multiple-selection-4.gts
@@ -0,0 +1,24 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import PowerCalendarMultiple from 'ember-power-calendar/components/power-calendar-multiple';
+import type { NormalizeMultipleActionValue } from 'ember-power-calendar/utils';
+
+export default class extends Component {
+  @tracked collection: Date[] = [];
+
+  @action
+  onSelect(selected: NormalizeMultipleActionValue) {
+    this.collection = selected.date;
+  }
+
+  <template>
+    <PowerCalendarMultiple
+      @selected={{this.collection}}
+      @onSelect={{this.onSelect}}
+      as |calendar|
+    >
+      <calendar.Days @maxLength={{4}} />
+    </PowerCalendarMultiple>
+  </template>
+}
diff --git a/docs/app/components/snippets/multiple-selection-4.hbs b/docs/app/components/snippets/multiple-selection-4.hbs
deleted file mode 100644
index 03d9727b..00000000
--- a/docs/app/components/snippets/multiple-selection-4.hbs
+++ /dev/null
@@ -1,7 +0,0 @@
-<PowerCalendarMultiple
-  @selected={{this.collection}}
-  @onSelect={{this.onSelect}}
-  as |calendar|
->
-  <calendar.Days @maxLength={{4}} />
-</PowerCalendarMultiple>
\ No newline at end of file
diff --git a/docs/app/components/snippets/multiple-selection-4.js b/docs/app/components/snippets/multiple-selection-4.js
deleted file mode 100644
index d6cc4893..00000000
--- a/docs/app/components/snippets/multiple-selection-4.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
-
-export default class extends Component {
-  @tracked collection = [];
-
-  @action
-  onSelect(selected) {
-    this.collection = selected.date;
-  }
-}
diff --git a/docs/app/components/snippets/nav-select-1.gts b/docs/app/components/snippets/nav-select-1.gts
new file mode 100644
index 00000000..01515044
--- /dev/null
+++ b/docs/app/components/snippets/nav-select-1.gts
@@ -0,0 +1,100 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import PowerCalendar, { type PowerCalendarDefaultBlock } from 'ember-power-calendar/components/power-calendar';
+import { formatDate } from 'ember-power-calendar/utils';
+import { fn } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { eq } from 'ember-truth-helpers';
+import type { NormalizeCalendarValue } from 'ember-power-calendar/utils';
+
+export default class extends Component {
+  @tracked center: Date | undefined = undefined;
+
+  months: string[] = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+  ];
+
+  years: string[] = Array(...(Array(80) as never[])).map((_, i) => `${i + 1940}`);
+
+  @action
+  async changeCenter(unit: 'month' | 'year', calendar: PowerCalendarDefaultBlock, e: Event) {
+    const selectedValue = (e.target as HTMLSelectElement)?.value;
+
+    const newCenter = new Date(calendar.center);
+
+    switch (unit) {
+      case 'month': {
+        const value = this.months.indexOf(selectedValue);
+        calendar.center.setMonth(value);
+        break;
+      }
+
+      case 'year':
+        calendar.center.setFullYear(parseInt(selectedValue));
+        break;
+    }
+
+    if (calendar.actions.changeCenter) {
+      await calendar.actions.changeCenter(newCenter, calendar, e);
+    }
+  }
+
+  @action
+  onCenterChange(selected: NormalizeCalendarValue) {
+    this.center = selected.date;
+  }
+
+  <template>
+    <PowerCalendar
+      @center={{this.center}}
+      @onCenterChange={{this.onCenterChange}}
+      as |calendar|
+    >
+
+      <calendar.Nav>
+        <span class="with-invisible-select">
+          {{#let (formatDate calendar.center "MMMM") as |currentMonth|}}
+            {{currentMonth}}
+            {{! template-lint-disable require-input-label }}
+            <select {{on "change" (fn this.changeCenter "month" calendar)}}>
+              {{#each this.months as |month|}}
+                <option
+                  value="{{month}}"
+                  selected={{eq month currentMonth}}
+                >{{month}}</option>
+              {{/each}}
+            </select>
+          {{/let}}
+        </span>
+        <span class="with-invisible-select">
+          {{#let (formatDate calendar.center "YYYY") as |currentYear|}}
+            {{currentYear}}
+            {{! template-lint-disable require-input-label }}
+            <select {{on "change" (fn this.changeCenter "year" calendar)}}>
+              {{#each this.years as |year|}}
+                <option
+                  value="{{year}}"
+                  selected={{eq year currentYear}}
+                >{{year}}</option>
+              {{/each}}
+            </select>
+          {{/let}}
+        </span>
+      </calendar.Nav>
+
+      <calendar.Days />
+    </PowerCalendar>
+  </template>
+}
diff --git a/docs/app/components/snippets/nav-select-1.hbs b/docs/app/components/snippets/nav-select-1.hbs
deleted file mode 100644
index fd820bb7..00000000
--- a/docs/app/components/snippets/nav-select-1.hbs
+++ /dev/null
@@ -1,39 +0,0 @@
-<PowerCalendar
-  @center={{this.center}}
-  @onCenterChange={{this.onCenterChange}}
-  as |calendar|
->
-
-  <calendar.Nav>
-    <span class="with-invisible-select">
-      {{#let (format-date calendar.center "MMMM") as |currentMonth|}}
-        {{currentMonth}}
-        {{! template-lint-disable require-input-label }}
-        <select onchange={{fn this.changeCenter "month" calendar}}>
-          {{#each this.months as |month|}}
-            <option
-              value="{{month}}"
-              selected={{eq month currentMonth}}
-            >{{month}}</option>
-          {{/each}}
-        </select>
-      {{/let}}
-    </span>
-    <span class="with-invisible-select">
-      {{#let (format-date calendar.center "YYYY") as |currentYear|}}
-        {{currentYear}}
-        {{! template-lint-disable require-input-label }}
-        <select onchange={{fn this.changeCenter "year" calendar}}>
-          {{#each this.years as |year|}}
-            <option
-              value="{{year}}"
-              selected={{eq year currentYear}}
-            >{{year}}</option>
-          {{/each}}
-        </select>
-      {{/let}}
-    </span>
-  </calendar.Nav>
-
-  <calendar.Days />
-</PowerCalendar>
\ No newline at end of file
diff --git a/docs/app/components/snippets/nav-select-1.js b/docs/app/components/snippets/nav-select-1.js
deleted file mode 100644
index 402efda9..00000000
--- a/docs/app/components/snippets/nav-select-1.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
-
-export default class extends Component {
-  @tracked center = null;
-
-  months = [
-    'January',
-    'February',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December',
-  ];
-
-  years = Array(...Array(80)).map((_, i) => `${i + 1940}`);
-
-  @action
-  changeCenter(unit, calendar, e) {
-    let newCenter = calendar.center.clone()[unit](e.target.value);
-    calendar.actions.changeCenter(newCenter);
-  }
-
-  @action
-  onCenterChange(selected) {
-    this.center = selected.date;
-  }
-}
diff --git a/docs/app/components/snippets/nav-select-2.gts b/docs/app/components/snippets/nav-select-2.gts
new file mode 100644
index 00000000..26110be5
--- /dev/null
+++ b/docs/app/components/snippets/nav-select-2.gts
@@ -0,0 +1,119 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import PowerCalendar, { type PowerCalendarDefaultBlock } from 'ember-power-calendar/components/power-calendar';
+import PowerSelect from 'ember-power-select/components/power-select';
+import { formatDate, type NormalizeCalendarValue } from 'ember-power-calendar/utils';
+import { fn } from '@ember/helper';
+
+export default class extends Component {
+  @tracked center2: Date | undefined = undefined;
+
+  months: string[] = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+  ];
+
+  groupedYears: {
+      groupName: string;
+      options: string[];
+  }[] = [
+    {
+      groupName: "40's",
+      options: Array(...(Array(10) as never[])).map((_, i) => `${i + 1940}`),
+    },
+    {
+      groupName: "50's",
+      options: Array(...(Array(10) as never[])).map((_, i) => `${i + 1950}`),
+    },
+    {
+      groupName: "60's",
+      options: Array(...(Array(10) as never[])).map((_, i) => `${i + 1960}`),
+    },
+    {
+      groupName: "70's",
+      options: Array(...(Array(10) as never[])).map((_, i) => `${i + 1970}`),
+    },
+    {
+      groupName: "80's",
+      options: Array(...(Array(10) as never[])).map((_, i) => `${i + 1980}`),
+    },
+    {
+      groupName: "90's",
+      options: Array(...(Array(10) as never[])).map((_, i) => `${i + 1990}`),
+    },
+    {
+      groupName: "00's",
+      options: Array(...(Array(10) as never[])).map((_, i) => `${i + 2000}`),
+    },
+  ];
+
+  @action
+  async changeCenter2(unit: 'month' | 'year', calendar: PowerCalendarDefaultBlock, e: Event) {
+    const selectedValue = (e.target as HTMLSelectElement)?.value;
+
+    const newCenter = new Date(calendar.center);
+
+    switch (unit) {
+      case 'month': {
+        const value = this.months.indexOf(selectedValue);
+        calendar.center.setMonth(value);
+        break;
+      }
+
+      case 'year':
+        calendar.center.setFullYear(parseInt(selectedValue));
+        break;
+    }
+
+    if (calendar.actions.changeCenter) {
+      await calendar.actions.changeCenter(newCenter, calendar, e);
+    }
+  }
+
+  @action
+  onCenterChange(selected: NormalizeCalendarValue) {
+    this.center2 = selected.date;
+  }
+
+  <template>
+    <PowerCalendar
+      class="nav-with-power-select-demo"
+      @center={{this.center2}}
+      @onCenterChange={{this.onCenterChange}}
+      as |cal|
+    >
+      <cal.Nav>
+        <PowerSelect
+          @options={{this.months}}
+          @selected={{formatDate cal.center "MMMM"}}
+          @matchTriggerWidth={{false}}
+          @onChange={{fn this.changeCenter2 "month" cal}}
+          as |month|
+        >
+          {{month}}
+        </PowerSelect>
+        <PowerSelect
+          @options={{this.groupedYears}}
+          @selected={{formatDate cal.center "YYYY"}}
+          @onChange={{fn this.changeCenter2 "year" cal}}
+          as |year|
+        >
+          {{year}}
+        </PowerSelect>
+      </cal.Nav>
+
+      <cal.Days />}
+    </PowerCalendar>
+  </template>
+}
diff --git a/docs/app/components/snippets/nav-select-2.hbs b/docs/app/components/snippets/nav-select-2.hbs
deleted file mode 100644
index 5cd05af3..00000000
--- a/docs/app/components/snippets/nav-select-2.hbs
+++ /dev/null
@@ -1,28 +0,0 @@
-<PowerCalendar
-  class="nav-with-power-select-demo"
-  @center={{this.center2}}
-  @onCenterChange={{this.onCenterChange}}
-  as |cal|
->
-  <cal.Nav>
-    <PowerSelect
-      @options={{this.months}}
-      @selected={{format-date cal.center "MMMM"}}
-      @matchTriggerWidth={{false}}
-      @onChange={{fn this.changeCenter2 "month" cal}}
-      as |month|
-    >
-      {{month}}
-    </PowerSelect>
-    <PowerSelect
-      @options={{this.groupedYears}}
-      @selected={{format-date cal.center "YYYY"}}
-      @onChange={{fn this.changeCenter2 "year" cal}}
-      as |year|
-    >
-      {{year}}
-    </PowerSelect>
-  </cal.Nav>
-
-  <cal.Days />}
-</PowerCalendar>
\ No newline at end of file
diff --git a/docs/app/components/snippets/nav-select-2.js b/docs/app/components/snippets/nav-select-2.js
deleted file mode 100644
index 43b0191f..00000000
--- a/docs/app/components/snippets/nav-select-2.js
+++ /dev/null
@@ -1,64 +0,0 @@
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
-
-export default class extends Component {
-  @tracked center2 = null;
-
-  months = [
-    'January',
-    'February',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December',
-  ];
-
-  groupedYears = [
-    {
-      groupName: "40's",
-      options: Array(...Array(10)).map((_, i) => `${i + 1940}`),
-    },
-    {
-      groupName: "50's",
-      options: Array(...Array(10)).map((_, i) => `${i + 1950}`),
-    },
-    {
-      groupName: "60's",
-      options: Array(...Array(10)).map((_, i) => `${i + 1960}`),
-    },
-    {
-      groupName: "70's",
-      options: Array(...Array(10)).map((_, i) => `${i + 1970}`),
-    },
-    {
-      groupName: "80's",
-      options: Array(...Array(10)).map((_, i) => `${i + 1980}`),
-    },
-    {
-      groupName: "90's",
-      options: Array(...Array(10)).map((_, i) => `${i + 1990}`),
-    },
-    {
-      groupName: "00's",
-      options: Array(...Array(10)).map((_, i) => `${i + 2000}`),
-    },
-  ];
-
-  @action
-  changeCenter2(unit, calendar, val) {
-    let newCenter = calendar.center.clone()[unit](val);
-    calendar.actions.changeCenter(newCenter);
-  }
-
-  @action
-  onCenterChange(selected) {
-    this.center2 = selected.date;
-  }
-}
diff --git a/docs/app/components/snippets/nav-select-3.gts b/docs/app/components/snippets/nav-select-3.gts
new file mode 100644
index 00000000..472625cb
--- /dev/null
+++ b/docs/app/components/snippets/nav-select-3.gts
@@ -0,0 +1,67 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { fn } from '@ember/helper';
+import { on } from '@ember/modifier';
+import PowerCalendar, { type PowerCalendarDefaultBlock } from 'ember-power-calendar/components/power-calendar';
+import { formatDate, type NormalizeCalendarValue } from 'ember-power-calendar/utils';
+
+export default class extends Component {
+  @tracked center3: Date | undefined = undefined;
+
+  months: string[] = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+  ];
+
+  @action
+  async changeYear(calendar: PowerCalendarDefaultBlock, e: Event) {
+    const selectedValue = (e.target as HTMLSelectElement)?.value;
+
+    const newCenter = new Date(calendar.center);
+
+    calendar.center.setFullYear(parseInt(selectedValue));
+
+    if (calendar.actions.changeCenter) {
+      await calendar.actions.changeCenter(newCenter, calendar, e);
+    }
+  }
+
+  @action
+  onCenterChange(selected: NormalizeCalendarValue) {
+    this.center3 = selected.date;
+  }
+
+  <template>
+    <PowerCalendar
+      class="nav-with-number-input-demo"
+      @center={{this.center3}}
+      @onCenterChange={{this.onCenterChange}}
+      as |cal|
+    >
+      <cal.Nav>
+        {{formatDate cal.center "MMMM"}}
+        {{! template-lint-disable require-input-label }}
+        <input
+          type="number"
+          min="1940"
+          max="2020"
+          value={{formatDate cal.center "YYYY"}}
+          {{on "input" (fn this.changeYear cal)}}
+        />
+      </cal.Nav>
+
+      <cal.Days />
+    </PowerCalendar>
+  </template>
+}
diff --git a/docs/app/components/snippets/nav-select-3.hbs b/docs/app/components/snippets/nav-select-3.hbs
deleted file mode 100644
index f08d7b9a..00000000
--- a/docs/app/components/snippets/nav-select-3.hbs
+++ /dev/null
@@ -1,20 +0,0 @@
-<PowerCalendar
-  class="nav-with-number-input-demo"
-  @center={{this.center3}}
-  @onCenterChange={{this.onCenterChange}}
-  as |cal|
->
-  <cal.Nav>
-    {{format-date cal.center "MMMM"}}
-    {{! template-lint-disable require-input-label }}
-    <input
-      type="number"
-      min="1940"
-      max="2020"
-      value={{format-date cal.center "YYYY"}}
-      oninput={{fn this.changeYear cal}}
-    />
-  </cal.Nav>
-
-  <cal.Days />
-</PowerCalendar>
\ No newline at end of file
diff --git a/docs/app/components/snippets/nav-select-3.js b/docs/app/components/snippets/nav-select-3.js
deleted file mode 100644
index 3515a3ee..00000000
--- a/docs/app/components/snippets/nav-select-3.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
-
-export default class extends Component {
-  @tracked center3 = null;
-
-  months = [
-    'January',
-    'February',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December',
-  ];
-
-  @action
-  changeYear(calendar, e) {
-    let newCenter = calendar.center.clone().year(e.target.value);
-    calendar.actions.changeCenter(newCenter);
-  }
-
-  @action
-  onCenterChange(selected) {
-    this.center3 = selected.date;
-  }
-}
diff --git a/docs/app/components/snippets/range-selection-1.gts b/docs/app/components/snippets/range-selection-1.gts
new file mode 100644
index 00000000..afdabbcf
--- /dev/null
+++ b/docs/app/components/snippets/range-selection-1.gts
@@ -0,0 +1,33 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import PowerCalendarRange from 'ember-power-calendar/components/power-calendar-range';
+import type { NormalizeRangeActionValue } from 'ember-power-calendar/utils';
+
+export default class extends Component {
+  @tracked center = new Date('2016-05-17');
+  @tracked range: {
+    start?: Date | null;
+    end?: Date | null;
+  } = {
+    start: new Date('2016-05-10'),
+    end: new Date('2016-05-15'),
+  };
+
+  @action
+  onSelect(selected: NormalizeRangeActionValue) {
+    this.range = selected.date;
+  }
+
+  <template>
+    <PowerCalendarRange
+      @center={{this.center}}
+      @selected={{this.range}}
+      @onSelect={{this.onSelect}}
+      as |calendar|
+    >
+      <calendar.Nav />
+      <calendar.Days />
+    </PowerCalendarRange>
+  </template>
+}
diff --git a/docs/app/components/snippets/range-selection-1.hbs b/docs/app/components/snippets/range-selection-1.hbs
deleted file mode 100644
index a71857a1..00000000
--- a/docs/app/components/snippets/range-selection-1.hbs
+++ /dev/null
@@ -1,9 +0,0 @@
-<PowerCalendarRange
-  @center={{this.center}}
-  @selected={{this.range}}
-  @onSelect={{this.onSelect}}
-  as |calendar|
->
-  <calendar.Nav />
-  <calendar.Days />
-</PowerCalendarRange>
\ No newline at end of file
diff --git a/docs/app/components/snippets/range-selection-1.js b/docs/app/components/snippets/range-selection-1.js
deleted file mode 100644
index 4d4446c3..00000000
--- a/docs/app/components/snippets/range-selection-1.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
-
-export default class extends Component {
-  @tracked center = new Date('2016-05-17');
-  @tracked range = {
-    start: new Date('2016-05-10'),
-    end: new Date('2016-05-15'),
-  };
-
-  @action
-  onSelect(selected) {
-    this.range = selected.date;
-  }
-}
diff --git a/docs/app/components/snippets/range-selection-2.gts b/docs/app/components/snippets/range-selection-2.gts
new file mode 100644
index 00000000..12e98f5d
--- /dev/null
+++ b/docs/app/components/snippets/range-selection-2.gts
@@ -0,0 +1,40 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import PowerCalendarRange from 'ember-power-calendar/components/power-calendar-range';
+import type { NormalizeCalendarValue, NormalizeRangeActionValue } from 'ember-power-calendar/utils';
+
+export default class extends Component {
+  @tracked center: Date | undefined = new Date('2016-05-17');
+  @tracked range: {
+    start?: Date | null;
+    end?: Date | null;
+  } = {
+    start: new Date('2016-05-10'),
+    end: new Date('2016-05-15'),
+  };
+
+  @action
+  onCenterChange(selected: NormalizeCalendarValue) {
+    this.center = selected.date;
+  }
+
+  @action
+  onSelect(selected: NormalizeRangeActionValue) {
+    this.range = selected.date;
+  }
+
+  <template>
+    <PowerCalendarRange
+      class="demo-range-calendar-with-pretty-range-ends-yo"
+      @center={{this.center}}
+      @selected={{this.range}}
+      @onCenterChange={{this.onCenterChange}}
+      @onSelect={{this.onSelect}}
+      as |calendar|
+    >
+      <calendar.Nav />
+      <calendar.Days />
+    </PowerCalendarRange>
+  </template>
+}
diff --git a/docs/app/components/snippets/range-selection-2.hbs b/docs/app/components/snippets/range-selection-2.hbs
deleted file mode 100644
index be2593df..00000000
--- a/docs/app/components/snippets/range-selection-2.hbs
+++ /dev/null
@@ -1,11 +0,0 @@
-<PowerCalendarRange
-  class="demo-range-calendar-with-pretty-range-ends-yo"
-  @center={{this.center}}
-  @selected={{this.range}}
-  @onCenterChange={{this.onCenterChange}}
-  @onSelect={{this.onSelect}}
-  as |calendar|
->
-  <calendar.Nav />
-  <calendar.Days />
-</PowerCalendarRange>
\ No newline at end of file
diff --git a/docs/app/components/snippets/range-selection-2.js b/docs/app/components/snippets/range-selection-2.js
deleted file mode 100644
index 2327645d..00000000
--- a/docs/app/components/snippets/range-selection-2.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 extends Component {
-  @tracked center = new Date('2016-05-17');
-  @tracked range = {
-    start: new Date('2016-05-10'),
-    end: new Date('2016-05-15'),
-  };
-
-  @action
-  onCenterChange(selected) {
-    this.range = selected.date;
-  }
-
-  @action
-  onSelect(selected) {
-    this.range = selected.date;
-  }
-}
diff --git a/docs/app/components/snippets/range-selection-3.gts b/docs/app/components/snippets/range-selection-3.gts
new file mode 100644
index 00000000..78b34686
--- /dev/null
+++ b/docs/app/components/snippets/range-selection-3.gts
@@ -0,0 +1,44 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import PowerCalendarRange from 'ember-power-calendar/components/power-calendar-range';
+import type { NormalizeCalendarValue, NormalizeRangeActionValue } from 'ember-power-calendar/utils';
+
+export default class extends Component {
+  @tracked center: Date | undefined = new Date('2016-05-17');
+  @tracked mediumRange: {
+    start?: Date | null;
+    end?: Date | null;
+  } | undefined = undefined;
+  @tracked range: {
+      start?: Date | null;
+      end?: Date | null;
+  } = {
+    start: new Date('2016-05-10'),
+    end: new Date('2016-05-15'),
+  };
+
+  @action
+  onCenterChange(selected: NormalizeCalendarValue) {
+    this.center = selected.date;
+  }
+
+  @action
+  onSelect(selected: NormalizeRangeActionValue) {
+    this.mediumRange = selected.date;
+  }
+
+  <template>
+    <PowerCalendarRange
+      @center={{this.center}}
+      @selected={{this.mediumRange}}
+      @minRange={{3}}
+      @onCenterChange={{this.onCenterChange}}
+      @onSelect={{this.onSelect}}
+      as |cal|
+    >
+      <cal.Nav />
+      <cal.Days />
+    </PowerCalendarRange>
+  </template>
+}
diff --git a/docs/app/components/snippets/range-selection-3.hbs b/docs/app/components/snippets/range-selection-3.hbs
deleted file mode 100644
index 59de379f..00000000
--- a/docs/app/components/snippets/range-selection-3.hbs
+++ /dev/null
@@ -1,11 +0,0 @@
-<PowerCalendarRange
-  @center={{this.center}}
-  @selected={{this.mediumRange}}
-  @minRange={{3}}
-  @onCenterChange={{this.onCenterChange}}
-  @onSelect={{this.onSelect}}
-  as |cal|
->
-  <cal.Nav />
-  <cal.Days />
-</PowerCalendarRange>
\ No newline at end of file
diff --git a/docs/app/components/snippets/range-selection-3.js b/docs/app/components/snippets/range-selection-3.js
deleted file mode 100644
index a6c83657..00000000
--- a/docs/app/components/snippets/range-selection-3.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
-
-export default class extends Component {
-  @tracked center = new Date('2016-05-17');
-  @tracked mediumRange = null;
-  @tracked range = {
-    start: new Date('2016-05-10'),
-    end: new Date('2016-05-15'),
-  };
-
-  @action
-  onCenterChange(selected) {
-    this.center = selected.date;
-  }
-
-  @action
-  onSelect(selected) {
-    this.mediumRange = selected.date;
-  }
-}
diff --git a/docs/app/components/snippets/range-selection-4.gts b/docs/app/components/snippets/range-selection-4.gts
new file mode 100644
index 00000000..f733f6c4
--- /dev/null
+++ b/docs/app/components/snippets/range-selection-4.gts
@@ -0,0 +1,37 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import PowerCalendarRange from 'ember-power-calendar/components/power-calendar-range';
+import type { NormalizeCalendarValue, NormalizeRangeActionValue } from 'ember-power-calendar/utils';
+
+export default class extends Component {
+  @tracked center: Date | undefined = new Date('2016-05-17');
+  @tracked largeRange: {
+    start?: Date | null;
+    end?: Date | null;
+  } | undefined = undefined;
+
+  @action
+  onCenterChange(selected: NormalizeCalendarValue) {
+    this.center = selected.date;
+  }
+
+  @action
+  onSelect(selected: NormalizeRangeActionValue) {
+    this.largeRange = selected.date;
+  }
+
+  <template>
+    <PowerCalendarRange
+      @center={{this.center}}
+      @selected={{this.largeRange}}
+      @maxRange="1 week"
+      @onCenterChange={{this.onCenterChange}}
+      @onSelect={{this.onSelect}}
+      as |cal|
+    >
+      <cal.Nav />
+      <cal.Days />
+    </PowerCalendarRange>
+  </template>
+}
diff --git a/docs/app/components/snippets/range-selection-4.hbs b/docs/app/components/snippets/range-selection-4.hbs
deleted file mode 100644
index 10b5f313..00000000
--- a/docs/app/components/snippets/range-selection-4.hbs
+++ /dev/null
@@ -1,11 +0,0 @@
-<PowerCalendarRange
-  @center={{this.center}}
-  @selected={{this.largeRange}}
-  @maxRange="1 week"
-  @onCenterChange={{this.onCenterChange}}
-  @onSelect={{this.onSelect}}
-  as |cal|
->
-  <cal.Nav />
-  <cal.Days />
-</PowerCalendarRange>
\ No newline at end of file
diff --git a/docs/app/components/snippets/range-selection-4.js b/docs/app/components/snippets/range-selection-4.js
deleted file mode 100644
index af3e9008..00000000
--- a/docs/app/components/snippets/range-selection-4.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
-
-export default class extends Component {
-  @tracked center = new Date('2016-05-17');
-  @tracked largeRange = null;
-  @tracked range = {
-    start: new Date('2016-05-10'),
-    end: new Date('2016-05-15'),
-  };
-
-  @action
-  onCenterChange(selected) {
-    this.center = selected.date;
-  }
-
-  @action
-  onSelect(selected) {
-    this.largeRange = selected.date;
-  }
-}
diff --git a/docs/app/components/snippets/range-selection-5.gts b/docs/app/components/snippets/range-selection-5.gts
new file mode 100644
index 00000000..a6a493fd
--- /dev/null
+++ b/docs/app/components/snippets/range-selection-5.gts
@@ -0,0 +1,38 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import PowerCalendarRange from 'ember-power-calendar/components/power-calendar-range';
+import type { NormalizeCalendarValue, NormalizeRangeActionValue } from 'ember-power-calendar/utils';
+
+export default class extends Component {
+  @tracked center: Date | undefined = new Date('2016-05-17');
+  @tracked largeRange: {
+    start?: Date | null;
+    end?: Date | null;
+  } | undefined = undefined;
+
+  @action
+  onCenterChange(selected: NormalizeCalendarValue) {
+    this.center = selected.date;
+  }
+
+  @action
+  onSelect(selected: NormalizeRangeActionValue) {
+    this.largeRange = selected.date;
+  }
+
+  <template>
+    <PowerCalendarRange
+      @center={{this.center}}
+      @selected={{this.largeRange}}
+      @minRange="1w"
+      @maxRange="2w"
+      @onCenterChange={{this.onCenterChange}}
+      @onSelect={{this.onSelect}}
+      as |cal|
+    >
+      <cal.Nav />
+      <cal.Days />
+    </PowerCalendarRange>
+  </template>
+}
diff --git a/docs/app/components/snippets/range-selection-5.hbs b/docs/app/components/snippets/range-selection-5.hbs
deleted file mode 100644
index 5a2e3ade..00000000
--- a/docs/app/components/snippets/range-selection-5.hbs
+++ /dev/null
@@ -1,12 +0,0 @@
-<PowerCalendarRange
-  @center={{this.center}}
-  @selected={{this.largeRange}}
-  @minRange="1w"
-  @maxRange="2w"
-  @onCenterChange={{this.onCenterChange}}
-  @onSelect={{this.onSelect}}
-  as |cal|
->
-  <cal.Nav />
-  <cal.Days />
-</PowerCalendarRange>
\ No newline at end of file
diff --git a/docs/app/components/snippets/range-selection-5.js b/docs/app/components/snippets/range-selection-5.js
deleted file mode 100644
index b5ca7d11..00000000
--- a/docs/app/components/snippets/range-selection-5.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
-
-export default class extends Component {
-  @tracked center = new Date('2016-05-17');
-  @tracked mediumRange = null;
-  @tracked range = {
-    start: new Date('2016-05-10'),
-    end: new Date('2016-05-15'),
-  };
-
-  @action
-  onCenterChange(selected) {
-    this.center = selected.date;
-  }
-
-  @action
-  onSelect(selected) {
-    this.largeRange = selected.date;
-  }
-}
diff --git a/docs/app/components/snippets/range-selection-6.gts b/docs/app/components/snippets/range-selection-6.gts
new file mode 100644
index 00000000..96a6c697
--- /dev/null
+++ b/docs/app/components/snippets/range-selection-6.gts
@@ -0,0 +1,35 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import PowerCalendarRange from 'ember-power-calendar/components/power-calendar-range';
+import type { NormalizeRangeActionValue } from 'ember-power-calendar/utils';
+
+export default class extends Component {
+  @tracked center: Date | undefined = new Date('2016-05-17');
+  @tracked minimalRange: {
+    start?: Date | null;
+    end?: Date | null;
+  } | undefined = undefined;
+
+  @action
+  onSelect(selected: NormalizeRangeActionValue) {
+    this.minimalRange = selected.date;
+  }
+
+  <template>
+    <PowerCalendarRange
+      class="single-day-range-demo"
+      @selected={{this.minimalRange}}
+      @minRange={{0}}
+      @onSelect={{this.onSelect}}
+      as |cal|
+    >
+      <cal.Nav />
+      <cal.Days />
+    </PowerCalendarRange>
+    <small>
+      To help visualize it in this demo the color of the days when range starts and
+      ends in the same day is red.
+    </small>
+  </template>
+}
diff --git a/docs/app/components/snippets/range-selection-6.hbs b/docs/app/components/snippets/range-selection-6.hbs
deleted file mode 100644
index 3607aaa2..00000000
--- a/docs/app/components/snippets/range-selection-6.hbs
+++ /dev/null
@@ -1,14 +0,0 @@
-<PowerCalendarRange
-  class="single-day-range-demo"
-  @selected={{this.minimalRange}}
-  @minRange={{0}}
-  @onSelect={{this.onSelect}}
-  as |cal|
->
-  <cal.Nav />
-  <cal.Days />
-</PowerCalendarRange>
-<small>
-  To help visualize it in this demo the color of the days when range starts and
-  ends in the same day is red.
-</small>
\ No newline at end of file
diff --git a/docs/app/components/snippets/range-selection-6.js b/docs/app/components/snippets/range-selection-6.js
deleted file mode 100644
index 776214a9..00000000
--- a/docs/app/components/snippets/range-selection-6.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
-
-export default class extends Component {
-  @tracked center = new Date('2016-05-17');
-  @tracked minimalRange = null;
-  @tracked range = {
-    start: new Date('2016-05-10'),
-    end: new Date('2016-05-15'),
-  };
-
-  @action
-  onSelect(selected) {
-    this.minimalRange = selected.date;
-  }
-}
diff --git a/docs/app/components/snippets/range-selection-7.gts b/docs/app/components/snippets/range-selection-7.gts
new file mode 100644
index 00000000..5ef6cfa1
--- /dev/null
+++ b/docs/app/components/snippets/range-selection-7.gts
@@ -0,0 +1,29 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import PowerCalendarRange from 'ember-power-calendar/components/power-calendar-range';
+import type { NormalizeRangeActionValue } from 'ember-power-calendar/utils';
+
+export default class extends Component {
+  @tracked selectedRange: {
+    start?: Date | null;
+    end?: Date | null;
+  } | undefined = undefined;
+
+  @action
+  onSelect(selected: NormalizeRangeActionValue) {
+    this.selectedRange = selected.date;
+  }
+
+  <template>
+    <PowerCalendarRange
+      @selected={{this.selectedRange}}
+      @proximitySelection={{true}}
+      @onSelect={{this.onSelect}}
+      as |cal|
+    >
+      <cal.Nav />
+      <cal.Days />
+    </PowerCalendarRange>
+  </template>
+}
diff --git a/docs/app/components/snippets/range-selection-7.hbs b/docs/app/components/snippets/range-selection-7.hbs
deleted file mode 100644
index 62c42898..00000000
--- a/docs/app/components/snippets/range-selection-7.hbs
+++ /dev/null
@@ -1,9 +0,0 @@
-<PowerCalendarRange
-  @selected={{this.selectedRange}}
-  @proximitySelection={{true}}
-  @onSelect={{this.onSelect}}
-  as |cal|
->
-  <cal.Nav />
-  <cal.Days />
-</PowerCalendarRange>
\ No newline at end of file
diff --git a/docs/app/components/snippets/range-selection-7.js b/docs/app/components/snippets/range-selection-7.js
deleted file mode 100644
index c7acd153..00000000
--- a/docs/app/components/snippets/range-selection-7.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
-
-export default class extends Component {
-  @tracked center = new Date('2016-05-17');
-  @tracked selectedRange = new Date('2016-05-17');
-  range = {
-    start: new Date('2016-05-10'),
-    end: new Date('2016-05-15'),
-  };
-
-  @action
-  onSelect(selected) {
-    this.selectedRange = selected.date;
-  }
-}
diff --git a/docs/app/components/snippets/system-wide-config-1-js.js b/docs/app/components/snippets/system-wide-config-1-js.js
deleted file mode 100644
index daa2df73..00000000
--- a/docs/app/components/snippets/system-wide-config-1-js.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import EmberPowerCalendar from 'ember-power-calendar/components/power-calendar';
-
-export default class extends EmberPowerCalendar {
-  navComponent = 'my-custom-nav';
-}
diff --git a/docs/app/components/snippets/test-helpers-1-js.js b/docs/app/components/snippets/test-helpers-1-js.js
deleted file mode 100644
index 595948c0..00000000
--- a/docs/app/components/snippets/test-helpers-1-js.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/* eslint-disable no-unused-vars */
-import Application from '../../app';
-import config from '../../config/environment';
-import registerPowerCalendarHelpers from '../../tests/helpers/ember-power-calendar';
-
-registerPowerCalendarHelpers();
-
-export default function startApp(attrs) {
-  //...
-}
diff --git a/docs/app/components/snippets/the-days-0.gts b/docs/app/components/snippets/the-days-0.gts
new file mode 100644
index 00000000..cf0d51f0
--- /dev/null
+++ b/docs/app/components/snippets/the-days-0.gts
@@ -0,0 +1,62 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import PowerCalendarMultiple, { type PowerCalendarMultipleAPI } from 'ember-power-calendar/components/power-calendar-multiple';
+import type { NormalizeMultipleActionValue } from 'ember-power-calendar/utils';
+import type { TDayClass } from 'ember-power-calendar/helpers/ember-power-calendar-day-classes';
+
+export default class extends Component {
+  @tracked selectedDays: Date[] | undefined = undefined;
+
+  @action
+  onSelect(selected: NormalizeMultipleActionValue) {
+    this.selectedDays = selected.date;
+  }
+
+  customClass: TDayClass<PowerCalendarMultipleAPI> = (day, _calendar, weeks): string => {
+    if (day.isSelected) {
+      const currentWeek = weeks.find((w) => w.days.includes(day));
+
+      if (!currentWeek) {
+        return '';
+      }
+
+      const weekIndex = weeks.indexOf(currentWeek);
+      const dayIndex = currentWeek.days.indexOf(day);
+      const classes = ['custom-class-demo-day'];
+      const previousWeek = weeks[weekIndex - 1];
+      const nextWeek = weeks[weekIndex + 1];
+      const previousDay = currentWeek.days[dayIndex - 1];
+      const nextDay = currentWeek.days[dayIndex + 1];
+      if (!previousDay || !previousDay.isSelected) {
+        classes.push('is-horizontal-first-day');
+      }
+      if (!nextDay || !nextDay.isSelected) {
+        classes.push('is-horizontal-last-day');
+      }
+      if (!previousWeek || !previousWeek.days[dayIndex]?.isSelected) {
+        classes.push('is-vertical-first-day');
+      }
+      if (!nextWeek || !nextWeek.days[dayIndex]?.isSelected) {
+        classes.push('is-vertical-last-day');
+      }
+      return classes.join(' ');
+    }
+
+    return '';
+  }
+
+  <template>
+    <PowerCalendarMultiple
+      @selected={{this.selectedDays}}
+      @onSelect={{this.onSelect}}
+      as |calendar|
+    >
+      <calendar.Nav />
+      <calendar.Days
+        class="custom-day-demo-calendar"
+        @dayClass={{this.customClass}}
+      />
+    </PowerCalendarMultiple>
+  </template>
+}
diff --git a/docs/app/components/snippets/the-days-0.hbs b/docs/app/components/snippets/the-days-0.hbs
deleted file mode 100644
index 92ea4433..00000000
--- a/docs/app/components/snippets/the-days-0.hbs
+++ /dev/null
@@ -1,11 +0,0 @@
-<PowerCalendarMultiple
-  @selected={{this.selectedDays}}
-  @onSelect={{this.onSelect}}
-  as |calendar|
->
-  <calendar.Nav />
-  <calendar.Days
-    class="custom-day-demo-calendar"
-    @dayClass={{this.customClass}}
-  />
-</PowerCalendarMultiple>
\ No newline at end of file
diff --git a/docs/app/components/snippets/the-days-0.js b/docs/app/components/snippets/the-days-0.js
deleted file mode 100644
index fd969262..00000000
--- a/docs/app/components/snippets/the-days-0.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
-
-export default class extends Component {
-  @tracked selectedDays = null;
-
-  @action
-  onSelect(selected) {
-    this.selectedDays = selected.date;
-  }
-
-  customClass(day, _calendar, weeks) {
-    if (day.isSelected) {
-      let currentWeek = weeks.find((w) => w.days.includes(day));
-      let weekIndex = weeks.indexOf(currentWeek);
-      let dayIndex = currentWeek.days.indexOf(day);
-      let classes = ['custom-class-demo-day'];
-      let previousWeek = weeks[weekIndex - 1];
-      let nextWeek = weeks[weekIndex + 1];
-      let previousDay = currentWeek.days[dayIndex - 1];
-      let nextDay = currentWeek.days[dayIndex + 1];
-      if (!previousDay || !previousDay.isSelected) {
-        classes.push('is-horizontal-first-day');
-      }
-      if (!nextDay || !nextDay.isSelected) {
-        classes.push('is-horizontal-last-day');
-      }
-      if (!previousWeek || !previousWeek.days[dayIndex].isSelected) {
-        classes.push('is-vertical-first-day');
-      }
-      if (!nextWeek || !nextWeek.days[dayIndex].isSelected) {
-        classes.push('is-vertical-last-day');
-      }
-      return classes.join(' ');
-    }
-  }
-}
diff --git a/docs/app/components/snippets/the-days-1.gts b/docs/app/components/snippets/the-days-1.gts
new file mode 100644
index 00000000..d9fbf18f
--- /dev/null
+++ b/docs/app/components/snippets/the-days-1.gts
@@ -0,0 +1,19 @@
+import PowerCalendar from 'ember-power-calendar/components/power-calendar';
+import { formatDate } from 'ember-power-calendar/utils';
+import { eq, or } from 'ember-truth-helpers';
+
+<template>
+  <PowerCalendar as |calendar|>
+    <calendar.Nav />
+
+    <calendar.Days as |day|>
+      {{#let (formatDate day.date "ddd") as |weekday|}}
+        {{#if (or (eq weekday "Sat") (eq weekday "Sun"))}}
+          <strong class="pink-text">{{day.number}}</strong>
+        {{else}}
+          {{day.number}}
+        {{/if}}
+      {{/let}}
+    </calendar.Days>
+  </PowerCalendar>
+</template>
diff --git a/docs/app/components/snippets/the-days-1.hbs b/docs/app/components/snippets/the-days-1.hbs
deleted file mode 100644
index f82bd0c1..00000000
--- a/docs/app/components/snippets/the-days-1.hbs
+++ /dev/null
@@ -1,13 +0,0 @@
-<PowerCalendar as |calendar|>
-  <calendar.Nav />
-
-  <calendar.Days as |day|>
-    {{#let (format-date day.date "ddd") as |weekday|}}
-      {{#if (or (eq weekday "Sat") (eq weekday "Sun"))}}
-        <strong class="pink-text">{{day.number}}</strong>
-      {{else}}
-        {{day.number}}
-      {{/if}}
-    {{/let}}
-  </calendar.Days>
-</PowerCalendar>
\ No newline at end of file
diff --git a/docs/app/components/snippets/the-days-1.js b/docs/app/components/snippets/the-days-1.js
deleted file mode 100644
index 1af80ea0..00000000
--- a/docs/app/components/snippets/the-days-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/the-days-2.gts b/docs/app/components/snippets/the-days-2.gts
new file mode 100644
index 00000000..5b714ae7
--- /dev/null
+++ b/docs/app/components/snippets/the-days-2.gts
@@ -0,0 +1,73 @@
+import Component from '@glimmer/component';
+import PowerCalendar from 'ember-power-calendar/components/power-calendar';
+import {
+  add,
+  isBefore,
+  startOf,
+  endOf,
+  weekday,
+formatDate,
+} from 'ember-power-calendar/utils';
+
+export default class extends Component {
+  get days() {
+    const now = new Date();
+    let day = startOf(startOf(now, 'month'), 'isoWeek');
+    const lastDay = endOf(endOf(now, 'month'), 'isoWeek');
+    const days = [];
+    while (isBefore(day, lastDay)) {
+      if (weekday(day) !== 1 && weekday(day) !== 3) {
+        // Skip Mon/Wed
+        const copy = new Date(day);
+        const isCurrentMonth = copy.getMonth() === now.getMonth();
+        days.push({
+          date: copy,
+          isCurrentMonth,
+        });
+      }
+      day = add(day, 1, 'day');
+    }
+    return days;
+  }
+
+  get weeksWithoutMondaysOrWednesday() {
+    const weeks = [];
+    let i = 0;
+    while (this.days[i]) {
+      weeks.push({ days: this.days.slice(i, i + 5) });
+      i += 5;
+    }
+    return weeks;
+  }
+
+  <template>
+    <PowerCalendar as |calendar|>
+      <calendar.Nav />
+
+      <div class="ember-power-calendar-row ember-power-calendar-weekdays">
+        <div class="ember-power-calendar-weekday">Tue</div>
+        <div class="ember-power-calendar-weekday">Thu</div>
+        <div class="ember-power-calendar-weekday">Fri</div>
+        <div class="ember-power-calendar-weekday">Sat</div>
+        <div class="ember-power-calendar-weekday">Sun</div>
+      </div>
+      <div class="ember-power-calendar-day-grid">
+        {{#each this.weeksWithoutMondaysOrWednesday as |week|}}
+          <div class="ember-power-calendar-row ember-power-calendar-week">
+            {{#each week.days as |day|}}
+              <div
+                class="ember-power-calendar-day
+                  {{if
+                    day.isCurrentMonth
+                    'ember-power-calendar-day--current-month'
+                  }}"
+              >
+                {{formatDate day.date "D"}}
+              </div>
+            {{/each}}
+          </div>
+        {{/each}}
+      </div>
+    </PowerCalendar>
+  </template>
+}
diff --git a/docs/app/components/snippets/the-days-2.hbs b/docs/app/components/snippets/the-days-2.hbs
deleted file mode 100644
index 4b08d5f7..00000000
--- a/docs/app/components/snippets/the-days-2.hbs
+++ /dev/null
@@ -1,28 +0,0 @@
-<PowerCalendar as |calendar|>
-  <calendar.Nav />
-
-  <div class="ember-power-calendar-row ember-power-calendar-weekdays">
-    <div class="ember-power-calendar-weekday">Tue</div>
-    <div class="ember-power-calendar-weekday">Thu</div>
-    <div class="ember-power-calendar-weekday">Fri</div>
-    <div class="ember-power-calendar-weekday">Sat</div>
-    <div class="ember-power-calendar-weekday">Sun</div>
-  </div>
-  <div class="ember-power-calendar-day-grid">
-    {{#each this.weeksWithoutMondaysOrWednesday as |week|}}
-      <div class="ember-power-calendar-row ember-power-calendar-week">
-        {{#each week.days as |day|}}
-          <div
-            class="ember-power-calendar-day
-              {{if
-                day.isCurrentMonth
-                'ember-power-calendar-day--current-month'
-              }}"
-          >
-            {{format-date day.date "D"}}
-          </div>
-        {{/each}}
-      </div>
-    {{/each}}
-  </div>
-</PowerCalendar>
\ No newline at end of file
diff --git a/docs/app/components/snippets/the-days-2.js b/docs/app/components/snippets/the-days-2.js
deleted file mode 100644
index bb1076ca..00000000
--- a/docs/app/components/snippets/the-days-2.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import Component from '@glimmer/component';
-import {
-  add,
-  isBefore,
-  startOf,
-  endOf,
-  weekday,
-} from 'ember-power-calendar/utils';
-
-export default class extends Component {
-  get days() {
-    let now = new Date();
-    let day = startOf(startOf(now, 'month'), 'isoWeek');
-    let lastDay = endOf(endOf(now, 'month'), 'isoWeek');
-    let days = [];
-    while (isBefore(day, lastDay)) {
-      if (weekday(day) !== 1 && weekday(day) !== 3) {
-        // Skip Mon/Wed
-        let copy = new Date(day);
-        let isCurrentMonth = copy.getMonth() === now.getMonth();
-        days.push({
-          date: copy,
-          isCurrentMonth,
-        });
-      }
-      day = add(day, 1, 'day');
-    }
-    return days;
-  }
-
-  get weeksWithoutMondaysOrWednesday() {
-    let weeks = [];
-    let i = 0;
-    while (this.days[i]) {
-      weeks.push({ days: this.days.slice(i, i + 5) });
-      i += 5;
-    }
-    return weeks;
-  }
-}
diff --git a/docs/app/components/snippets/the-days-3.gts b/docs/app/components/snippets/the-days-3.gts
new file mode 100644
index 00000000..39f41f08
--- /dev/null
+++ b/docs/app/components/snippets/the-days-3.gts
@@ -0,0 +1,16 @@
+import Component from '@glimmer/component';
+import PowerCalendar from 'ember-power-calendar/components/power-calendar';
+import DaysGridWithoutMonOrWed from '../days-grid-without-mon-or-wed';
+
+// eslint-disable-next-line ember/no-empty-glimmer-component-classes
+export default class extends Component {
+  <template>
+    <PowerCalendar
+      @daysComponent={{DaysGridWithoutMonOrWed}}
+      as |calendar|
+    >
+      <calendar.Nav />
+      <calendar.Days />
+    </PowerCalendar>
+  </template>
+}
diff --git a/docs/app/components/snippets/the-days-3.hbs b/docs/app/components/snippets/the-days-3.hbs
deleted file mode 100644
index a09fee2a..00000000
--- a/docs/app/components/snippets/the-days-3.hbs
+++ /dev/null
@@ -1,7 +0,0 @@
-<PowerCalendar
-  @daysComponent={{component "days-grid-without-mon-or-wed"}}
-  as |calendar|
->
-  <calendar.Nav />
-  <calendar.Days />
-</PowerCalendar>
\ No newline at end of file
diff --git a/docs/app/components/snippets/the-days-3.js b/docs/app/components/snippets/the-days-3.js
deleted file mode 100644
index 1af80ea0..00000000
--- a/docs/app/components/snippets/the-days-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/the-days-4.gts b/docs/app/components/snippets/the-days-4.gts
new file mode 100644
index 00000000..8c36ad39
--- /dev/null
+++ b/docs/app/components/snippets/the-days-4.gts
@@ -0,0 +1,76 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import PowerCalendar from 'ember-power-calendar/components/power-calendar';
+import { on } from '@ember/modifier';
+
+export default class extends Component {
+  @tracked startOfWeek: string | undefined;
+
+  @action
+  onChange(evt: Event) {
+    this.startOfWeek = (evt.target as HTMLInputElement).value;
+  }
+
+  <template>
+    <PowerCalendar as |calendar|>
+      <input
+        type="radio"
+        name="weekday"
+        id="weekday-radio-button-1"
+        value="1"
+        {{on "change" this.onChange}}
+      />
+      <label for="weekday-radio-button-1">Mon</label>
+      <input
+        type="radio"
+        name="weekday"
+        id="weekday-radio-button-2"
+        value="2"
+        {{on "change" this.onChange}}
+      />
+      <label for="weekday-radio-button-2">Tue</label>
+      <input
+        type="radio"
+        name="weekday"
+        id="weekday-radio-button-3"
+        value="3"
+        {{on "change" this.onChange}}
+      />
+      <label for="weekday-radio-button-3">Wed</label>
+      <input
+        type="radio"
+        name="weekday"
+        id="weekday-radio-button-4"
+        value="4"
+        {{on "change" this.onChange}}
+      />
+      <label for="weekday-radio-button-4">Thu</label>
+      <input
+        type="radio"
+        name="weekday"
+        id="weekday-radio-button-5"
+        value="5"
+        {{on "change" this.onChange}}
+      />
+      <label for="weekday-radio-button-5">Fri</label>
+      <input
+        type="radio"
+        name="weekday"
+        id="weekday-radio-button-6"
+        value="6"
+        {{on "change" this.onChange}}
+      />
+      <label for="weekday-radio-button-6">Sat</label>
+      <input
+        type="radio"
+        name="weekday"
+        id="weekday-radio-button-0"
+        value="0"
+        {{on "change" this.onChange}}
+      />
+      <label for="weekday-radio-button-0">Sun</label>
+      <calendar.Days @startOfWeek={{this.startOfWeek}} />
+    </PowerCalendar>
+  </template>
+}
diff --git a/docs/app/components/snippets/the-days-4.hbs b/docs/app/components/snippets/the-days-4.hbs
deleted file mode 100644
index 5691384e..00000000
--- a/docs/app/components/snippets/the-days-4.hbs
+++ /dev/null
@@ -1,59 +0,0 @@
-<PowerCalendar as |calendar|>
-  <input
-    type="radio"
-    name="weekday"
-    id="weekday-radio-button-1"
-    value="1"
-    {{on "change" this.onChange}}
-  />
-  <label for="weekday-radio-button-1">Mon</label>
-  <input
-    type="radio"
-    name="weekday"
-    id="weekday-radio-button-2"
-    value="2"
-    {{on "change" this.onChange}}
-  />
-  <label for="weekday-radio-button-2">Tue</label>
-  <input
-    type="radio"
-    name="weekday"
-    id="weekday-radio-button-3"
-    value="3"
-    {{on "change" this.onChange}}
-  />
-  <label for="weekday-radio-button-3">Wed</label>
-  <input
-    type="radio"
-    name="weekday"
-    id="weekday-radio-button-4"
-    value="4"
-    {{on "change" this.onChange}}
-  />
-  <label for="weekday-radio-button-4">Thu</label>
-  <input
-    type="radio"
-    name="weekday"
-    id="weekday-radio-button-5"
-    value="5"
-    {{on "change" this.onChange}}
-  />
-  <label for="weekday-radio-button-5">Fri</label>
-  <input
-    type="radio"
-    name="weekday"
-    id="weekday-radio-button-6"
-    value="6"
-    {{on "change" this.onChange}}
-  />
-  <label for="weekday-radio-button-6">Sat</label>
-  <input
-    type="radio"
-    name="weekday"
-    id="weekday-radio-button-0"
-    value="0"
-    {{on "change" this.onChange}}
-  />
-  <label for="weekday-radio-button-0">Sun</label>
-  <calendar.Days @startOfWeek={{this.startOfWeek}} />
-</PowerCalendar>
\ No newline at end of file
diff --git a/docs/app/components/snippets/the-days-4.js b/docs/app/components/snippets/the-days-4.js
deleted file mode 100644
index 7d44b4bc..00000000
--- a/docs/app/components/snippets/the-days-4.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
-
-export default class extends Component {
-  @tracked startOfWeek;
-
-  @action
-  onChange(evt) {
-    this.startOfWeek = evt.target.value;
-  }
-}
diff --git a/docs/app/components/snippets/the-days-5.gts b/docs/app/components/snippets/the-days-5.gts
new file mode 100644
index 00000000..5750d60b
--- /dev/null
+++ b/docs/app/components/snippets/the-days-5.gts
@@ -0,0 +1,14 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import PowerCalendar from 'ember-power-calendar/components/power-calendar';
+
+export default class extends Component {
+  @tracked wedding: Date | undefined = undefined;
+
+  <template>
+    <PowerCalendar @center={{this.wedding}} as |calendar|>
+      <calendar.Nav />
+      <calendar.Days @showDaysAround={{false}} />
+    </PowerCalendar>
+  </template>
+}
diff --git a/docs/app/components/snippets/the-days-5.hbs b/docs/app/components/snippets/the-days-5.hbs
deleted file mode 100644
index 0e68905a..00000000
--- a/docs/app/components/snippets/the-days-5.hbs
+++ /dev/null
@@ -1,4 +0,0 @@
-<PowerCalendar @center={{this.wedding}} as |calendar|>
-  <calendar.Nav />
-  <calendar.Days @showDaysAround={{false}} />
-</PowerCalendar>
\ No newline at end of file
diff --git a/docs/app/components/snippets/the-days-5.js b/docs/app/components/snippets/the-days-5.js
deleted file mode 100644
index 0e686749..00000000
--- a/docs/app/components/snippets/the-days-5.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-
-export default class extends Component {
-  @tracked wedding = null;
-}
diff --git a/docs/app/components/snippets/the-days-6.gts b/docs/app/components/snippets/the-days-6.gts
new file mode 100644
index 00000000..1aad7318
--- /dev/null
+++ b/docs/app/components/snippets/the-days-6.gts
@@ -0,0 +1,29 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import PowerCalendar from 'ember-power-calendar/components/power-calendar';
+import type { PowerCalendarDay } from 'ember-power-calendar/utils';
+
+export default class extends Component {
+  @tracked wedding: Date = new Date(2013, 9, 18);
+  @tracked minDate: Date = new Date(2013, 9, 11);
+  @tracked maxDate: Date = new Date(2013, 9, 21);
+  @tracked selected: Date | undefined;
+
+  @action
+  onSelect(selected: PowerCalendarDay) {
+    this.selected = selected.date;
+  }
+
+  <template>
+    <PowerCalendar
+      @center={{this.wedding}}
+      @selected={{this.selected}}
+      @onSelect={{this.onSelect}}
+      as |calendar|
+    >
+      <calendar.Nav />
+      <calendar.Days @minDate={{this.minDate}} @maxDate={{this.maxDate}} />
+    </PowerCalendar>
+  </template>
+}
diff --git a/docs/app/components/snippets/the-days-6.hbs b/docs/app/components/snippets/the-days-6.hbs
deleted file mode 100644
index 723fe116..00000000
--- a/docs/app/components/snippets/the-days-6.hbs
+++ /dev/null
@@ -1,9 +0,0 @@
-<PowerCalendar
-  @center={{this.wedding}}
-  @selected={{this.selected}}
-  @onSelect={{this.onSelect}}
-  as |calendar|
->
-  <calendar.Nav />
-  <calendar.Days @minDate={{this.minDate}} @maxDate={{this.maxDate}} />
-</PowerCalendar>
\ No newline at end of file
diff --git a/docs/app/components/snippets/the-days-6.js b/docs/app/components/snippets/the-days-6.js
deleted file mode 100644
index f9b774c5..00000000
--- a/docs/app/components/snippets/the-days-6.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
-
-export default class extends Component {
-  @tracked wedding = new Date(2013, 9, 18);
-  @tracked minDate = new Date(2013, 9, 11);
-  @tracked maxDate = new Date(2013, 9, 21);
-  @tracked selected;
-
-  @action
-  onSelect(evt) {
-    this.selected = evt.target.value;
-  }
-}
diff --git a/docs/app/components/snippets/the-days-7.gts b/docs/app/components/snippets/the-days-7.gts
new file mode 100644
index 00000000..888861a3
--- /dev/null
+++ b/docs/app/components/snippets/the-days-7.gts
@@ -0,0 +1,33 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import PowerCalendar from 'ember-power-calendar/components/power-calendar';
+import type { PowerCalendarDay } from 'ember-power-calendar/utils';
+
+export default class extends Component {
+  @tracked center: Date = new Date(2013, 0, 15);
+  disabledDates: Date[] = [
+    new Date(2013, 0, 18),
+    new Date(2013, 0, 21),
+    new Date(2013, 0, 22),
+    new Date(2013, 0, 28),
+  ];
+  @tracked selected: Date | undefined;
+
+  @action
+  onSelect(selected: PowerCalendarDay) {
+    this.selected = selected.date;
+  }
+
+  <template>
+    <PowerCalendar
+      @center={{this.center}}
+      @selected={{this.selected}}
+      @onSelect={{this.onSelect}}
+      as |calendar|
+    >
+      <calendar.Nav />
+      <calendar.Days @disabledDates={{this.disabledDates}} />
+    </PowerCalendar>
+  </template>
+}
diff --git a/docs/app/components/snippets/the-days-7.hbs b/docs/app/components/snippets/the-days-7.hbs
deleted file mode 100644
index c42af95b..00000000
--- a/docs/app/components/snippets/the-days-7.hbs
+++ /dev/null
@@ -1,9 +0,0 @@
-<PowerCalendar
-  @center={{this.center}}
-  @selected={{this.selected}}
-  @onSelect={{this.onSelect}}
-  as |calendar|
->
-  <calendar.Nav />
-  <calendar.Days @disabledDates={{this.disabledDates}} />
-</PowerCalendar>
\ No newline at end of file
diff --git a/docs/app/components/snippets/the-days-7.js b/docs/app/components/snippets/the-days-7.js
deleted file mode 100644
index 96f51cca..00000000
--- a/docs/app/components/snippets/the-days-7.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
-
-export default class extends Component {
-  @tracked center = new Date(2013, 0, 15);
-  disabledDates = [
-    new Date(2013, 0, 18),
-    new Date(2013, 0, 21),
-    new Date(2013, 0, 22),
-    new Date(2013, 0, 28),
-  ];
-
-  @action
-  onSelect(selected) {
-    this.selected = selected.date;
-  }
-}
diff --git a/docs/app/components/snippets/the-days-8.gts b/docs/app/components/snippets/the-days-8.gts
new file mode 100644
index 00000000..92ec4dbe
--- /dev/null
+++ b/docs/app/components/snippets/the-days-8.gts
@@ -0,0 +1,46 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import PowerCalendar from 'ember-power-calendar/components/power-calendar';
+import { on } from '@ember/modifier';
+import type { TWeekdayFormat } from 'ember-power-calendar/utils';
+
+export default class extends Component {
+  @tracked weekdayFormat: TWeekdayFormat | undefined;
+
+  @action
+  onChange(evt: Event) {
+    this.weekdayFormat = (evt.target as HTMLInputElement).value as TWeekdayFormat;
+  }
+
+  <template>
+    <PowerCalendar as |calendar|>
+      <input
+        type="radio"
+        name="weekday-format"
+        id="weekday-format-radio-button-1"
+        value="min"
+        {{on "change" this.onChange}}
+      />
+      <label for="weekday-format-radio-button-1">Min</label>
+      <input
+        type="radio"
+        name="weekday-format"
+        id="weekday-format-radio-button-2"
+        value="short"
+        {{on "change" this.onChange}}
+      />
+      <label for="weekday-format-radio-button-2">Short</label>
+      <input
+        type="radio"
+        name="weekday-format"
+        id="weekday-format-radio-button-3"
+        value="long"
+        {{on "change" this.onChange}}
+      />
+      <label for="weekday-format-radio-button-3">Long</label>
+
+      <calendar.Days @weekdayFormat={{this.weekdayFormat}} />
+    </PowerCalendar>
+  </template>
+}
diff --git a/docs/app/components/snippets/the-days-8.hbs b/docs/app/components/snippets/the-days-8.hbs
deleted file mode 100644
index 2890f686..00000000
--- a/docs/app/components/snippets/the-days-8.hbs
+++ /dev/null
@@ -1,28 +0,0 @@
-<PowerCalendar as |calendar|>
-  <input
-    type="radio"
-    name="weekday-format"
-    id="weekday-format-radio-button-1"
-    value="min"
-    {{on "change" this.onChange}}
-  />
-  <label for="weekday-format-radio-button-1">Min</label>
-  <input
-    type="radio"
-    name="weekday-format"
-    id="weekday-format-radio-button-2"
-    value="short"
-    {{on "change" this.onChange}}
-  />
-  <label for="weekday-format-radio-button-2">Short</label>
-  <input
-    type="radio"
-    name="weekday-format"
-    id="weekday-format-radio-button-3"
-    value="long"
-    {{on "change" this.onChange}}
-  />
-  <label for="weekday-format-radio-button-3">Long</label>
-
-  <calendar.Days @weekdayFormat={{this.weekdayFormat}} />
-</PowerCalendar>
\ No newline at end of file
diff --git a/docs/app/components/snippets/the-days-8.js b/docs/app/components/snippets/the-days-8.js
deleted file mode 100644
index c3894b7d..00000000
--- a/docs/app/components/snippets/the-days-8.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
-
-export default class extends Component {
-  @tracked weekdayFormat;
-
-  @action
-  onChange(evt) {
-    this.weekdayFormat = evt.target.value;
-  }
-}
diff --git a/docs/app/components/snippets/the-nav-1.gts b/docs/app/components/snippets/the-nav-1.gts
new file mode 100644
index 00000000..3c9e8a58
--- /dev/null
+++ b/docs/app/components/snippets/the-nav-1.gts
@@ -0,0 +1,12 @@
+import PowerCalendar from 'ember-power-calendar/components/power-calendar';
+import { formatDate } from 'ember-power-calendar/utils';
+
+<template>
+  <PowerCalendar class="demo-calendar-small" as |calendar|>
+    <calendar.Nav>
+      {{formatDate calendar.center "MMM YY"}}
+    </calendar.Nav>
+
+    <calendar.Days />
+  </PowerCalendar>
+</template>
diff --git a/docs/app/components/snippets/the-nav-1.hbs b/docs/app/components/snippets/the-nav-1.hbs
deleted file mode 100644
index 7fa213dd..00000000
--- a/docs/app/components/snippets/the-nav-1.hbs
+++ /dev/null
@@ -1,7 +0,0 @@
-<PowerCalendar class="demo-calendar-small" as |calendar|>
-  <calendar.Nav>
-    {{format-date calendar.center "MMM YY"}}
-  </calendar.Nav>
-
-  <calendar.Days />
-</PowerCalendar>
\ No newline at end of file
diff --git a/docs/app/components/snippets/the-nav-1.js b/docs/app/components/snippets/the-nav-1.js
deleted file mode 100644
index 1af80ea0..00000000
--- a/docs/app/components/snippets/the-nav-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/the-nav-2.gts b/docs/app/components/snippets/the-nav-2.gts
new file mode 100644
index 00000000..0256bc38
--- /dev/null
+++ b/docs/app/components/snippets/the-nav-2.gts
@@ -0,0 +1,55 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import PowerCalendar from 'ember-power-calendar/components/power-calendar';
+import { on } from '@ember/modifier';
+import { fn } from '@ember/helper';
+import { formatDate, type NormalizeCalendarValue } from 'ember-power-calendar/utils';
+
+export default class extends Component {
+  @tracked month: Date | undefined = undefined;
+
+  @action
+  onCenterChange(selected: NormalizeCalendarValue) {
+    this.month = selected.date;
+  }
+
+  <template>
+    <PowerCalendar
+      class="demo-calendar-small"
+      @center={{this.month}}
+      @onCenterChange={{this.onCenterChange}}
+      as |calendar|
+    >
+      {{#if calendar.actions.moveCenter}}
+        <nav class="ember-power-calendar-nav">
+          <button
+            type="button"
+            class="ember-power-calendar-nav-control"
+            {{on "click" (fn calendar.actions.moveCenter -12 "month" calendar)}}
+          >«</button>
+          <button
+            type="button"
+            class="ember-power-calendar-nav-control"
+            {{on "click" (fn calendar.actions.moveCenter -1 "month" calendar)}}
+          >‹</button>
+          <div class="ember-power-calendar-nav-title">
+            {{formatDate calendar.center "MMMM YYYY"}}
+          </div>
+          <button
+            class="ember-power-calendar-nav-control"
+            {{on "click" (fn calendar.actions.moveCenter 1 "month" calendar)}}
+            type="button"
+          >›</button>
+          <button
+            class="ember-power-calendar-nav-control"
+            {{on "click" (fn calendar.actions.moveCenter 12 "month" calendar)}}
+            type="button"
+          >»</button>
+        </nav>
+      {{/if}}
+
+      <calendar.Days />
+    </PowerCalendar>
+  </template>
+}
diff --git a/docs/app/components/snippets/the-nav-2.hbs b/docs/app/components/snippets/the-nav-2.hbs
deleted file mode 100644
index b8ac1c05..00000000
--- a/docs/app/components/snippets/the-nav-2.hbs
+++ /dev/null
@@ -1,35 +0,0 @@
-<PowerCalendar
-  class="demo-calendar-small"
-  @center={{this.month}}
-  @onCenterChange={{this.onCenterChange}}
-  as |calendar|
->
-
-  <nav class="ember-power-calendar-nav">
-    <button
-      type="button"
-      class="ember-power-calendar-nav-control"
-      {{on "click" (fn calendar.actions.moveCenter -12 "month")}}
-    >«</button>
-    <button
-      type="button"
-      class="ember-power-calendar-nav-control"
-      {{on "click" (fn calendar.actions.moveCenter -1 "month")}}
-    >‹</button>
-    <div class="ember-power-calendar-nav-title">
-      {{format-date calendar.center "MMMM YYYY"}}
-    </div>
-    <button
-      class="ember-power-calendar-nav-control"
-      {{on "click" (fn calendar.actions.moveCenter 1 "month")}}
-      type="button"
-    >›</button>
-    <button
-      class="ember-power-calendar-nav-control"
-      {{on "click" (fn calendar.actions.moveCenter 12 "month")}}
-      type="button"
-    >»</button>
-  </nav>
-
-  <calendar.Days />
-</PowerCalendar>
\ No newline at end of file
diff --git a/docs/app/components/snippets/the-nav-2.js b/docs/app/components/snippets/the-nav-2.js
deleted file mode 100644
index d8c92c4f..00000000
--- a/docs/app/components/snippets/the-nav-2.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
-
-export default class extends Component {
-  @tracked month = null;
-
-  @action
-  onCenterChange(selected) {
-    this.month = selected.date;
-  }
-}
diff --git a/docs/app/components/snippets/the-nav-3.gts b/docs/app/components/snippets/the-nav-3.gts
new file mode 100644
index 00000000..7f7e339d
--- /dev/null
+++ b/docs/app/components/snippets/the-nav-3.gts
@@ -0,0 +1,29 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import PowerCalendar from 'ember-power-calendar/components/power-calendar';
+import CalendarNavWithYearButtons from 'docs/components/calendar-nav-with-year-buttons';
+import type { NormalizeCalendarValue } from 'ember-power-calendar/utils';
+
+export default class extends Component {
+  @tracked month: Date | undefined = undefined;
+
+  @action
+  onCenterChange(selected: NormalizeCalendarValue) {
+    this.month = selected.date;
+  }
+
+  <template>
+    <PowerCalendar
+      class="demo-calendar-small"
+      @center={{this.month}}
+      @navComponent={{CalendarNavWithYearButtons}}
+      @onCenterChange={{this.onCenterChange}}
+      as |calendar|
+    >
+
+      <calendar.Nav />
+      <calendar.Days />
+    </PowerCalendar>
+  </template>
+}
diff --git a/docs/app/components/snippets/the-nav-3.hbs b/docs/app/components/snippets/the-nav-3.hbs
deleted file mode 100644
index 484f9506..00000000
--- a/docs/app/components/snippets/the-nav-3.hbs
+++ /dev/null
@@ -1,11 +0,0 @@
-<PowerCalendar
-  class="demo-calendar-small"
-  @center={{this.month}}
-  @navComponent={{component "calendar-nav-with-year-buttons"}}
-  @onCenterChange={{this.onCenterChange}}
-  as |calendar|
->
-
-  <calendar.Nav />
-  <calendar.Days />
-</PowerCalendar>
\ No newline at end of file
diff --git a/docs/app/components/snippets/the-nav-3.js b/docs/app/components/snippets/the-nav-3.js
deleted file mode 100644
index d8c92c4f..00000000
--- a/docs/app/components/snippets/the-nav-3.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
-
-export default class extends Component {
-  @tracked month = null;
-
-  @action
-  onCenterChange(selected) {
-    this.month = selected.date;
-  }
-}
diff --git a/docs/app/controllers/application.js b/docs/app/controllers/application.js
deleted file mode 100644
index 339f2cc0..00000000
--- a/docs/app/controllers/application.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import Controller from '@ember/controller';
-import { add } from 'ember-power-calendar/utils';
-
-export default class extends Controller {
-  tomorrow = add(new Date(), 1, 'day');
-  pastMonth = add(new Date(), -1, 'month');
-  nextMonth = add(new Date(), 1, 'month');
-  selected = add(new Date(), 1, 'day');
-}
diff --git a/docs/app/controllers/public-pages.js b/docs/app/controllers/public-pages.js
deleted file mode 100644
index 084f5ec4..00000000
--- a/docs/app/controllers/public-pages.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import Controller from '@ember/controller';
-import { inject as service } from '@ember/service';
-import { tracked } from '@glimmer/tracking';
-import { add } from 'ember-power-calendar/utils';
-import { dropTask, timeout, waitForQueue } from 'ember-concurrency';
-
-export default class extends Controller {
-  @service router;
-
-  @tracked day = this.now;
-
-  now = new Date();
-  today = this.now;
-
-  flipPage = dropTask(async (e) => {
-    if (this.router.currentRouteName === 'public-pages.docs.index') {
-      return;
-    }
-    let pageElement = e.target.closest('.header-calendar-page');
-    if (!pageElement) {
-      return;
-    }
-    let clone = pageElement.cloneNode(true);
-    let parent = pageElement.parentNode;
-    parent.insertBefore(clone, pageElement);
-    this.day = add(this.day, 1, 'day');
-
-    await waitForQueue('afterRender');
-
-    pageElement.offsetLeft; // force layout
-    pageElement.classList.add('run-animation');
-
-    await timeout(400);
-
-    pageElement.classList.remove('run-animation');
-    parent.removeChild(clone);
-  });
-}
diff --git a/docs/app/controllers/public-pages/cookbook.js b/docs/app/controllers/public-pages/cookbook.js
deleted file mode 100644
index c14bee74..00000000
--- a/docs/app/controllers/public-pages/cookbook.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import Controller from '@ember/controller';
-import { action } from '@ember/object';
-import { inject as service } from '@ember/service';
-
-const groupedSections = [
-  {
-    groupName: 'Basic recipes',
-    options: [
-      { route: 'public-pages.cookbook.index', text: 'System-wide config' },
-      { route: 'public-pages.cookbook.datepicker', text: 'Datepicker' },
-      { route: 'public-pages.cookbook.nav-select', text: 'Nav with select' },
-      // { route: 'public-pages.cookbook.material-theme',        text: 'Material theme' },
-      // { route: 'public-pages.cookbook.css-animations',        text: 'CSS animations' },
-      // { route: 'public-pages.cookbook.debounce-searches',     text: 'Debounce searches' },
-      // { route: 'public-pages.cookbook.create-custom-options', text: 'Create custom options' }
-    ],
-  },
-  // {
-  //   groupName: 'Advanced recipes',
-  //   options: [
-  //     { route: 'public-pages.cookbook.navigable-select', text: 'Navigable select' }
-  //   ]
-  // }
-];
-
-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(section) {
-    this.router.transitionTo(section.route);
-  }
-}
diff --git a/docs/app/controllers/public-pages/cookbook/datepicker.js b/docs/app/controllers/public-pages/cookbook/datepicker.js
deleted file mode 100644
index 6a97314c..00000000
--- a/docs/app/controllers/public-pages/cookbook/datepicker.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import Controller from '@ember/controller';
-import Datepicker1 from '../../../components/snippets/datepicker-1';
-
-export default class extends Controller {
-  datepicker1 = Datepicker1;
-}
diff --git a/docs/app/controllers/public-pages/cookbook/multiple-months.js b/docs/app/controllers/public-pages/cookbook/multiple-months.js
deleted file mode 100644
index 397e34ee..00000000
--- a/docs/app/controllers/public-pages/cookbook/multiple-months.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import Controller from '@ember/controller';
-import MultipleMonths1 from '../../../components/snippets/multiple-months-1';
-import MultipleMonths2 from '../../../components/snippets/multiple-months-2';
-
-export default class extends Controller {
-  multipleMonths1 = MultipleMonths1;
-  multipleMonths2 = MultipleMonths2;
-}
diff --git a/docs/app/controllers/public-pages/cookbook/nav-select.js b/docs/app/controllers/public-pages/cookbook/nav-select.js
deleted file mode 100644
index 84b83adf..00000000
--- a/docs/app/controllers/public-pages/cookbook/nav-select.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import Controller from '@ember/controller';
-import NavSelect1 from '../../../components/snippets/nav-select-1';
-import NavSelect2 from '../../../components/snippets/nav-select-2';
-import NavSelect3 from '../../../components/snippets/nav-select-3';
-
-export default class extends Controller {
-  navSelect1 = NavSelect1;
-  navSelect2 = NavSelect2;
-  navSelect3 = NavSelect3;
-}
diff --git a/docs/app/controllers/public-pages/docs.js b/docs/app/controllers/public-pages/docs.js
deleted file mode 100644
index 832c7593..00000000
--- a/docs/app/controllers/public-pages/docs.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import Controller from '@ember/controller';
-import { action } from '@ember/object';
-import { inject as service } from '@ember/service';
-
-const groupedSections = [
-  {
-    groupName: 'Getting started',
-    options: [
-      { route: 'public-pages.docs.index', text: 'Overview' },
-      { route: 'public-pages.docs.installation', text: 'Installation & setup' },
-      { route: 'public-pages.docs.how-to-use-it', text: 'How to use it' },
-      { route: 'public-pages.docs.action-handling', text: 'Action handling' },
-      { route: 'public-pages.docs.range-selection', text: 'Range selection' },
-      {
-        route: 'public-pages.docs.multiple-selection',
-        text: 'Multiple selection',
-      },
-    ],
-  },
-  {
-    groupName: 'Basic customization',
-    options: [
-      { route: 'public-pages.docs.i18n', text: 'I18n' },
-      { route: 'public-pages.docs.the-nav', text: 'The nav' },
-      { route: 'public-pages.docs.the-days', text: 'The list' },
-    ],
-  },
-  {
-    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(section) {
-    this.router.transitionTo(section.route);
-  }
-}
diff --git a/docs/app/controllers/public-pages/docs/action-handling.js b/docs/app/controllers/public-pages/docs/action-handling.js
deleted file mode 100644
index 8f605369..00000000
--- a/docs/app/controllers/public-pages/docs/action-handling.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import Controller from '@ember/controller';
-import ActionHandling1 from '../../../components/snippets/action-handling-1';
-import ActionHandling2 from '../../../components/snippets/action-handling-2';
-import ActionHandling3 from '../../../components/snippets/action-handling-3';
-
-export default class extends Controller {
-  actionHandling1 = ActionHandling1;
-  actionHandling2 = ActionHandling2;
-  actionHandling3 = ActionHandling3;
-}
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 d1a7dcf6..00000000
--- a/docs/app/controllers/public-pages/docs/how-to-use-it.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import Controller from '@ember/controller';
-import HowToUseIt1 from '../../../components/snippets/how-to-use-it-1';
-import HowToUseIt2 from '../../../components/snippets/how-to-use-it-2';
-import HowToUseIt3 from '../../../components/snippets/how-to-use-it-3';
-import HowToUseIt4 from '../../../components/snippets/how-to-use-it-4';
-import HowToUseIt5 from '../../../components/snippets/how-to-use-it-5';
-
-export default class extends Controller {
-  howToUseIt1 = HowToUseIt1;
-  howToUseIt2 = HowToUseIt2;
-  howToUseIt3 = HowToUseIt3;
-  howToUseIt4 = HowToUseIt4;
-  howToUseIt5 = HowToUseIt5;
-}
diff --git a/docs/app/controllers/public-pages/docs/i18n.js b/docs/app/controllers/public-pages/docs/i18n.js
deleted file mode 100644
index b9e1d4d5..00000000
--- a/docs/app/controllers/public-pages/docs/i18n.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import Controller from '@ember/controller';
-import I18n1 from '../../../components/snippets/i18n-1';
-import I18n2 from '../../../components/snippets/i18n-2';
-
-export default class extends Controller {
-  i18n1 = I18n1;
-  i18n2 = I18n2;
-}
diff --git a/docs/app/controllers/public-pages/docs/multiple-selection.js b/docs/app/controllers/public-pages/docs/multiple-selection.js
deleted file mode 100644
index 11a8e7f5..00000000
--- a/docs/app/controllers/public-pages/docs/multiple-selection.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import Controller from '@ember/controller';
-import MultipleSelection1 from '../../../components/snippets/multiple-selection-1';
-import MultipleSelection2 from '../../../components/snippets/multiple-selection-2';
-import MultipleSelection3 from '../../../components/snippets/multiple-selection-3';
-import MultipleSelection4 from '../../../components/snippets/multiple-selection-4';
-
-export default class extends Controller {
-  multipleSelection1 = MultipleSelection1;
-  multipleSelection2 = MultipleSelection2;
-  multipleSelection3 = MultipleSelection3;
-  multipleSelection4 = MultipleSelection4;
-}
diff --git a/docs/app/controllers/public-pages/docs/range-selection.js b/docs/app/controllers/public-pages/docs/range-selection.js
deleted file mode 100644
index 6ee07b5e..00000000
--- a/docs/app/controllers/public-pages/docs/range-selection.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import Controller from '@ember/controller';
-import RangeSelection1 from '../../../components/snippets/range-selection-1';
-import RangeSelection2 from '../../../components/snippets/range-selection-2';
-import RangeSelection3 from '../../../components/snippets/range-selection-3';
-import RangeSelection4 from '../../../components/snippets/range-selection-4';
-import RangeSelection5 from '../../../components/snippets/range-selection-5';
-import RangeSelection6 from '../../../components/snippets/range-selection-6';
-import RangeSelection7 from '../../../components/snippets/range-selection-7';
-
-export default class extends Controller {
-  rangeSelection1 = RangeSelection1;
-  rangeSelection2 = RangeSelection2;
-  rangeSelection3 = RangeSelection3;
-  rangeSelection4 = RangeSelection4;
-  rangeSelection5 = RangeSelection5;
-  rangeSelection6 = RangeSelection6;
-  rangeSelection7 = RangeSelection7;
-}
diff --git a/docs/app/controllers/public-pages/docs/the-days.js b/docs/app/controllers/public-pages/docs/the-days.js
deleted file mode 100644
index 86d1ccd5..00000000
--- a/docs/app/controllers/public-pages/docs/the-days.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import Controller from '@ember/controller';
-import TheDays0 from '../../../components/snippets/the-days-0';
-import TheDays1 from '../../../components/snippets/the-days-1';
-import TheDays2 from '../../../components/snippets/the-days-2';
-import TheDays3 from '../../../components/snippets/the-days-3';
-import TheDays4 from '../../../components/snippets/the-days-4';
-import TheDays5 from '../../../components/snippets/the-days-5';
-import TheDays6 from '../../../components/snippets/the-days-6';
-import TheDays7 from '../../../components/snippets/the-days-7';
-import TheDays8 from '../../../components/snippets/the-days-8';
-
-export default class extends Controller {
-  theDays0 = TheDays0;
-  theDays1 = TheDays1;
-  theDays2 = TheDays2;
-  theDays3 = TheDays3;
-  theDays4 = TheDays4;
-  theDays5 = TheDays5;
-  theDays6 = TheDays6;
-  theDays7 = TheDays7;
-  theDays8 = TheDays8;
-}
diff --git a/docs/app/controllers/public-pages/docs/the-nav.js b/docs/app/controllers/public-pages/docs/the-nav.js
deleted file mode 100644
index 221cc01e..00000000
--- a/docs/app/controllers/public-pages/docs/the-nav.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import Controller from '@ember/controller';
-import TheNav1 from '../../../components/snippets/the-nav-1';
-import TheNav2 from '../../../components/snippets/the-nav-2';
-import TheNav3 from '../../../components/snippets/the-nav-3';
-
-export default class extends Controller {
-  theNav1 = TheNav1;
-  theNav2 = TheNav2;
-  theNav3 = TheNav3;
-}
diff --git a/docs/app/controllers/public-pages/index.js b/docs/app/controllers/public-pages/index.js
deleted file mode 100644
index f92d4fc5..00000000
--- a/docs/app/controllers/public-pages/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import Controller from '@ember/controller';
-
-export default class extends Controller {
-  today = new Date();
-}
diff --git a/docs/app/helpers/format-date.js b/docs/app/helpers/format-date.js
deleted file mode 100644
index 9b0992ee..00000000
--- a/docs/app/helpers/format-date.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { helper } from '@ember/component/helper';
-import { formatDate } from 'ember-power-calendar/utils';
-
-export function formatDateHelper([date, format], { locale }) {
-  return formatDate(date, format, locale);
-}
-
-export default helper(formatDateHelper);
diff --git a/docs/app/initializers/global-locale.js b/docs/app/initializers/global-locale.ts
similarity index 76%
rename from docs/app/initializers/global-locale.js
rename to docs/app/initializers/global-locale.ts
index a017d26a..a5160f6c 100644
--- a/docs/app/initializers/global-locale.js
+++ b/docs/app/initializers/global-locale.ts
@@ -3,6 +3,7 @@ import {
   macroCondition,
   importSync,
 } from '@embroider/macros';
+import type * as momentNs from 'moment';
 
 let dateLibrary = '';
 
@@ -15,7 +16,7 @@ if (macroCondition(dependencySatisfies('moment', '*'))) {
 export default {
   initialize() {
     if (dateLibrary === 'moment') {
-      let moment = importSync('moment').default;
+      const moment = (importSync('moment') as { default: typeof momentNs }).default;
       moment.locale('en');
     }
   },
diff --git a/docs/app/router.ts b/docs/app/router.ts
index c7485509..3d61a537 100644
--- a/docs/app/router.ts
+++ b/docs/app/router.ts
@@ -28,7 +28,6 @@ Router.map(function () {
     });
 
     this.route('cookbook', function () {
-      this.route('datepicker');
       this.route('nav-select');
       this.route('multiple-months');
     });
@@ -36,8 +35,6 @@ Router.map(function () {
     this.route('addons', function () {
       this.route('index');
     });
-
-    this.route('support-the-project');
   });
   this.route('helpers-testing');
 });
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/public-pages.gts b/docs/app/templates/public-pages.gts
new file mode 100644
index 00000000..5bc8492d
--- /dev/null
+++ b/docs/app/templates/public-pages.gts
@@ -0,0 +1,104 @@
+import Component from '@glimmer/component';
+import { service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { add, formatDate } from 'ember-power-calendar/utils';
+import { dropTask, timeout, waitForQueue } from 'ember-concurrency';
+import type RouterService from '@ember/routing/router-service';
+import { LinkTo } from '@ember/routing';
+import { on } from '@ember/modifier';
+import { eq } from 'ember-truth-helpers';
+
+export default class PublicPages extends Component {
+  @service declare router: RouterService;
+
+  now = new Date();
+
+  @tracked day = this.now;
+
+  today = this.now;
+
+  flipPage = dropTask(async (e: MouseEvent) => {
+    if (this.router.currentRouteName === 'public-pages.docs.index') {
+      return;
+    }
+
+    const pageElement = (e.target as HTMLElement).closest<HTMLElement>('.header-calendar-page');
+    if (!pageElement) {
+      return;
+    }
+
+    const clone = pageElement.cloneNode(true);
+    const parent = pageElement.parentNode;
+
+    if (!parent) {
+      return;
+    }
+
+    parent.insertBefore(clone, pageElement);
+    this.day = add(this.day, 1, 'day');
+
+    await waitForQueue('afterRender');
+
+    // pageElement.offsetLeft; // force layout
+    pageElement.classList.add('run-animation');
+
+    await timeout(400);
+
+    pageElement.classList.remove('run-animation');
+    parent.removeChild(clone);
+  });
+
+  <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>
+          <LinkTo
+            @route="public-pages.addons"
+            class="main-header-nav-link"
+          >Addons</LinkTo>
+          <a
+            href="https://github.com/cibernox/ember-power-calendar"
+            class="main-header-nav-link"
+          >Github</a>
+        </div>
+        <div class="main-header-logo">
+          <LinkTo @route="public-pages.index" class="home-link">
+            <img src="/ember_logo.png" alt="ember" />
+            <strong>Power</strong>
+            {{! template-lint-disable no-invalid-interactive }}
+            <div class="header-calendar" {{on "click" this.flipPage.perform}}>
+              <div
+                class="header-calendar-page
+                  {{if (eq this.day this.today) '' 'run-animation'}}"
+              >
+                <sub class="calendar-page-number">{{formatDate this.day "D"}}</sub>
+                Calendar
+              </div>
+              <div class="header-calendar-ring left"></div>
+              <div class="header-calendar-ring right"></div>
+            </div>
+          </LinkTo>
+        </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>
+
+    {{!-- <RememberDocumentScroll @key={{this.router.currentRouteName}} /> --}}
+  </template>
+}
diff --git a/docs/app/templates/public-pages.hbs b/docs/app/templates/public-pages.hbs
deleted file mode 100644
index 6b294d50..00000000
--- a/docs/app/templates/public-pages.hbs
+++ /dev/null
@@ -1,51 +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-power-calendar"
-        class="main-header-nav-link"
-      >Github</a>
-    </div>
-    <div class="main-header-logo">
-      <LinkTo @route="public-pages.index" class="home-link">
-        <img src="/ember_logo.png" alt="ember" />
-        <strong>Power</strong>
-        {{! template-lint-disable no-invalid-interactive }}
-        <div class="header-calendar" {{on "click" (perform this.flipPage)}}>
-          <div
-            class="header-calendar-page
-              {{if (eq this.day this.today) '' 'run-animation'}}"
-          >
-            <sub class="calendar-page-number">{{format-date this.day "D"}}</sub>
-            Calendar
-          </div>
-          <div class="header-calendar-ring left"></div>
-          <div class="header-calendar-ring right"></div>
-        </div>
-      </LinkTo>
-    </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>
-
-<RememberDocumentScroll @key={{this.router.currentRouteName}} />
\ No newline at end of file
diff --git a/docs/app/templates/public-pages/addons.gts b/docs/app/templates/public-pages/addons.gts
new file mode 100644
index 00000000..991f5174
--- /dev/null
+++ b/docs/app/templates/public-pages/addons.gts
@@ -0,0 +1,7 @@
+<template>
+  <section class="docs">
+    <section class="doc-page">
+      {{outlet}}
+    </section>
+  </section>
+</template>
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.gts b/docs/app/templates/public-pages/addons/index.gts
new file mode 100644
index 00000000..70897ea0
--- /dev/null
+++ b/docs/app/templates/public-pages/addons/index.gts
@@ -0,0 +1,44 @@
+<template>
+  <h1 class="doc-page-title">Addons</h1>
+
+  <p>
+    Ember Power Calendar is designed to allow users to customize it to fit their
+    needs, and hopefully that work could be also released to the public to others
+    use it.
+  </p>
+
+  <p>
+    If you develop an addon that builds on top of Ember Power Calendar, there are
+    three things you should do:
+  </p>
+
+  <ol>
+    <li>
+      Remember to list it as a <code>dependency</code>, not a <code>devDependency</code> in your addon's
+      <code>package.json</code>. Otherwise, apps will not be able to find any of the
+      components.
+    </li>
+    <li>
+      Add
+      <code>"ember-power-calendar-addon"</code>
+      to the keywords section of your
+      <em>package.json</em>
+      so I can scan the npm registry and find them.
+    </li>
+    <li>Let me know about it!</li>
+  </ol>
+
+  <p>
+    In case you want inspiration, this are some ideas that could be cool:
+  </p>
+
+  <ul>
+    <li>A datepicker with a nice API based on contextual components</li>
+    <li>A calendar-subcomponent that displays weeks instead of months</li>
+    <li>A calendar-subcomponent with infinite scrolling</li>
+  </ul>
+
+  <p>
+    Roll up sleves and let's do it!
+  </p>
+</template>
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 f205fead..00000000
--- a/docs/app/templates/public-pages/addons/index.hbs
+++ /dev/null
@@ -1,42 +0,0 @@
-<h1 class="doc-page-title">Addons</h1>
-
-<p>
-  Ember Power Calendar is designed to allow users to customize it to fit their
-  needs, and hopefully that work could be also released to the public to others
-  use it.
-</p>
-
-<p>
-  If you develop an addon that builds on top of Ember Power Calendar, there are
-  three things you should do:
-</p>
-
-<ol>
-  <li>
-    Remember to list it as a `dependency`, not a `devDependency` in your addon's
-    `package.json`. Otherwise, apps will not be able to find any of the
-    components.
-  </li>
-  <li>
-    Add
-    <code>"ember-power-calendar-addon"</code>
-    to the keywords section of your
-    <em>package.json</em>
-    so I can scan the npm registry and find them.
-  </li>
-  <li>Let me know about it!</li>
-</ol>
-
-<p>
-  In case you want inspiration, this are some ideas that could be cool:
-</p>
-
-<ul>
-  <li>A datepicker with a nice API based on contextual components</li>
-  <li>A calendar-subcomponent that displays weeks instead of months</li>
-  <li>A calendar-subcomponent with infinite scrolling</li>
-</ul>
-
-<p>
-  Roll up sleves and let's do it!
-</p>
\ 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..2234cbff
--- /dev/null
+++ b/docs/app/templates/public-pages/cookbook.gts
@@ -0,0 +1,95 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { LinkTo } from '@ember/routing';
+import { service } from '@ember/service';
+import PowerSelect from 'ember-power-select/components/power-select';
+import type RouterService from '@ember/routing/router-service';
+
+const groupedSections = [
+  {
+    groupName: 'Basic recipes',
+    options: [
+      { route: 'public-pages.cookbook.index', text: 'Datepicker' },
+      { route: 'public-pages.cookbook.nav-select', text: 'Nav with select' },
+      { route: 'public-pages.cookbook.multiple-months', text: 'Multiple months' },
+      // { route: 'public-pages.cookbook.material-theme',        text: 'Material theme' },
+      // { route: 'public-pages.cookbook.css-animations',        text: 'CSS animations' },
+      // { route: 'public-pages.cookbook.debounce-searches',     text: 'Debounce searches' },
+      // { route: 'public-pages.cookbook.create-custom-options', text: 'Create custom options' }
+    ],
+  },
+  // {
+  //   groupName: 'Advanced recipes',
+  //   options: [
+  //     { route: 'public-pages.cookbook.navigable-select', text: 'Navigable select' }
+  //   ]
+  // }
+];
+
+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 && section.route === currentRouteName) {
+            return section;
+          }
+        }
+      }
+    }
+    return undefined;
+  }
+
+  @action
+  visit(section: {
+    route: string;
+    text: string;
+  }) {
+    this.router.transitionTo(section.route);
+  }
+
+  <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"
+        >Datepicker</LinkTo>
+        <LinkTo @route="public-pages.cookbook.nav-select" class="side-nav-link">Nav
+          with select</LinkTo>
+        <LinkTo
+          @route="public-pages.cookbook.multiple-months"
+          class="side-nav-link"
+        >Multiple months</LinkTo>
+        {{!
+        <LinkTo @route='public-pages.cookbook.material-theme' class="side-nav-link">Material theme</LinkTo>
+        <LinkTo @route='public-pages.cookbook.css-animations' class="side-nav-link">CSS Animations</LinkTo>
+        <LinkTo @route='public-pages.cookbook.debounce-searches' class="side-nav-link">Debounce searches</LinkTo>
+        <LinkTo @route='public-pages.cookbook.create-custom-options' class="side-nav-link">Create custom options</LinkTo>
+        <header class="side-nav-header">Advanced recipies</header>
+        <LinkTo @route='public-pages.cookbook.navigable-select' class="side-nav-link">Navigable select</LinkTo>
+        }}
+      </nav>
+      <section class="doc-page">
+        <PowerSelect
+          @selected={{this.currentSection}}
+          @options={{this.groupedSections}}
+          @onChange={{this.visit}}
+          @searchField="text"
+          @triggerClass="section-selector"
+          as |option|
+        >
+          {{option.text}}
+        </PowerSelect>
+        {{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 ac683af2..00000000
--- a/docs/app/templates/public-pages/cookbook.hbs
+++ /dev/null
@@ -1,40 +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.datepicker"
-      class="side-nav-link"
-    >Datepicker</LinkTo>
-    <LinkTo @route="public-pages.cookbook.nav-select" class="side-nav-link">Nav
-      with select</LinkTo>
-    <LinkTo
-      @route="public-pages.cookbook.multiple-months"
-      class="side-nav-link"
-    >Multiple months</LinkTo>
-    {{!
-    <LinkTo @route='public-pages.cookbook.material-theme' class="side-nav-link">Material theme</LinkTo>
-    <LinkTo @route='public-pages.cookbook.css-animations' class="side-nav-link">CSS Animations</LinkTo>
-    <LinkTo @route='public-pages.cookbook.debounce-searches' class="side-nav-link">Debounce searches</LinkTo>
-    <LinkTo @route='public-pages.cookbook.create-custom-options' class="side-nav-link">Create custom options</LinkTo>
-    <header class="side-nav-header">Advanced recipies</header>
-    <LinkTo @route='public-pages.cookbook.navigable-select' class="side-nav-link">Navigable select</LinkTo>
-    }}
-  </nav>
-  <section class="doc-page">
-    <PowerSelect
-      @selected={{this.currentSection}}
-      @options={{this.groupedSections}}
-      @onChange={{this.visit}}
-      @searchField="text"
-      @triggerClass="section-selector"
-      as |option|
-    >
-      {{option.text}}
-    </PowerSelect>
-    {{outlet}}
-  </section>
-</section>
\ No newline at end of file
diff --git a/docs/app/templates/public-pages/cookbook/datepicker.hbs b/docs/app/templates/public-pages/cookbook/datepicker.hbs
deleted file mode 100644
index 9f8fd156..00000000
--- a/docs/app/templates/public-pages/cookbook/datepicker.hbs
+++ /dev/null
@@ -1,62 +0,0 @@
-<h1 class="doc-page-title">Datepicker</h1>
-
-<p>
-  One very common use case of calendars is as part of another datepicker
-  component. That is, a calendar associated with an input field, in which when
-  the input is clicked, the calendar appears in a floating box to ease choosing
-  a date.
-</p>
-
-<p>
-  It might seem that this would take a lot of code, but the Ember ecosystem is
-  amazing, and there are already some components that act as building blocks for
-  other components that we can leverage.
-</p>
-
-<p>
-  One of them is
-  <a href="https://github.com/cibernox/ember-basic-dropdown">Ember Basic
-    Dropdown</a>. It does only one thing, but it does it well: Display a
-  floating box next to another element when that element is clicked.
-</p>
-
-<p>Let's build a naive datepicker in 20 lines of code!</p>
-
-<CodeExample @hbs="datepicker-1.hbs">
-  {{component (ensure-safe-component this.datepicker1)}}
-</CodeExample>
-
-<p>
-  We've just
-  <em>composed</em>
-  two battle-tested community addons into an entirely new component without a
-  single line of Javascript! How cool is that?
-</p>
-
-<p>
-  You can style it in any way you want, add wrapper divs like the ones required
-  by some CSS frameworks (I'm looking at you, Bootstrap), format the text of the
-  input using some helper. You could also modify it to use a textarea or to
-  format ranges in a breeze.
-</p>
-
-<p>
-  Admittedly, there is some room for refinement.
-</p>
-<p>
-  For example, you could want to close the dropdown when a day is selected or
-  allow the users to type on the input and parse the date as they type, but this
-  gives a starting point for anyone to create - and publish ;) - their own
-  datepicker component.
-</p>
-
-<div class="doc-page-nav">
-  <LinkTo
-    @route="public-pages.cookbook.index"
-    class="doc-page-nav-link-prev"
-  >&lt; System-wide config</LinkTo>
-  <LinkTo
-    @route="public-pages.cookbook.nav-select"
-    class="doc-page-nav-link-next"
-  >Nav with select &gt;</LinkTo>
-</div>
\ 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..adab6e78
--- /dev/null
+++ b/docs/app/templates/public-pages/cookbook/index.gts
@@ -0,0 +1,64 @@
+import CodeExample from 'docs/components/code-example';
+import Datepicker1 from '../../../components/snippets/datepicker-1';
+import { LinkTo } from '@ember/routing';
+
+<template>
+  <h1 class="doc-page-title">Datepicker</h1>
+
+  <p>
+    One very common use case of calendars is as part of another datepicker
+    component. That is, a calendar associated with an input field, in which when
+    the input is clicked, the calendar appears in a floating box to ease choosing
+    a date.
+  </p>
+
+  <p>
+    It might seem that this would take a lot of code, but the Ember ecosystem is
+    amazing, and there are already some components that act as building blocks for
+    other components that we can leverage.
+  </p>
+
+  <p>
+    One of them is
+    <a href="https://github.com/cibernox/ember-basic-dropdown">Ember Basic
+      Dropdown</a>. It does only one thing, but it does it well: Display a
+    floating box next to another element when that element is clicked.
+  </p>
+
+  <p>Let's build a naive datepicker in 20 lines of code!</p>
+
+  <CodeExample @glimmerTs="datepicker-1.gts">
+    {{Datepicker1}}
+  </CodeExample>
+
+  <p>
+    We've just
+    <em>composed</em>
+    two battle-tested community addons into an entirely new component without a
+    single line of Javascript! How cool is that?
+  </p>
+
+  <p>
+    You can style it in any way you want, add wrapper divs like the ones required
+    by some CSS frameworks (I'm looking at you, Bootstrap), format the text of the
+    input using some helper. You could also modify it to use a textarea or to
+    format ranges in a breeze.
+  </p>
+
+  <p>
+    Admittedly, there is some room for refinement.
+  </p>
+  <p>
+    For example, you could want to close the dropdown when a day is selected or
+    allow the users to type on the input and parse the date as they type, but this
+    gives a starting point for anyone to create - and publish ;) - their own
+    datepicker component.
+  </p>
+
+  <div class="doc-page-nav">
+    <LinkTo
+      @route="public-pages.cookbook.nav-select"
+      class="doc-page-nav-link-next"
+    >Nav with select &gt;</LinkTo>
+  </div>
+</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 413d8edc..00000000
--- a/docs/app/templates/public-pages/cookbook/index.hbs
+++ /dev/null
@@ -1,52 +0,0 @@
-<h1 class="doc-page-title">System-wide config</h1>
-
-<p>
-  There is a fair amount of option on this component that allow to configure how
-  it looks and how it behaves, if you want all the calendars of your app to
-  always behave the same, it can be tiring to pass the same options over and
-  over.
-</p>
-
-<p>
-  Is there a way of changing the defaults of the component(s) in a way that you
-  don't have to pass the same options everywhere?
-</p>
-
-<p>
-  Yes, and it's simpler than you think.
-</p>
-
-<p>
-  Inside your app's
-  <code>/app/components/</code>
-  folder create a
-  <code>power-calendar.js</code>
-  file that exports a component inherits from the one provided by the addon, and
-  define on it the values you want them to be the new defaults.
-</p>
-
-<p>
-  By example, if you develop a nicer
-  <code>&lt;calendar.Nav/&gt;</code>
-  component that you want to user in every calendars, you could do this:
-</p>
-
-<CodeSnippet @name="system-wide-config-1-js.js" />
-
-<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>&lt;PowerCalendar /&gt;</code>
-  but if you want the default component to still be available, just define it in
-  a file with a different name.
-</p>
-
-<div class="doc-page-nav">
-  <LinkTo
-    @route="public-pages.cookbook.datepicker"
-    class="doc-page-nav-link-next"
-  >Datepicker &gt;</LinkTo>
-</div>
\ No newline at end of file
diff --git a/docs/app/templates/public-pages/cookbook/multiple-months.gts b/docs/app/templates/public-pages/cookbook/multiple-months.gts
new file mode 100644
index 00000000..0a60b074
--- /dev/null
+++ b/docs/app/templates/public-pages/cookbook/multiple-months.gts
@@ -0,0 +1,64 @@
+import CodeExample from 'docs/components/code-example';
+import MultipleMonths1 from '../../../components/snippets/multiple-months-1';
+import MultipleMonths2 from '../../../components/snippets/multiple-months-2';
+import { LinkTo } from '@ember/routing';
+
+<template>
+  <h1 class="doc-page-title">Display Multiple Months</h1>
+
+  <p>
+    You might want to display multiple months simultaneously. Displaying multiple
+    months is a nice especially when you might want people to select dates across
+    month boundaries.
+  </p>
+
+  <p>
+    We are in luck! Versions of Ember Power Calendar greater than 0.11.0 can
+    support this with a few little twix.
+  </p>
+
+  <CodeExample
+    @glimmerTs="multiple-months-1.gts"
+    @css="multiple-months-1-css.scss"
+  >
+    {{MultipleMonths1}}
+  </CodeExample>
+
+  <p>
+    How? Well. In versions of ember-power-calendar greater than 0.11.0 we can pass
+    a
+    <code>center</code>
+    property to the
+    <code>calendar.Days</code>
+    component. This center property must be a valid date. As long as you use the
+    <code>ember-power-calendar-range</code>
+    component, months will render with the correct center and everything still
+    works! If you want the months to be changeable you will need to wire that up
+    yourself similar to how we demonstate above. You might need to bust out some
+    fancy styling, but we are web developers... are we not?
+  </p>
+
+  <p>
+    Another nice pattern for mobile is to render all 12 months vertically and let
+    the user scroll them.
+  </p>
+
+  <CodeExample
+    @glimmerTs="multiple-months-2.gts"
+    @css="multiple-months-2-css.css"
+  >
+    {{MultipleMonths2}}
+  </CodeExample>
+
+  <p>
+    In this example, we create an array of all the month centers and loop over
+    them. A little dash of CSS to align them correct. Easy peasy lemon-squeezy.
+  </p>
+
+  <div class="doc-page-nav">
+    <LinkTo
+      @route="public-pages.cookbook.nav-select"
+      class="doc-page-nav-link-prev"
+    >&lt; Nav with select</LinkTo>
+  </div>
+</template>
diff --git a/docs/app/templates/public-pages/cookbook/multiple-months.hbs b/docs/app/templates/public-pages/cookbook/multiple-months.hbs
deleted file mode 100644
index a1b72e72..00000000
--- a/docs/app/templates/public-pages/cookbook/multiple-months.hbs
+++ /dev/null
@@ -1,59 +0,0 @@
-<h1 class="doc-page-title">Display Multiple Months</h1>
-
-<p>
-  You might want to display multiple months simultaneously. Displaying multiple
-  months is a nice especially when you might want people to select dates across
-  month boundaries.
-</p>
-
-<p>
-  We are in luck! Versions of Ember Power Calendar greater than 0.11.0 can
-  support this with a few little twix.
-</p>
-
-<CodeExample
-  @js="multiple-months-1.js"
-  @hbs="multiple-months-1.hbs"
-  @css="multiple-months-1-css.scss"
->
-  {{component (ensure-safe-component this.multipleMonths1)}}
-</CodeExample>
-
-<p>
-  How? Well. In versions of ember-power-calendar greater than 0.11.0 we can pass
-  a
-  <code>center</code>
-  property to the
-  <code>calendar.Days</code>
-  component. This center property must be a valid date. As long as you use the
-  <code>ember-power-calendar-range</code>
-  component, months will render with the correct center and everything still
-  works! If you want the months to be changeable you will need to wire that up
-  yourself similar to how we demonstate above. You might need to bust out some
-  fancy styling, but we are web developers... are we not?
-</p>
-
-<p>
-  Another nice pattern for mobile is to render all 12 months vertically and let
-  the user scroll them.
-</p>
-
-<CodeExample
-  @js="multiple-months-2.js"
-  @hbs="multiple-months-2.hbs"
-  @css="multiple-months-2-css.css"
->
-  {{component (ensure-safe-component this.multipleMonths2)}}
-</CodeExample>
-
-<p>
-  In this example, we create an array of all the month centers and loop over
-  them. A little dash of CSS to align them correct. Easy peasy lemon-squeezy.
-</p>
-
-<div class="doc-page-nav">
-  <LinkTo
-    @route="public-pages.cookbook.nav-select"
-    class="doc-page-nav-link-prev"
-  >&lt; Nav with select</LinkTo>
-</div>
\ No newline at end of file
diff --git a/docs/app/templates/public-pages/cookbook/nav-select.gts b/docs/app/templates/public-pages/cookbook/nav-select.gts
new file mode 100644
index 00000000..1c6b372e
--- /dev/null
+++ b/docs/app/templates/public-pages/cookbook/nav-select.gts
@@ -0,0 +1,98 @@
+import CodeExample from 'docs/components/code-example';
+import NavSelect1 from '../../../components/snippets/nav-select-1';
+import NavSelect2 from '../../../components/snippets/nav-select-2';
+import NavSelect3 from '../../../components/snippets/nav-select-3';
+import { LinkTo } from '@ember/routing';
+
+<template>
+  <h1 class="doc-page-title">Nav with select</h1>
+
+  <p>
+    A couple people asked me if I was considering adding a feature present in the
+    well known
+    <a href="http://dbushell.github.io/Pikaday/">Pickaday</a>
+    library where you can click in the month or year to quicky navigate to far
+    away dates.
+  </p>
+
+  <p>
+    The answer I gave was that I wasn't considering it, but not because I don't
+    think it is a good pattern, but because the flexible nature of Ember Power
+    Calendar makes it unnecesary!
+  </p>
+
+  <p>
+    Let's build it in a few lines of code.
+  </p>
+
+  <CodeExample
+    @glimmerTs="nav-select-1.gts"
+    @css="nav-select-1-css.css"
+  >
+    {{NavSelect1}}
+  </CodeExample>
+
+  <p>
+    Ok, let's disect what is going on here.
+  </p>
+
+  <p>
+    We pass a block to the
+    <code>calendar.Nav</code>
+    component to replace the default markup with the name of the component with
+    our own markup. In that markup we add two invisible select on top of the text
+    of the month and year that when interacted call an action that builds a new
+    date and pass it to
+    <code>calendar.actions.changeCenter</code>
+    public action to center the calendar on that action.
+  </p>
+
+  <p>
+    The markup itself is a bit verbose because we're coding a select outselves,
+    but the logic is easy to follow.
+  </p>
+
+  <p>
+    Ember Power Calendar prefers to let users enhance the calendar themselves
+    instead of attempting to imagine all the possible scenarios.
+  </p>
+
+  <p>
+    What if you prefer to use Ember Power Select with the years grouped by decade
+    and some fancy animations instead of a native select?
+  </p>
+
+  <CodeExample @glimmerTs="nav-select-2.gts">
+    {{NavSelect2}}
+  </CodeExample>
+
+  <p>
+    Or maybe an
+    <code>&lt;input type="number"&gt;</code>
+    for the year only?
+  </p>
+
+  <CodeExample @glimmerTs="nav-select-3.gts">
+    {{NavSelect3}}
+  </CodeExample>
+
+  <p>
+    Since you can replace any part of the component by your own code and
+    templates, there is no limits in what you can do.
+  </p>
+
+  <p>
+    Go ahead, build something cool and publish it!
+  </p>
+
+  <div class="doc-page-nav">
+    <LinkTo
+      @route="public-pages.cookbook.index"
+      class="doc-page-nav-link-prev"
+    >&lt; Datepicker</LinkTo>
+    <LinkTo
+      @route="public-pages.cookbook.multiple-months"
+      class="doc-page-nav-link-next"
+    >Multiple months &gt;</LinkTo>
+  </div>
+</template>
diff --git a/docs/app/templates/public-pages/cookbook/nav-select.hbs b/docs/app/templates/public-pages/cookbook/nav-select.hbs
deleted file mode 100644
index abbb62d5..00000000
--- a/docs/app/templates/public-pages/cookbook/nav-select.hbs
+++ /dev/null
@@ -1,91 +0,0 @@
-<h1 class="doc-page-title">Nav with select</h1>
-
-<p>
-  A couple people asked me if I was considering adding a feature present in the
-  well known
-  <a href="http://dbushell.github.io/Pikaday/">Pickaday</a>
-  library where you can click in the month or year to quicky navigate to far
-  away dates.
-</p>
-
-<p>
-  The answer I gave was that I wasn't considering it, but not because I don't
-  think it is a good pattern, but because the flexible nature of Ember Power
-  Calendar makes it unnecesary!
-</p>
-
-<p>
-  Let's build it in a few lines of code.
-</p>
-
-<CodeExample
-  @js="nav-select-1.js"
-  @hbs="nav-select-1.hbs"
-  @css="nav-select-1-css.css"
->
-  {{component (ensure-safe-component this.navSelect1)}}
-</CodeExample>
-
-<p>
-  Ok, let's disect what is going on here.
-</p>
-
-<p>
-  We pass a block to the
-  <code>calendar.Nav</code>
-  component to replace the default markup with the name of the component with
-  our own markup. In that markup we add two invisible select on top of the text
-  of the month and year that when interacted call an action that builds a new
-  date and pass it to
-  <code>calendar.actions.changeCenter</code>
-  public action to center the calendar on that action.
-</p>
-
-<p>
-  The markup itself is a bit verbose because we're coding a select outselves,
-  but the logic is easy to follow.
-</p>
-
-<p>
-  Ember Power Calendar prefers to let users enhance the calendar themselves
-  instead of attempting to imagine all the possible scenarios.
-</p>
-
-<p>
-  What if you prefer to use Ember Power Select with the years grouped by decade
-  and some fancy animations instead of a native select?
-</p>
-
-<CodeExample @js="nav-select-2.js" @hbs="nav-select-2.hbs">
-  {{component (ensure-safe-component this.navSelect2)}}
-</CodeExample>
-
-<p>
-  Or maybe an
-  <code>&lt;input type="number"&gt;</code>
-  for the year only?
-</p>
-
-<CodeExample @js="nav-select-3.js" @hbs="nav-select-3.hbs">
-  {{component (ensure-safe-component this.navSelect3)}}
-</CodeExample>
-
-<p>
-  Since you can replace any part of the component by your own code and
-  templates, there is no limits in what you can do.
-</p>
-
-<p>
-  Go ahead, build something cool and publish it!
-</p>
-
-<div class="doc-page-nav">
-  <LinkTo
-    @route="public-pages.cookbook.datepicker"
-    class="doc-page-nav-link-prev"
-  >&lt; Datepicker</LinkTo>
-  <LinkTo
-    @route="public-pages.cookbook.multiple-months"
-    class="doc-page-nav-link-next"
-  >Multiple months &gt;</LinkTo>
-</div>
\ 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..0ff26ffd
--- /dev/null
+++ b/docs/app/templates/public-pages/docs.gts
@@ -0,0 +1,122 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { service } from '@ember/service';
+import { LinkTo } from '@ember/routing';
+import PowerSelect from 'ember-power-select/components/power-select';
+import type RouterService from '@ember/routing/router-service';
+
+const groupedSections = [
+  {
+    groupName: 'Getting started',
+    options: [
+      { route: 'public-pages.docs.index', text: 'Overview' },
+      { route: 'public-pages.docs.installation', text: 'Installation & setup' },
+      { route: 'public-pages.docs.how-to-use-it', text: 'How to use it' },
+      { route: 'public-pages.docs.action-handling', text: 'Action handling' },
+      { route: 'public-pages.docs.range-selection', text: 'Range selection' },
+      {
+        route: 'public-pages.docs.multiple-selection',
+        text: 'Multiple selection',
+      },
+    ],
+  },
+  {
+    groupName: 'Basic customization',
+    options: [
+      { route: 'public-pages.docs.i18n', text: 'I18n' },
+      { route: 'public-pages.docs.the-nav', text: 'The nav' },
+      { route: 'public-pages.docs.the-days', text: 'The list' },
+    ],
+  },
+  {
+    groupName: 'Other',
+    options: [
+      { route: 'public-pages.docs.test-helpers', text: 'Test helpers' },
+      { route: 'public-pages.docs.api-reference', text: 'API reference' },
+    ],
+  },
+];
+
+export default class PublicPagesDocs 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 && section.route === currentRouteName) {
+            return section;
+          }
+        }
+      }
+    }
+
+    return undefined;
+  }
+
+  @action
+  visit(section: {
+    route: string;
+    text: string;
+  }) {
+    this.router.transitionTo(section.route);
+  }
+
+  <template>
+    {{! template-lint-disable no-duplicate-landmark-elements }}
+    <section class="docs">
+      <nav class="side-nav">
+        <header class="side-nav-header">Getting started</header>
+        <LinkTo
+          @route="public-pages.docs.index"
+          class="side-nav-link"
+        >Overview</LinkTo>
+        <LinkTo
+          @route="public-pages.docs.installation"
+          class="side-nav-link"
+        >Installation &amp; setup</LinkTo>
+        <LinkTo @route="public-pages.docs.how-to-use-it" class="side-nav-link">How
+          to use it</LinkTo>
+        <LinkTo
+          @route="public-pages.docs.action-handling"
+          class="side-nav-link"
+        >Action handling</LinkTo>
+        <LinkTo
+          @route="public-pages.docs.range-selection"
+          class="side-nav-link"
+        >Range selection</LinkTo>
+        <LinkTo
+          @route="public-pages.docs.multiple-selection"
+          class="side-nav-link"
+        >Multiple selection</LinkTo>
+        <header class="side-nav-header">Basic customization</header>
+        <LinkTo @route="public-pages.docs.i18n" class="side-nav-link">I18n</LinkTo>
+        <LinkTo @route="public-pages.docs.the-nav" class="side-nav-link">The nav</LinkTo>
+        <LinkTo @route="public-pages.docs.the-days" class="side-nav-link">The days</LinkTo>
+        <header class="side-nav-header">Other</header>
+        <LinkTo @route="public-pages.docs.test-helpers" class="side-nav-link">Test
+          helpers</LinkTo>
+        <LinkTo @route="public-pages.docs.api-reference" class="side-nav-link">API
+          reference</LinkTo>
+      </nav>
+      <section class="doc-page">
+        <PowerSelect
+          @selected={{this.currentSection}}
+          @options={{this.groupedSections}}
+          @onChange={{this.visit}}
+          @searchField="text"
+          @triggerClass="section-selector"
+          as |option|
+        >
+          {{option.text}}
+        </PowerSelect>
+        {{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 e96b7ad6..00000000
--- a/docs/app/templates/public-pages/docs.hbs
+++ /dev/null
@@ -1,50 +0,0 @@
-{{! template-lint-disable no-duplicate-landmark-elements }}
-<section class="docs">
-  <nav class="side-nav">
-    <header class="side-nav-header">Getting started</header>
-    <LinkTo
-      @route="public-pages.docs.index"
-      class="side-nav-link"
-    >Overview</LinkTo>
-    <LinkTo
-      @route="public-pages.docs.installation"
-      class="side-nav-link"
-    >Installation &amp; setup</LinkTo>
-    <LinkTo @route="public-pages.docs.how-to-use-it" class="side-nav-link">How
-      to use it</LinkTo>
-    <LinkTo
-      @route="public-pages.docs.action-handling"
-      class="side-nav-link"
-    >Action handling</LinkTo>
-    <LinkTo
-      @route="public-pages.docs.range-selection"
-      class="side-nav-link"
-    >Range selection</LinkTo>
-    <LinkTo
-      @route="public-pages.docs.multiple-selection"
-      class="side-nav-link"
-    >Multiple selection</LinkTo>
-    <header class="side-nav-header">Basic customization</header>
-    <LinkTo @route="public-pages.docs.i18n" class="side-nav-link">I18n</LinkTo>
-    <LinkTo @route="public-pages.docs.the-nav" class="side-nav-link">The nav</LinkTo>
-    <LinkTo @route="public-pages.docs.the-days" class="side-nav-link">The days</LinkTo>
-    <header class="side-nav-header">Other</header>
-    <LinkTo @route="public-pages.docs.test-helpers" class="side-nav-link">Test
-      helpers</LinkTo>
-    <LinkTo @route="public-pages.docs.api-reference" class="side-nav-link">API
-      reference</LinkTo>
-  </nav>
-  <section class="doc-page">
-    <PowerSelect
-      @selected={{this.currentSection}}
-      @options={{this.groupedSections}}
-      @onChange={{this.visit}}
-      @searchField="text"
-      @triggerClass="section-selector"
-      as |option|
-    >
-      {{option.text}}
-    </PowerSelect>
-    {{outlet}}
-  </section>
-</section>
\ No newline at end of file
diff --git a/docs/app/templates/public-pages/docs/action-handling.gts b/docs/app/templates/public-pages/docs/action-handling.gts
new file mode 100644
index 00000000..3af14ca6
--- /dev/null
+++ b/docs/app/templates/public-pages/docs/action-handling.gts
@@ -0,0 +1,167 @@
+import CodeExample from 'docs/components/code-example';
+import ActionHandling1 from '../../../components/snippets/action-handling-1';
+import ActionHandling2 from '../../../components/snippets/action-handling-2';
+import ActionHandling3 from '../../../components/snippets/action-handling-3';
+import { LinkTo } from '@ember/routing';
+
+<template>
+  <h1 class="doc-page-title">Action handling</h1>
+
+  <p>
+    Ember Power Calendar aims to be very customizable and because of that it also
+    has to be very explicit about its behaviour, even if that makes it slightly
+    verbose.
+  </p>
+
+  <p>
+    The data flow from the app to the addon is strictly unidirectional. Data comes
+    into the component, and actions are fired from the inside. The user must
+    handle those actions in order for
+    <strong>anything</strong>
+    to happen.
+  </p>
+
+  <p>Let's start with the basics, adding month navigation.</p>
+
+  <h3><code>onCenterChange</code></h3>
+
+  <p>
+    In the previous section we mentioned that if you pass
+    <code>center=someDate</code>
+    to the component, that month is displayed. If that option gets updates the
+    calendar will render the new month. That means that you can create your own
+    interface to navigate months, it only has to update the
+    <code>center</code>
+    property.
+  </p>
+
+  <p>
+    However, it would be inconvenient to force everyone to do that, so if you pass
+    <code>onCenterChange</code>
+    action to the component, the
+    <code>calendar.Nav</code>
+    component gets some built-in controls to navigate to the previous and next
+    month. Use that action to update the displayed month and you have a navigable
+    calendar!
+  </p>
+
+  <CodeExample @glimmerTs="action-handling-1.gts">
+    {{ActionHandling1}}
+  </CodeExample>
+
+  <p>
+    Making this interaction so explicit might seem verbose. It does force you to
+    type a few characters for the simplest use case, but in exchange makes some
+    usages that are usually very hard to implement extremely simple.
+  </p>
+
+  <p>
+    For example, imagine that changing to a different month needs to make an ajax
+    call to the server to gather all the events that are going to happen that
+    month (we haven't seen how to display events on the calendar, but use your
+    imagination) before showing the next month. While those events are loaded, we
+    want to hold changing the month and show a loading state with an animated
+    spinner.
+  </p>
+
+  <p>It doesn't seem like the kind of thing you'd dare to attempt with
+    bootstrap-datepicker, right?</p>
+
+  <CodeExample @glimmerTs="action-handling-2.gts">
+    {{ActionHandling2}}
+  </CodeExample>
+
+  <p>
+    While the calendar is performing a task, its yielded public API has the
+    <code>loading</code>
+    flag enabled, and since you can interleave the subcomponents in your own
+    markup, you use that flag to create an overlay.
+  </p>
+
+  <p>
+    No black magic. Just the way you usually manage sync actions in your own code.
+    Ember Power Calendar is promise-aware and task-aware, all the way down.
+  </p>
+
+  <h3><code>onSelect</code></h3>
+
+  <p>
+    One very common use case of a calendar is to select one (or many) days. For
+    that purpose it exposes an
+    <code>onSelect</code>
+    action that is called when the user clicks (or presses Enter over) a day.
+  </p>
+
+  <p>
+    That action is fired with a
+    <code>day</code>
+    object as first argument. This object built by Ember Power Calendar contains
+    many useful information that we will explore in detail, but for now we'll hold
+    to the idea that it has a
+    <code>date</code>
+    property that contains a native
+    <code>Date</code>
+    object and a
+    <code>moment</code>
+    property that contains the same value but wrapped by
+    <em>MomentJS</em>, so you can use the one you prefer.
+  </p>
+
+  <p>
+    Like with the previous action, it's your responsibility to react to this
+    action, but in the most typical case you just want to update the
+    <code>selected</code>
+    value. Let's see how to do it, and we are going to use the plain
+    <code>Date</code>
+    version of the date.
+  </p>
+
+  <p>Go, click one day.</p>
+
+  <CodeExample @glimmerTs="action-handling-3.gts">
+    {{ActionHandling3}}
+  </CodeExample>
+
+  <p>
+    You will notice a couple more things happening here.
+  </p>
+
+  <p>
+    To begin with, the days of the calendar highlight when you hover them. This is
+    because the presence of an
+    <code>onSelect</code>
+    action makes the component enter an interactive mode, which adds a class to
+    it.
+  </p>
+
+  <p>
+    Also, if you inspect the html, you'll see that the days are now
+    <code>&lt;button&gt;</code>s instead of
+    <code>&lt;div&gt;</code>s. This, besides of making them clickable to select a
+    day, makes them focusable, which is important to make the component
+    accessible. The currently focused day is shown with a blue underline, and once
+    one day is focused you can use the arrows,
+    <kbd>TAB</kbd>,
+    <kbd>ENTER</kbd>
+    and
+    <kbd>SPACE</kbd>
+    keys to move around and interact with the component.
+  </p>
+
+  <p>
+    This action is fired when the selection changes, but the selection doesn't
+    need to be a single date. It can be a range or a set of sparse dates! The next
+    page is all about this topic.
+  </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.range-selection"
+      class="doc-page-nav-link-next"
+    >Date ranges &gt;</LinkTo>
+  </div>
+</template>
diff --git a/docs/app/templates/public-pages/docs/action-handling.hbs b/docs/app/templates/public-pages/docs/action-handling.hbs
deleted file mode 100644
index 91692395..00000000
--- a/docs/app/templates/public-pages/docs/action-handling.hbs
+++ /dev/null
@@ -1,159 +0,0 @@
-<h1 class="doc-page-title">Action handling</h1>
-
-<p>
-  Ember Power Calendar aims to be very customizable and because of that it also
-  has to be very explicit about its behaviour, even if that makes it slightly
-  verbose.
-</p>
-
-<p>
-  The data flow from the app to the addon is strictly unidirectional. Data comes
-  into the component, and actions are fired from the inside. The user must
-  handle those actions in order for
-  <strong>anything</strong>
-  to happen.
-</p>
-
-<p>Let's start with the basics, adding month navigation.</p>
-
-<h3><code>onCenterChange</code></h3>
-
-<p>
-  In the previous section we mentioned that if you pass
-  <code>center=someDate</code>
-  to the component, that month is displayed. If that option gets updates the
-  calendar will render the new month. That means that you can create your own
-  interface to navigate months, it only has to update the
-  <code>center</code>
-  property.
-</p>
-
-<p>
-  However, it would be inconvenient to force everyone to do that, so if you pass
-  <code>onCenterChange</code>
-  action to the component, the
-  <code>calendar.Nav</code>
-  component gets some built-in controls to navigate to the previous and next
-  month. Use that action to update the displayed month and you have a navigable
-  calendar!
-</p>
-
-<CodeExample @hbs="action-handling-1.hbs">
-  {{component (ensure-safe-component this.actionHandling1)}}
-</CodeExample>
-
-<p>
-  Making this interaction so explicit might seem verbose. It does force you to
-  type a few characters for the simplest use case, but in exchange makes some
-  usages that are usually very hard to implement extremely simple.
-</p>
-
-<p>
-  For example, imagine that changing to a different month needs to make an ajax
-  call to the server to gather all the events that are going to happen that
-  month (we haven't seen how to display events on the calendar, but use your
-  imagination) before showing the next month. While those events are loaded, we
-  want to hold changing the month and show a loading state with an animated
-  spinner.
-</p>
-
-<p>It doesn't seem like the kind of thing you'd dare to attempt with
-  bootstrap-datepicker, right?</p>
-
-<CodeExample @hbs="action-handling-2.hbs" @js="action-handling-2.js">
-  {{component (ensure-safe-component this.actionHandling2)}}
-</CodeExample>
-
-<p>
-  While the calendar is performing a task, its yielded public API has the
-  <code>loading</code>
-  flag enabled, and since you can interleave the subcomponents in your own
-  markup, you use that flag to create an overlay.
-</p>
-
-<p>
-  No black magic. Just the way you usually manage sync actions in your own code.
-  Ember Power Calendar is promise-aware and task-aware, all the way down.
-</p>
-
-<h3><code>onSelect</code></h3>
-
-<p>
-  One very common use case of a calendar is to select one (or many) days. For
-  that purpose it exposes an
-  <code>onSelect</code>
-  action that is called when the user clicks (or presses Enter over) a day.
-</p>
-
-<p>
-  That action is fired with a
-  <code>day</code>
-  object as first argument. This object built by Ember Power Calendar contains
-  many useful information that we will explore in detail, but for now we'll hold
-  to the idea that it has a
-  <code>date</code>
-  property that contains a native
-  <code>Date</code>
-  object and a
-  <code>moment</code>
-  property that contains the same value but wrapped by
-  <em>MomentJS</em>, so you can use the one you prefer.
-</p>
-
-<p>
-  Like with the previous action, it's your responsibility to react to this
-  action, but in the most typical case you just want to update the
-  <code>selected</code>
-  value. Let's see how to do it, and we are going to use the plain
-  <code>Date</code>
-  version of the date.
-</p>
-
-<p>Go, click one day.</p>
-
-<CodeExample @hbs="action-handling-3.hbs" @js="action-handling-3.js">
-  {{component (ensure-safe-component this.actionHandling3)}}
-</CodeExample>
-
-<p>
-  You will notice a couple more things happening here.
-</p>
-
-<p>
-  To begin with, the days of the calendar highlight when you hover them. This is
-  because the presence of an
-  <code>onSelect</code>
-  action makes the component enter an interactive mode, which adds a class to
-  it.
-</p>
-
-<p>
-  Also, if you inspect the html, you'll see that the days are now
-  <code>&lt;button&gt;</code>s instead of
-  <code>&lt;div&gt;</code>s. This, besides of making them clickable to select a
-  day, makes them focusable, which is important to make the component
-  accessible. The currently focused day is shown with a blue underline, and once
-  one day is focused you can use the arrows,
-  <kbd>TAB</kbd>,
-  <kbd>ENTER</kbd>
-  and
-  <kbd>SPACE</kbd>
-  keys to move around and interact with the component.
-</p>
-
-<p>
-  This action is fired when the selection changes, but the selection doesn't
-  need to be a single date. It can be a range or a set of sparse dates! The next
-  page is all about this topic.
-</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.range-selection"
-    class="doc-page-nav-link-next"
-  >Date ranges &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..4d0f70af
--- /dev/null
+++ b/docs/app/templates/public-pages/docs/api-reference.gts
@@ -0,0 +1,117 @@
+<template>
+  <h1 class="doc-page-title">API Reference</h1>
+
+  <p>
+    Ember Power Calendar aims to allow users to create the ideal calendar they
+    need using only the properties and actions defined in its public API, so it is
+    important to have a comprehensive list of all the available options.
+  </p>
+
+  <h3>The <code>day</code> object</h3>
+
+  <p>
+    The day object is an object received by many actions, blocks and components
+    and one of the interfaces you will use more often.
+  </p>
+
+  <table>
+    <thead>
+      <tr>
+        <th>Option</th>
+        <th>Type</th>
+        <th>Description</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>id</td>
+        <td><code>String</code></td>
+        <td>A unique identified of the day. It has the format
+          <code>YYYY-MM-DD</code></td>
+      </tr>
+      <tr>
+        <td>number</td>
+        <td><code>Number</code></td>
+        <td>The day's number. From 1 to 31</td>
+      </tr>
+      <tr>
+        <td>date</td>
+        <td><code>Date</code></td>
+        <td>The native <code>Date</code> object representing that day.</td>
+      </tr>
+      <tr>
+        <td>moment</td>
+        <td><code>MomentJS</code></td>
+        <td>The
+          <code>moment</code>
+          representing that day. (only when
+          <strong>ember-power-calendar-moment</strong>
+          is installed)</td>
+      </tr>
+      <tr>
+        <td>datetime</td>
+        <td><code>DateTime</code></td>
+        <td>The Luxon's
+          <code>DateTime</code>
+          instance representing that day. (only when
+          <strong>ember-power-calendar-luxon</strong>
+          is installed)</td>
+      </tr>
+      <tr>
+        <td>isFocused</td>
+        <td><code>Boolean</code></td>
+        <td>It is true when the the cell of that day has the focus</td>
+      </tr>
+      <tr>
+        <td>isCurrentMonth</td>
+        <td><code>Boolean</code></td>
+        <td>It is true for those days in the current day, and false for those days
+          for the previous/next months shown around.</td>
+      </tr>
+      <tr>
+        <td>isToday</td>
+        <td><code>Boolean</code></td>
+        <td>It is true if this day is today</td>
+      </tr>
+      <tr>
+        <td>isSelected</td>
+        <td><code>Boolean</code></td>
+        <td>It is true if the date of this day is the selected one. In multiple
+          select it is true if the date of this day is among the selected ones. In
+          range selects, it is true if the date if this day is in the range,
+          including both ends.</td>
+      </tr>
+      <tr>
+        <td>isRangeStart</td>
+        <td><code>Boolean</code></td>
+        <td>It is true if this day is the beginning of a range. It is false in
+          non-range calendars</td>
+      </tr>
+      <tr>
+        <td>isRangeEnd</td>
+        <td><code>Boolean</code></td>
+        <td>It is true if this day is the end of a range. It is false in non-range
+          calendars</td>
+      </tr>
+    </tbody>
+  </table>
+
+  <h3>The <code>calendar</code> object</h3>
+
+  {{! template-lint-disable no-whitespace-for-layout }}
+  <pre>
+    {
+      uniqueId: &lt;string&gt;, // Contains the unique of this instance of EmberPowerSelect. It's of the form "ember1234".
+      selected: &lt;Date&gt;,   // The selected date
+      loading: &lt;boolean&gt;, // True when the async operation of changing the center is in progress
+      center: &lt;Date&gt;,     // The date that acts as the center for the displayed date information
+      locale: &lt;string&gt;    // The ISO code of the locale used to format dates in the calendar
+      type: &lt;string&gt;      // The type of calendar. One of: "multiple" | "range" | "single"
+      actions: {
+        changeCenter(newCenter, calendar, event) { ... }, // Changes the center of the calendar (invoking "@onCenterChange")
+        moveCenter(step, unit, calendar, event) { ... },  // Moves the center of the calendar the given number of units (invoking "@onCenterChange")
+        select(day, calendar, event) { ... },             // Selects the given date (invoking "onSelect")
+      }
+    }
+  </pre>
+</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 cd7c61b7..00000000
--- a/docs/app/templates/public-pages/docs/api-reference.hbs
+++ /dev/null
@@ -1,115 +0,0 @@
-<h1 class="doc-page-title">API Reference</h1>
-
-<p>
-  Ember Power Calendar aims to allow users to create the ideal calendar they
-  need using only the properties and actions defined in its public API, so it is
-  important to have a comprehensive list of all the available options.
-</p>
-
-<h3>The <code>day</code> object</h3>
-
-<p>
-  The day object is an object received by many actions, blocks and components
-  and one of the interfaces you will use more often.
-</p>
-
-<table>
-  <thead>
-    <tr>
-      <th>Option</th>
-      <th>Type</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>id</td>
-      <td><code>String</code></td>
-      <td>A unique identified of the day. It has the format
-        <code>YYYY-MM-DD</code></td>
-    </tr>
-    <tr>
-      <td>number</td>
-      <td><code>Number</code></td>
-      <td>The day's number. From 1 to 31</td>
-    </tr>
-    <tr>
-      <td>date</td>
-      <td><code>Date</code></td>
-      <td>The native <code>Date</code> object representing that day.</td>
-    </tr>
-    <tr>
-      <td>moment</td>
-      <td><code>MomentJS</code></td>
-      <td>The
-        <code>moment</code>
-        representing that day. (only when
-        <strong>ember-power-calendar-moment</strong>
-        is installed)</td>
-    </tr>
-    <tr>
-      <td>datetime</td>
-      <td><code>DateTime</code></td>
-      <td>The Luxon's
-        <code>DateTime</code>
-        instance representing that day. (only when
-        <strong>ember-power-calendar-luxon</strong>
-        is installed)</td>
-    </tr>
-    <tr>
-      <td>isFocused</td>
-      <td><code>Boolean</code></td>
-      <td>It is true when the the cell of that day has the focus</td>
-    </tr>
-    <tr>
-      <td>isCurrentMonth</td>
-      <td><code>Boolean</code></td>
-      <td>It is true for those days in the current day, and false for those days
-        for the previous/next months shown around.</td>
-    </tr>
-    <tr>
-      <td>isToday</td>
-      <td><code>Boolean</code></td>
-      <td>It is true if this day is today</td>
-    </tr>
-    <tr>
-      <td>isSelected</td>
-      <td><code>Boolean</code></td>
-      <td>It is true if the date of this day is the selected one. In multiple
-        select it is true if the date of this day is among the selected ones. In
-        range selects, it is true if the date if this day is in the range,
-        including both ends.</td>
-    </tr>
-    <tr>
-      <td>isRangeStart</td>
-      <td><code>Boolean</code></td>
-      <td>It is true if this day is the beginning of a range. It is false in
-        non-range calendars</td>
-    </tr>
-    <tr>
-      <td>isRangeEnd</td>
-      <td><code>Boolean</code></td>
-      <td>It is true if this day is the end of a range. It is false in non-range
-        calendars</td>
-    </tr>
-  </tbody>
-</table>
-
-<h3>The <code>calendar</code> object</h3>
-
-{{! template-lint-disable no-whitespace-for-layout }}
-<pre>
-  {
-    uniqueId: &lt;string&gt;, // Contains the unique of this instance of EmberPowerSelect. It's of the form `ember1234`.
-    selected: &lt;Date&gt;,   // The selected date
-    loading: &lt;boolean&gt;, // True when the async operation of changing the center is in progress
-    center: &lt;Date&gt;,     // The date that acts as the center for the displayed date information
-    locale: &lt;string&gt;    // The ISO code of the locale used to format dates in the calendar
-    type: &lt;string&gt;      // The type of calendar. One of: "multiple" | "range" | "single"
-    actions: {
-      changeCenter(newCenter, calendar, event) { ... }, // Changes the center of the calendar (invoking `@onCenterChange`)
-      moveCenter(step, unit, calendar, event) { ... },  // Moves the center of the calendar the given number of units (invoking `@onCenterChange`)
-      select(day, calendar, event) { ... },             // Selects the given date (invoking `onSelect`)
-    }
-  }
-</pre>
\ 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..018ed023
--- /dev/null
+++ b/docs/app/templates/public-pages/docs/how-to-use-it.gts
@@ -0,0 +1,145 @@
+
+import CodeExample from 'docs/components/code-example';
+import HowToUseIt1 from '../../../components/snippets/how-to-use-it-1';
+import HowToUseIt2 from '../../../components/snippets/how-to-use-it-2';
+// import HowToUseIt3 from '../../../components/snippets/how-to-use-it-3';
+import HowToUseIt4 from '../../../components/snippets/how-to-use-it-4';
+import HowToUseIt5 from '../../../components/snippets/how-to-use-it-5';
+import { LinkTo } from '@ember/routing';
+
+<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>power-calendar</code>
+    component and yield the calendar to the block. Once inside the block, the
+    yielded calendar has a couple of components inside, but the one you probably
+    care most about is named
+    <code>days</code>.
+  </p>
+
+  <CodeExample @glimmerTs="how-to-use-it-1.gts">
+    {{HowToUseIt1}}
+  </CodeExample>
+
+  <p>
+    Nice, but not very interesting. The
+    <code>calendar.Days</code>
+    component renders a grid of days, and it is smart enough to display the
+    current month but that's it. Let's see how to show a different month.
+  </p>
+
+  <h3><code>center</code></h3>
+
+  <p>
+    To make the calendar render centered on a different month just pass
+    <code>center=someDate</code>
+    and the calendar will display the month of that date.
+  </p>
+  <p>
+    It is important to note that
+    <code>center</code>
+    is a date in which we center our attention but not necessarily the center of
+    the time window we display. In the month view (the default) it doesn't matter
+    if that date is the 1st day or the 31st, the rendered month will be the same.
+    Let's render October of 2013.
+  </p>
+
+  <CodeExample @glimmerTs="how-to-use-it-2.gts">
+    {{HowToUseIt2}}
+  </CodeExample>
+
+  <p>
+    The month above is November of 2013, but that's hard to know if there is
+    nothing else telling us. The second component that the calendar has and that
+    you will find yourself using often is
+    <code>calendar.Nav</code>. This component displays the name of the month and,
+    optionally, some actions to navigate to the previous/next month.
+  </p>
+
+  <CodeExample @glimmerTs="how-to-use-it-3.gts">
+    {{HowToUseIt2}}
+  </CodeExample>
+
+  <p>
+    Oh, and by the way, ember-power-calendar and all its sub-components can
+    receive native
+    <code>Date</code>, and depending on wether you installed
+    <strong>ember-power-calendar-moment</strong>
+    or
+    <strong>ember-power-calendar-luxon</strong>, also
+    <code>moment</code>
+    objects or Luxon's
+    <code>DateTime</code>
+    instances. All options that are dates can take values of any type, and all
+    actions that this component fires will contain dates in both formats too.
+  </p>
+
+  <p>
+    Most of the time however, you just want the
+    <code>nav</code>
+    and
+    <code>days</code>
+    components rendered. For this scenario, simply invoke
+    <code>power-calendar</code>
+    without a block, like so:
+  </p>
+
+  <CodeExample @glimmerTs="how-to-use-it-5.gts">
+    {{HowToUseIt5}}
+  </CodeExample>
+
+  <h3><code>selected</code></h3>
+
+  <p>
+    Sometimes you want a day of the month to be highlighted. To do it pass
+    <code>selected=someDate</code>
+    to the component.
+  </p>
+
+  <CodeExample @glimmerTs="how-to-use-it-4.gts">
+    {{HowToUseIt4}}
+  </CodeExample>
+
+  <p>
+    You can see that the calendar shows the selected date in blue. You may have
+    also noticed that despite only passing a
+    <code>selected</code>
+    option, the month is not the current one. That is because in the absence of a
+    specific
+    <code>center</code>, the calendar will show the month of the selected date. If
+    both options are provided,
+    <code>center</code>
+    <strong>always</strong>
+    prevails.
+  </p>
+
+  <p>
+    Enough of static calendars. If you just wanted to display a static grid of
+    days you probably wouldn't be using an ember-addon for that. You want to
+    navigate months, you want to select days and ranges. Let's see how to do these
+    things in the next chapter.
+  </p>
+
+  <div class="doc-page-nav">
+    <LinkTo
+      @route="public-pages.docs.installation"
+      class="doc-page-nav-link-prev"
+    >&lt; Installation &amp; setup</LinkTo>
+    <LinkTo
+      @route="public-pages.docs.action-handling"
+      class="doc-page-nav-link-next"
+    >Action handling &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 3ddc276c..00000000
--- a/docs/app/templates/public-pages/docs/how-to-use-it.hbs
+++ /dev/null
@@ -1,134 +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>power-calendar</code>
-  component and yield the calendar to the block. Once inside the block, the
-  yielded calendar has a couple of components inside, but the one you probably
-  care most about is named
-  <code>days</code>.
-</p>
-
-<CodeExample @hbs="how-to-use-it-1.hbs">
-  {{component (ensure-safe-component this.howToUseIt1)}}
-</CodeExample>
-
-<p>
-  Nice, but not very interesting. The
-  <code>calendar.Days</code>
-  component renders a grid of days, and it is smart enough to display the
-  current month but that's it. Let's see how to show a different month.
-</p>
-
-<h3><code>center</code></h3>
-
-<p>
-  To make the calendar render centered on a different month just pass
-  <code>center=someDate</code>
-  and the calendar will display the month of that date.
-</p>
-<p>
-  It is important to note that
-  <code>center</code>
-  is a date in which we center our attention but not necessarily the center of
-  the time window we display. In the month view (the default) it doesn't matter
-  if that date is the 1st day or the 31st, the rendered month will be the same.
-  Let's render October of 2013.
-</p>
-
-<CodeExample @hbs="how-to-use-it-2.hbs" @js="how-to-use-it-2.js">
-  {{component (ensure-safe-component this.howToUseIt2)}}
-</CodeExample>
-
-<p>
-  The month above is November of 2013, but that's hard to know if there is
-  nothing else telling us. The second component that the calendar has and that
-  you will find yourself using often is
-  <code>calendar.Nav</code>. This component displays the name of the month and,
-  optionally, some actions to navigate to the previous/next month.
-</p>
-
-<CodeExample @hbs="how-to-use-it-3.hbs" @js="how-to-use-it-3.js">
-  {{component (ensure-safe-component this.howToUseIt2)}}
-</CodeExample>
-
-<p>
-  Oh, and by the way, ember-power-calendar and all its sub-components can
-  receive native
-  <code>Date</code>, and depending on wether you installed
-  <strong>ember-power-calendar-moment</strong>
-  or
-  <strong>ember-power-calendar-luxon</strong>, also
-  <code>moment</code>
-  objects or Luxon's
-  <code>DateTime</code>
-  instances. All options that are dates can take values of any type, and all
-  actions that this component fires will contain dates in both formats too.
-</p>
-
-<p>
-  Most of the time however, you just want the
-  <code>nav</code>
-  and
-  <code>days</code>
-  components rendered. For this scenario, simply invoke
-  <code>power-calendar</code>
-  without a block, like so:
-</p>
-
-<CodeExample @hbs="how-to-use-it-5.hbs">
-  {{component (ensure-safe-component this.howToUseIt5)}}
-</CodeExample>
-
-<h3><code>selected</code></h3>
-
-<p>
-  Sometimes you want a day of the month to be highlighted. To do it pass
-  <code>selected=someDate</code>
-  to the component.
-</p>
-
-<CodeExample @hbs="how-to-use-it-4.hbs" @js="how-to-use-it-4.js">
-  {{component (ensure-safe-component this.howToUseIt4)}}
-</CodeExample>
-
-<p>
-  You can see that the calendar shows the selected date in blue. You may have
-  also noticed that despite only passing a
-  <code>selected</code>
-  option, the month is not the current one. That is because in the absence of a
-  specific
-  <code>center</code>, the calendar will show the month of the selected date. If
-  both options are provided,
-  <code>center</code>
-  <strong>always</strong>
-  prevails.
-</p>
-
-<p>
-  Enough of static calendars. If you just wanted to display a static grid of
-  days you probably wouldn't be using an ember-addon for that. You want to
-  navigate months, you want to select days and ranges. Let's see how to do these
-  things in the next chapter.
-</p>
-
-<div class="doc-page-nav">
-  <LinkTo
-    @route="public-pages.docs.installation"
-    class="doc-page-nav-link-prev"
-  >&lt; Installation &amp; setup</LinkTo>
-  <LinkTo
-    @route="public-pages.docs.action-handling"
-    class="doc-page-nav-link-next"
-  >Action handling &gt;</LinkTo>
-</div>
\ No newline at end of file
diff --git a/docs/app/templates/public-pages/docs/i18n.gts b/docs/app/templates/public-pages/docs/i18n.gts
new file mode 100644
index 00000000..cd3dfa4f
--- /dev/null
+++ b/docs/app/templates/public-pages/docs/i18n.gts
@@ -0,0 +1,49 @@
+import CodeExample from 'docs/components/code-example';
+import I18n1 from '../../../components/snippets/i18n-1';
+import I18n2 from '../../../components/snippets/i18n-2';
+import { LinkTo } from '@ember/routing';
+
+<template>
+  <h1 class="doc-page-title">I18n</h1>
+
+  <p>
+    Ember Power Calendar uses exposes a power-calendar service that has a locale
+    property and uses that locale to format dates. If you want to change the
+    locale for all your calendars, set the
+    <code>locale</code>
+    property on that service and every calendar will update.
+  </p>
+
+  <p>
+    When the locale is updated not only the language changes but also the first
+    day of the week and any other configuration.
+  </p>
+
+  <CodeExample @glimmerTs="i18n-1.gts">
+    {{I18n1}}
+  </CodeExample>
+
+  <p>
+    Also, you can override the global locale on a per-instance basis passing
+    <code>locale="some-locale"</code>. The next calendar is going to be in russian
+    no matter what the global locale is.
+  </p>
+
+  <CodeExample @glimmerTs="i18n-2.gts">
+    {{I18n2}}
+  </CodeExample>
+
+  <p>
+    In the next sections you are going to see how to customize the sub-components
+    of the calendar.
+  </p>
+
+  <div class="doc-page-nav">
+    <LinkTo
+      @route="public-pages.docs.multiple-selection"
+      class="doc-page-nav-link-prev"
+    >&lt; Multiple selection</LinkTo>
+    <LinkTo @route="public-pages.docs.the-nav" class="doc-page-nav-link-next">The
+      nav &gt;</LinkTo>
+  </div>
+</template>
diff --git a/docs/app/templates/public-pages/docs/i18n.hbs b/docs/app/templates/public-pages/docs/i18n.hbs
deleted file mode 100644
index fa96bd5a..00000000
--- a/docs/app/templates/public-pages/docs/i18n.hbs
+++ /dev/null
@@ -1,42 +0,0 @@
-<h1 class="doc-page-title">I18n</h1>
-
-<p>
-  Ember Power Calendar uses exposes a `power-calendar` service that has a locale
-  property and uses that locale to format dates. If you want to change the
-  locale for all your calendars, set the
-  <code>locale</code>
-  property on that service and every calendar will update.
-</p>
-
-<p>
-  When the locale is updated not only the language changes but also the first
-  day of the week and any other configuration.
-</p>
-
-<CodeExample @hbs="i18n-1.hbs" @js="i18n-1.js">
-  {{component (ensure-safe-component this.i18n1)}}
-</CodeExample>
-
-<p>
-  Also, you can override the global locale on a per-instance basis passing
-  <code>locale="some-locale"</code>. The next calendar is going to be in russian
-  no matter what the global locale is.
-</p>
-
-<CodeExample @hbs="i18n-2.hbs">
-  {{component (ensure-safe-component this.i18n2)}}
-</CodeExample>
-
-<p>
-  In the next sections you are going to see how to customize the sub-components
-  of the calendar.
-</p>
-
-<div class="doc-page-nav">
-  <LinkTo
-    @route="public-pages.docs.multiple-selection"
-    class="doc-page-nav-link-prev"
-  >&lt; Multiple selection</LinkTo>
-  <LinkTo @route="public-pages.docs.the-nav" class="doc-page-nav-link-next">The
-    nav &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..1e694674
--- /dev/null
+++ b/docs/app/templates/public-pages/docs/index.gts
@@ -0,0 +1,83 @@
+import { LinkTo } from "@ember/routing";
+
+<template>
+  <h1 class="doc-page-title">Overview</h1>
+
+  <p>
+    Calendars.
+  </p>
+
+  <p>
+    I don't know about you, but every time I found myself adding a calendar or
+    datepicker to an Ember app, I
+    <strong>never</strong>
+    had a good time.
+  </p>
+
+  <p>
+    There are some addons out there that wrap jQuery libraries which claim to make
+    your life easier. And they do at first. Having a basic calendar rendered with
+    the default styles takes minutes and you feel very productive. However, there
+    is always something else that makes you push your calendar a little bit beyond
+    the basic usage, and this is where things get
+    <em>unpleasant</em>.
+  </p>
+
+  <p>
+    Sometimes it is customizing the appearance, sometimes it is hooking your app
+    into the calendar to do things when you hover or click a day. Maybe
+    highlighting days, or adding tooltips to days with events... Ugh.
+  </p>
+
+  <p>The problem is not in the addons, it's in the libraries they wrap.</p>
+
+  <p>
+    Most jQuery libraries for calendars act as blackboxes where you don't get to
+    choose how they render or how they work. You just have a public javascript API
+    with options that allow you to tweak here and there. That is understandable
+    because they were designed to be used in an imperative environment, so I'm not
+    critisizing those libraries either.
+  </p>
+
+  <p>
+    The problem is that those APIs are imperative and wrapping them in a way that
+    can be used from a declarative language like
+    <em>Handlebars</em>
+    is not simple, and even if you get it right you are naturally limited by the
+    public API that they wrap.
+  </p>
+
+  <p>
+    Generally speaking I think wrapping an imperative library is a convenient
+    solution for simple use cases, but it doesn't scale well beyond a certain
+    complexity level. It also has inherent problems playing nicely with Ember: no
+    fastboot rendering, manual bookkeeping of event handlers and data bindings,
+    inability to use your own templates and difficulty to interact with it in
+    tests, to identify a few.
+  </p>
+
+  <p>
+    <strong>Ember Power Calendar</strong>
+    aims to solve the calendar problem
+    <em>The Ember Way</em>: Providing sensible defaults but allowing users to hook
+    into what is going on and how things look, just the way they do with their own
+    components: Handling actions, passing data, providing their own blocks to
+    replace the parts that don't fit their needs.
+  </p>
+
+  <p>
+    While achieving this flexibility, it also attempts to make the simple case
+    simple by bringing some conventions, defaults and good patterns to the table.
+  </p>
+
+  <p>Just the Ember philosophy, but with days, weeks and stuff like that.</p>
+
+  <p>I hope you find it useful.</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 bd13c12f..00000000
--- a/docs/app/templates/public-pages/docs/index.hbs
+++ /dev/null
@@ -1,79 +0,0 @@
-<h1 class="doc-page-title">Overview</h1>
-
-<p>
-  Calendars.
-</p>
-
-<p>
-  I don't know about you, but every time I found myself adding a calendar or
-  datepicker to an Ember app, I
-  <strong>never</strong>
-  had a good time.
-</p>
-
-<p>
-  There are some addons out there that wrap jQuery libraries which claim to make
-  your life easier. And they do at first. Having a basic calendar rendered with
-  the default styles takes minutes and you feel very productive. However, there
-  is always something else that makes you push your calendar a little bit beyond
-  the basic usage, and this is where things get
-  <em>unpleasant</em>.
-</p>
-
-<p>
-  Sometimes it is customizing the appearance, sometimes it is hooking your app
-  into the calendar to do things when you hover or click a day. Maybe
-  highlighting days, or adding tooltips to days with events... Ugh.
-</p>
-
-<p>The problem is not in the addons, it's in the libraries they wrap.</p>
-
-<p>
-  Most jQuery libraries for calendars act as blackboxes where you don't get to
-  choose how they render or how they work. You just have a public javascript API
-  with options that allow you to tweak here and there. That is understandable
-  because they were designed to be used in an imperative environment, so I'm not
-  critisizing those libraries either.
-</p>
-
-<p>
-  The problem is that those APIs are imperative and wrapping them in a way that
-  can be used from a declarative language like
-  <em>Handlebars</em>
-  is not simple, and even if you get it right you are naturally limited by the
-  public API that they wrap.
-</p>
-
-<p>
-  Generally speaking I think wrapping an imperative library is a convenient
-  solution for simple use cases, but it doesn't scale well beyond a certain
-  complexity level. It also has inherent problems playing nicely with Ember: no
-  fastboot rendering, manual bookkeeping of event handlers and data bindings,
-  inability to use your own templates and difficulty to interact with it in
-  tests, to identify a few.
-</p>
-
-<p>
-  <strong>Ember Power Calendar</strong>
-  aims to solve the calendar problem
-  <em>The Ember Way</em>: Providing sensible defaults but allowing users to hook
-  into what is going on and how things look, just the way they do with their own
-  components: Handling actions, passing data, providing their own blocks to
-  replace the parts that don't fit their needs.
-</p>
-
-<p>
-  While achieving this flexibility, it also attempts to make the simple case
-  simple by bringing some conventions, defaults and good patterns to the table.
-</p>
-
-<p>Just the Ember philosophy, but with days, weeks and stuff like that.</p>
-
-<p>I hope you find it useful.</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..5644a3f1
--- /dev/null
+++ b/docs/app/templates/public-pages/docs/installation.gts
@@ -0,0 +1,199 @@
+import { LinkTo } from "@ember/routing";
+import CodeExample from "docs/components/code-example";
+
+<template>
+  <h1 class="doc-page-title">Installation &amp; setup</h1>
+
+  <p>
+    Ember-power-calendar is distributed as an
+    <a
+      href="http://www.ember-cli.com/"
+      target="_blank"
+      rel="noopener noreferrer"
+    >Ember-cli</a>
+    addon, so the major part of installation will be done by following command on
+    your ember project
+  </p>
+
+  <div class="highlight">
+    <pre class="language-command"><code class="language-command">$ ember install
+        ember-power-calendar</code></pre>
+  </div>
+
+  <p>But this is not enough to put the calendar to work.</p>
+
+  <h3>Choose your preferred date library</h3>
+
+  <p>
+    Date manipulation is
+    <em>hard</em>. Date internationalization is even harder. That's why this
+    component needs help from a third party date library to display and manipulate
+    dates.
+  </p>
+
+  <p>
+    From the ones available out there
+    <a href="http://momentjs.com">Moment.js</a>
+    and
+    <a href="">Luxon</a>
+    are my favorites, and I created two addons you can choose from to make Ember
+    Power Calendar work that use those libraries:
+  </p>
+
+  <ul>
+    <li><a href="https://github.com/cibernox/ember-power-calendar-luxon">Ember
+        Power Calendar Luxon</a></li>
+    <li><a href="https://github.com/cibernox/ember-power-calendar-moment">Ember
+        Power Calendar Moment</a></li>
+    <li><a
+        href="https://github.com/ember-power-addons/ember-power-calendar-date-fns"
+      >Ember Power Calendar date-fns</a></li>
+  </ul>
+
+  <p>
+    <strong>Note:</strong>
+    Although the calendars should behave the same regardless of the option you
+    choose, there might be subtle differences in how dates are displayed, as
+    Moment.js bundles its own translations while Luxon uses the
+    <a
+      href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat"
+    >Intl.DateTimeFormat</a>
+    native API to localize dates into the user's language (that also means Luxon
+    is a lighter library).
+  </p>
+
+  <p>
+    Choose the one you prefer and just install it as any other addon, for instance
+    <code>ember install ember-power-calendar-luxon</code>, and your calendar will
+    work, but will look ugly.
+  </p>
+
+  <p>
+    After you have installed you need to register the date library to
+    <code>ember-power-calendar</code>. For
+    <code>ember-power-calendar-moment</code>
+    you need to add this lines.
+    <CodeExample
+      @js="installation.ts"
+      @showResult={{false}}
+      @activeTab="js"
+    />
+
+    If you are using any other date library please check the ReadMe of the
+    package.
+  </p>
+
+  <h3>Add the styles</h3>
+
+  <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-2.ts.txt"
+    @showResult={{false}}
+    @activeTab="js"
+  />
+
+  <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-3.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>
+    Doing that will bring in all of the styles except those related to the size of
+    the calendar. For defining the size of the calendar there is a mixin that
+    takes the size of the cell you want your calendar to be. By example:
+  </p>
+
+  <CodeExample
+    @scss="installation-2.scss"
+    @showResult={{false}}
+    @activeTab="scss"
+  />
+
+  <br />
+
+  <p>
+    The
+    <code>ember-power-calendar</code>
+    mixin also allows a great amount of customization regarding the coloring of
+    the calendar.
+  </p>
+  <CodeExample
+    @scss="installation-2a.scss"
+    @showResult={{false}}
+    @activeTab="scss"
+  />
+
+  <br />
+
+  <p>
+    For those using Less, the process is very similar. Import the addon styles
+    with:
+  </p>
+  <CodeExample
+    @scss="installation-3.less"
+    @showResult={{false}}
+    @activeTab="scss"
+  />
+  <br />
+
+  <p>
+    The mixin provided can be used like so:
+  </p>
+  <CodeExample
+    @scss="installation-4.less"
+    @showResult={{false}}
+    @activeTab="scss"
+  />
+  <br />
+
+  <p>
+    This code above will make each one of those classes have a different size.
+  </p>
+
+  <h3>Install ember-concurrency (required peerDependency)</h3>
+
+  <p>
+    The addon is using internal ember-concurrency. For installation see
+    <a
+      href="http://ember-concurrency.com/docs/installation"
+      target="_blank"
+      rel="noopener noreferrer"
+    >ember-concurrency</a>
+    installation page.
+  </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 aba68fd1..00000000
--- a/docs/app/templates/public-pages/docs/installation.hbs
+++ /dev/null
@@ -1,164 +0,0 @@
-<h1 class="doc-page-title">Installation &amp; setup</h1>
-
-<p>
-  Ember-power-calendar is distributed as an
-  <a
-    href="http://www.ember-cli.com/"
-    target="_blank"
-    rel="noopener noreferrer"
-  >Ember-cli</a>
-  addon, so the major part of installation will be done by following command on
-  your ember project
-</p>
-
-<div class="highlight">
-  <pre class="language-command"><code class="language-command">$ ember install
-      ember-power-calendar</code></pre>
-</div>
-
-<p>But this is not enough to put the calendar to work.</p>
-
-<h3>Choose your preferred date library</h3>
-
-<p>
-  Date manipulation is
-  <em>hard</em>. Date internationalization is even harder. That's why this
-  component needs help from a third party date library to display and manipulate
-  dates.
-</p>
-
-<p>
-  From the ones available out there
-  <a href="http://momentjs.com">Moment.js</a>
-  and
-  <a href="">Luxon</a>
-  are my favorites, and I created two addons you can choose from to make Ember
-  Power Calendar work that use those libraries:
-</p>
-
-<ul>
-  <li><a href="https://github.com/cibernox/ember-power-calendar-luxon">Ember
-      Power Calendar Luxon</a></li>
-  <li><a href="https://github.com/cibernox/ember-power-calendar-moment">Ember
-      Power Calendar Moment</a></li>
-  <li><a
-      href="https://github.com/ember-power-addons/ember-power-calendar-date-fns"
-    >Ember Power Calendar date-fns</a></li>
-</ul>
-
-<p>
-  <strong>Note:</strong>
-  Although the calendars should behave the same regardless of the option you
-  choose, there might be subtle differences in how dates are displayed, as
-  Moment.js bundles its own translations while Luxon uses the
-  <a
-    href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat"
-  >Intl.DateTimeFormat</a>
-  native API to localize dates into the user's language (that also means Luxon
-  is a lighter library).
-</p>
-
-<p>
-  Choose the one you prefer and just install it as any other addon, for instance
-  <code>ember install ember-power-calendar-luxon</code>, and your calendar will
-  work, but will look ugly.
-</p>
-
-<p>
-  After you have installed you need to register the date library to
-  <code>ember-power-calendar</code>. For
-  <code>ember-power-calendar-moment</code>
-  you need to add this lines.
-  <CodeSnippet @name="installation.js" class="active" />
-
-  If you are using any other date library please check the ReadMe of the
-  package.
-</p>
-
-<h3>Add the styles</h3>
-
-<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-power-calendar/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-power-calendar/vendor/ember-power-calendar.css';"
-/>
-
-<p>
-  However, if you are using SASS or LESS you need to add an import statement to
-  your styles.
-</p>
-
-<CodeSnippet @name="installation-1.scss" class="active" />
-
-<p>
-  Doing that will bring in all of the styles except those related to the size of
-  the calendar. For defining the size of the calendar there is a mixin that
-  takes the size of the cell you want your calendar to be. By example:
-</p>
-
-<CodeSnippet @name="installation-2.scss" class="active" />
-<br />
-
-<p>
-  The
-  <code>ember-power-calendar</code>
-  mixin also allows a great amount of customization regarding the coloring of
-  the calendar.
-</p>
-<CodeSnippet @name="installation-2a.scss" class="active" />
-<br />
-
-<p>
-  For those using Less, the process is very similar. Import the addon styles
-  with:
-</p>
-<CodeSnippet @name="installation-3.less" class="active" />
-<br />
-
-<p>
-  The mixin provided can be used like so:
-</p>
-<CodeSnippet @name="installation-4.less" class="active" />
-<br />
-
-<p>
-  This code above will make each one of those classes have a different size.
-</p>
-
-<h3>Install ember-concurrency (required peerDependency)</h3>
-
-<p>
-  The addon is using internal ember-concurrency. For installation see
-  <a
-    href="http://ember-concurrency.com/docs/installation"
-    target="_blank"
-    rel="noopener noreferrer"
-  >ember-concurrency</a>
-  installation page.
-</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/multiple-selection.gts b/docs/app/templates/public-pages/docs/multiple-selection.gts
new file mode 100644
index 00000000..ff31012c
--- /dev/null
+++ b/docs/app/templates/public-pages/docs/multiple-selection.gts
@@ -0,0 +1,104 @@
+import CodeExample from 'docs/components/code-example';
+import MultipleSelection1 from '../../../components/snippets/multiple-selection-1';
+import MultipleSelection2 from '../../../components/snippets/multiple-selection-2';
+import MultipleSelection3 from '../../../components/snippets/multiple-selection-3';
+import MultipleSelection4 from '../../../components/snippets/multiple-selection-4';
+import { LinkTo } from '@ember/routing';
+
+<template>
+  <h1 class="doc-page-title">Multiple dates</h1>
+
+  <p>
+    The last use case is allowing the user to select several non-consecutive
+    dates. Enter
+    <code>power-calendar-multiple</code>.
+  </p>
+
+  <p>There is no much need of explanation, so lets see it in action. Play with it,
+    click around and use the keyboard.</p>
+
+  <CodeExample @glimmerTs="multiple-selection-1.gts">
+    {{MultipleSelection1}}
+  </CodeExample>
+
+  <p>
+    When you want to select multiple dates, the
+    <code>selected</code>
+    property is, unsurprisingly, an array of dates.
+  </p>
+
+  <p>
+    Every time you select a day, the
+    <code>onSelect</code>
+    action is called not with the date, but with an object. That object has a
+    <code>date</code>
+    property, containing the selected value as a native Javascript date, and if
+    you have decided to use
+    <strong>Moment.js</strong>, a
+    <code>moment</code>
+    property containing the same dates as a moment object, or a
+    <code>datetime</code>
+    property containing the array Luxon.DateTime if you are using Luxon.
+  </p>
+
+  <p>
+    It's worth noticing that clicking on a selected day unselects it and that the
+    days are passed in the order they are clicked.
+  </p>
+
+  <p>
+    Since what the
+    <code>onSelect</code>
+    action does is up to you, you can implement any logic you want, no matter how
+    <del>absurd</del>
+    complex it is.
+  </p>
+
+  <p>
+    By example, let's implement a calendar that allows you to click on any day,
+    and when you do, it selects the nearest day which number is prime, selecting
+    the lowest one in case of a tie.
+  </p>
+
+  <CodeExample @glimmerTs="multiple-selection-2.gts">
+    {{MultipleSelection2}}
+  </CodeExample>
+
+  <p>
+    Why would anyone want to do that?! No clue.
+  </p>
+
+  <p>
+    Another thing to note is that selection order is preserved. The last clicked
+    element is at the last position of the array, so you can use this kind of
+    calendar to perform order sensitive selections:
+  </p>
+
+  <CodeExample @glimmerTs="multiple-selection-3.gts">
+    {{MultipleSelection3}}
+  </CodeExample>
+
+  <p>
+    You can also set a
+    <code>maxLength</code>
+    property on the days component for the maximum number of days that can be
+    selected
+  </p>
+
+  <CodeExample @glimmerTs="multiple-selection-4.gts">
+    {{MultipleSelection4}}
+  </CodeExample>
+
+  <p>
+    Now lest talk about serious business. Customization.
+  </p>
+
+  <div class="doc-page-nav">
+    <LinkTo
+      @route="public-pages.docs.range-selection"
+      class="doc-page-nav-link-prev"
+    >&lt; Range selection</LinkTo>
+    <LinkTo @route="public-pages.docs.i18n" class="doc-page-nav-link-next">I18n
+      &gt;</LinkTo>
+  </div>
+</template>
diff --git a/docs/app/templates/public-pages/docs/multiple-selection.hbs b/docs/app/templates/public-pages/docs/multiple-selection.hbs
deleted file mode 100644
index bf127d12..00000000
--- a/docs/app/templates/public-pages/docs/multiple-selection.hbs
+++ /dev/null
@@ -1,95 +0,0 @@
-<h1 class="doc-page-title">Multiple dates</h1>
-
-<p>
-  The last use case is allowing the user to select several non-consecutive
-  dates. Enter
-  <code>power-calendar-multiple</code>.
-</p>
-
-<p>There is no much need of explanation, so lets see it in action. Play with it,
-  click around and use the keyboard.</p>
-
-<CodeExample @hbs="multiple-selection-1.hbs" @js="multiple-selection-1.js">
-  {{component (ensure-safe-component this.multipleSelection1)}}
-</CodeExample>
-
-<p>
-  When you want to select multiple dates, the
-  <code>selected</code>
-  property is, unsurprisingly, an array of dates.
-</p>
-
-<p>
-  Every time you select a day, the
-  <code>onSelect</code>
-  action is called not with the date, but with an object. That object has a
-  <code>date</code>
-  property, containing the selected value as a native Javascript date, and if
-  you have decided to use
-  <strong>Moment.js</strong>, a
-  <code>moment</code>
-  property containing the same dates as a moment object, or a
-  <code>datetime</code>
-  property containing the array Luxon.DateTime if you are using Luxon.
-</p>
-
-<p>
-  It's worth noticing that clicking on a selected day unselects it and that the
-  days are passed in the order they are clicked.
-</p>
-
-<p>
-  Since what the
-  <code>onSelect</code>
-  action does is up to you, you can implement any logic you want, no matter how
-  <del>absurd</del>
-  complex it is.
-</p>
-
-<p>
-  By example, let's implement a calendar that allows you to click on any day,
-  and when you do, it selects the nearest day which number is prime, selecting
-  the lowest one in case of a tie.
-</p>
-
-<CodeExample @hbs="multiple-selection-2.hbs" @js="multiple-selection-2.js">
-  {{component (ensure-safe-component this.multipleSelection2)}}
-</CodeExample>
-
-<p>
-  Why would anyone want to do that?! No clue.
-</p>
-
-<p>
-  Another thing to note is that selection order is preserved. The last clicked
-  element is at the last position of the array, so you can use this kind of
-  calendar to perform order sensitive selections:
-</p>
-
-<CodeExample @hbs="multiple-selection-3.hbs">
-  {{component (ensure-safe-component this.multipleSelection3)}}
-</CodeExample>
-
-<p>
-  You can also set a
-  <code>maxLength</code>
-  property on the days component for the maximum number of days that can be
-  selected
-</p>
-
-<CodeExample @hbs="multiple-selection-4.hbs">
-  {{component (ensure-safe-component this.multipleSelection4)}}
-</CodeExample>
-
-<p>
-  Now lest talk about serious business. Customization.
-</p>
-
-<div class="doc-page-nav">
-  <LinkTo
-    @route="public-pages.docs.range-selection"
-    class="doc-page-nav-link-prev"
-  >&lt; Range selection</LinkTo>
-  <LinkTo @route="public-pages.docs.i18n" class="doc-page-nav-link-next">I18n
-    &gt;</LinkTo>
-</div>
\ No newline at end of file
diff --git a/docs/app/templates/public-pages/docs/range-selection.gts b/docs/app/templates/public-pages/docs/range-selection.gts
new file mode 100644
index 00000000..591438cb
--- /dev/null
+++ b/docs/app/templates/public-pages/docs/range-selection.gts
@@ -0,0 +1,167 @@
+import CodeExample from 'docs/components/code-example';
+import RangeSelection1 from '../../../components/snippets/range-selection-1';
+import RangeSelection2 from '../../../components/snippets/range-selection-2';
+import RangeSelection3 from '../../../components/snippets/range-selection-3';
+import RangeSelection4 from '../../../components/snippets/range-selection-4';
+import RangeSelection5 from '../../../components/snippets/range-selection-5';
+import RangeSelection6 from '../../../components/snippets/range-selection-6';
+import RangeSelection7 from '../../../components/snippets/range-selection-7';
+import { LinkTo } from '@ember/routing';
+
+<template>
+  <h1 class="doc-page-title">Range selection</h1>
+
+  <p>
+    The most common use case of calendars is selecting a single day. The second
+    most common one is selecting a duration, aka, a range.
+  </p>
+
+  <p>
+    The only differences in the API between a calendar for selecting a single day
+    and a calendar for selecting a range are that the name of the component is now
+    <code>power-calendar-range</code>
+    and that the
+    <code>selected</code>
+    option has to implement the
+    <code>Range</code>
+    interface. It might sound scary, but it only means that it has to be an object
+    with
+    <code>start</code>
+    and
+    <code>end</code>
+    properties.
+  </p>
+
+  <p>
+    The same
+    <code>onSelect</code>
+    action used in the previous chapter to select one date, is now used to select
+    a range. The object that this action receives has a
+    <code>date</code>
+    and either
+    <code>moment</code>
+    or
+    <code>datetime</code>
+    properties, each one containing a range with the dates in native Date objects
+    or in momentJS/Luxon.DateTime objects.
+  </p>
+
+  <p>
+    Lets see this in action.
+  </p>
+
+  <CodeExample @glimmerTs="range-selection-1.gts">
+    {{RangeSelection1}}
+  </CodeExample>
+
+  <p>
+    All the days in the range are selected, and the ends of the range have some
+    special classes so you can style them differently.
+  </p>
+
+  <p>
+    Let's see an example:
+  </p>
+
+  <CodeExample @glimmerTs="range-selection-2.gts">
+    {{RangeSelection2}}
+  </CodeExample>
+
+  <p>Hey, I never said I was a brilliant designer! But you get the idea.</p>
+
+  <h3>The <code>minRange</code> and <code>maxRange</code> option</h3>
+
+  <p>
+    Usually the only restriction in ranges is that they have to start in one day
+    and end in a different day, but sometimes you want to be more restrictive on
+    the length of the range, so the
+    <code>minRange</code>
+    and
+    <code>maxRange</code>
+    cover this they way you expect them to.
+  </p>
+
+  <p>
+    Those options accept a
+    <code>number</code>
+    and a
+    <code>string</code>. If you are using Moment, it can also take a
+    <code>moment.Duration</code>
+    object, and if you are using Luxon a
+    <code>Luxon.Duration</code>
+    one. The default minimum range is one day, so the range has to start in a
+    different date from where it begins and there is no maximum range.
+  </p>
+
+  <p>If you want to force the user to pick a range of at least 3 days you can just
+    pass a number:</p>
+
+  <CodeExample @glimmerTs="range-selection-3.gts">
+    {{RangeSelection3}}
+  </CodeExample>
+
+  <p>
+    Notice that once you select one end of the range the days that cannot be
+    selected are disabled automatically.
+  </p>
+
+  <p>
+    This property accepts humanized durations which makes it very nice to use with
+    different units other than days. Let's make the range be of at most one week.
+  </p>
+
+  <CodeExample @glimmerTs="range-selection-4.gts">
+    {{RangeSelection4}}
+  </CodeExample>
+
+  <p>
+    As you'd expect, you can also use the abbreviations accepted by
+    <code>MomentJs</code>
+    and combine
+    <code>minRange</code>
+    and
+    <code>maxRange</code>
+    as you want.
+  </p>
+
+  <CodeExample @glimmerTs="range-selection-5.gts">
+    {{RangeSelection5}}
+  </CodeExample>
+
+  <p>
+    If you want to allow ranges to begin and end on the same day, pass
+    <code>minRange=0</code>.
+  </p>
+
+  <CodeExample @glimmerTs="range-selection-6.gts">
+    {{RangeSelection6}}
+  </CodeExample>
+
+  <h3>The <code>proximitySelection</code> option</h3>
+  <p>
+    This option changes the behaviour of date selection after a choosing a start
+    and an end date. The default behaviour on the third click will select a new
+    start date of a brand new range. With this flag enabled, once you have a
+    range, clicking a third time will move the closest of the extremes, narrowing
+    or extending the range.
+  </p>
+
+  <CodeExample @glimmerTs="range-selection-7.gts">
+    {{RangeSelection7}}
+  </CodeExample>
+
+  <p>
+    Now let's see how to select several non-consecutive dates.
+  </p>
+
+  <div class="doc-page-nav">
+    <LinkTo
+      @route="public-pages.docs.action-handling"
+      class="doc-page-nav-link-prev"
+    >&lt; Action handling</LinkTo>
+    <LinkTo
+      @route="public-pages.docs.multiple-selection"
+      class="doc-page-nav-link-next"
+    >Multiple selection &gt;</LinkTo>
+  </div>
+</template>
diff --git a/docs/app/templates/public-pages/docs/range-selection.hbs b/docs/app/templates/public-pages/docs/range-selection.hbs
deleted file mode 100644
index e72a5227..00000000
--- a/docs/app/templates/public-pages/docs/range-selection.hbs
+++ /dev/null
@@ -1,155 +0,0 @@
-<h1 class="doc-page-title">Range selection</h1>
-
-<p>
-  The most common use case of calendars is selecting a single day. The second
-  most common one is selecting a duration, aka, a range.
-</p>
-
-<p>
-  The only differences in the API between a calendar for selecting a single day
-  and a calendar for selecting a range are that the name of the component is now
-  <code>power-calendar-range</code>
-  and that the
-  <code>selected</code>
-  option has to implement the
-  <code>Range</code>
-  interface. It might sound scary, but it only means that it has to be an object
-  with
-  <code>start</code>
-  and
-  <code>end</code>
-  properties.
-</p>
-
-<p>
-  The same
-  <code>onSelect</code>
-  action used in the previous chapter to select one date, is now used to select
-  a range. The object that this action receives has a
-  <code>date</code>
-  and either
-  <code>moment</code>
-  or
-  <code>datetime</code>
-  properties, each one containing a range with the dates in native Date objects
-  or in momentJS/Luxon.DateTime objects.
-</p>
-
-<p>
-  Lets see this in action.
-</p>
-
-<CodeExample @hbs="range-selection-1.hbs" @js="range-selection-1.js">
-  {{component (ensure-safe-component this.rangeSelection1)}}
-</CodeExample>
-
-<p>
-  All the days in the range are selected, and the ends of the range have some
-  special classes so you can style them differently.
-</p>
-
-<p>
-  Let's see an example:
-</p>
-
-<CodeExample @hbs="range-selection-2.hbs" @js="range-selection-2.js">
-  {{component (ensure-safe-component this.rangeSelection2)}}
-</CodeExample>
-
-<p>Hey, I never said I was a brilliant designer! But you get the idea.</p>
-
-<h3>The <code>minRange</code> and <code>maxRange</code> option</h3>
-
-<p>
-  Usually the only restriction in ranges is that they have to start in one day
-  and end in a different day, but sometimes you want to be more restrictive on
-  the length of the range, so the
-  <code>minRange</code>
-  and
-  <code>maxRange</code>
-  cover this they way you expect them to.
-</p>
-
-<p>
-  Those options accept a
-  <code>number</code>
-  and a
-  <code>string</code>. If you are using Moment, it can also take a
-  <code>moment.Duration</code>
-  object, and if you are using Luxon a
-  <code>Luxon.Duration</code>
-  one. The default minimum range is one day, so the range has to start in a
-  different date from where it begins and there is no maximum range.
-</p>
-
-<p>If you want to force the user to pick a range of at least 3 days you can just
-  pass a number:</p>
-
-<CodeExample @hbs="range-selection-3.hbs">
-  {{component (ensure-safe-component this.rangeSelection3)}}
-</CodeExample>
-
-<p>
-  Notice that once you select one end of the range the days that cannot be
-  selected are disabled automatically.
-</p>
-
-<p>
-  This property accepts humanized durations which makes it very nice to use with
-  different units other than days. Let's make the range be of at most one week.
-</p>
-
-<CodeExample @hbs="range-selection-4.hbs">
-  {{component (ensure-safe-component this.rangeSelection4)}}
-</CodeExample>
-
-<p>
-  As you'd expect, you can also use the abbreviations accepted by
-  <code>MomentJs</code>
-  and combine
-  <code>minRange</code>
-  and
-  <code>maxRange</code>
-  as you want.
-</p>
-
-<CodeExample @hbs="range-selection-5.hbs">
-  {{component (ensure-safe-component this.rangeSelection5)}}
-</CodeExample>
-
-<p>
-  If you want to allow ranges to begin and end on the same day, pass
-  <code>minRange=0</code>.
-</p>
-
-<CodeExample @hbs="range-selection-6.hbs">
-  {{component (ensure-safe-component this.rangeSelection6)}}
-</CodeExample>
-
-<h3>The <code>proximitySelection</code> option</h3>
-<p>
-  This option changes the behaviour of date selection after a choosing a start
-  and an end date. The default behaviour on the third click will select a new
-  start date of a brand new range. With this flag enabled, once you have a
-  range, clicking a third time will move the closest of the extremes, narrowing
-  or extending the range.
-</p>
-
-<CodeExample @hbs="range-selection-7.hbs">
-  {{component (ensure-safe-component this.rangeSelection7)}}
-</CodeExample>
-
-<p>
-  Now let's see how to select several non-consecutive dates.
-</p>
-
-<div class="doc-page-nav">
-  <LinkTo
-    @route="public-pages.docs.action-handling"
-    class="doc-page-nav-link-prev"
-  >&lt; Action handling</LinkTo>
-  <LinkTo
-    @route="public-pages.docs.multiple-selection"
-    class="doc-page-nav-link-next"
-  >Multiple selection &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..20769887
--- /dev/null
+++ b/docs/app/templates/public-pages/docs/test-helpers.gts
@@ -0,0 +1,73 @@
+import { LinkTo } from "@ember/routing";
+import CodeExample from "docs/components/code-example";
+
+<template>
+  <h1 class="doc-page-title">Test helpers</h1>
+
+  <br />
+  <h2>Acceptance Tests</h2>
+
+  <p>
+    Ember Power Calendar provides two acceptance helpers (<code
+    >calendarCenter</code>
+    and
+    <code>calendarSelect</code>) that make it nicer to interact with the component
+    during tests.
+  </p>
+
+  <h3><code>calendarCenter(cssSelector, date)</code></h3>
+
+  <p>
+    This async helper allows you to move the center (change the month) of the
+    calendar in the given selector without interacting with the nav.
+  </p>
+
+  <CodeExample
+    @js="test-helpers-2-js.js"
+    @showResult={{false}}
+    @activeTab="js"
+  />
+
+  <p>If the calendar does not have an
+    <code>onCenterChange</code>
+    action it will throw a helpful error message.</p>
+
+  <h3><code>calendarSelect(cssSelector, date)</code></h3>
+
+  <p>
+    Use this helper to select a day of the calendar like if you clicked on it. If
+    to do so the calendar has to display a different month, it will do that
+    automatically.
+  </p>
+
+  <CodeExample
+    @js="test-helpers-3-js.js"
+    @showResult={{false}}
+    @activeTab="js"
+  />
+
+  <p>
+    If you are dealing with a multiple or range calendar you can just call it more
+    than once.
+  </p>
+
+  <h2>Integration Tests</h2>
+
+  <p>
+    Just import the helpers like
+    <code>import { calendarCenter, calendarSelect } from
+      'ember-power-calendar/test-support/helpers';</code>
+    and use them as any other helper 😀
+  </p>
+
+  <div class="doc-page-nav">
+    <LinkTo
+      @route="public-pages.docs.the-days"
+      class="doc-page-nav-link-prev"
+    >&lt; The days</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 9ed76ea7..00000000
--- a/docs/app/templates/public-pages/docs/test-helpers.hbs
+++ /dev/null
@@ -1,95 +0,0 @@
-<h1 class="doc-page-title">Test helpers</h1>
-
-<br />
-<h2>Acceptance Tests</h2>
-
-<p>
-  Ember Power Calendar provides two acceptance helpers (<code
-  >calendarCenter</code>
-  and
-  <code>calendarSelect</code>) that make it nicer to interact with the component
-  during tests.
-</p>
-
-<p>
-  To use those helpers in acceptance tests you need to register them in the
-  <code>/tests/helpers/start-app.js</code>
-  file.
-</p>
-
-<p>
-  For that import the registration function and invoke it immedialty.
-</p>
-
-<CodeSnippet @name="test-helpers-1-js.js" />
-
-<p>
-  <strong>Important note:</strong>
-  Since version 0.6.0, all the test helpers can also be imported like
-  <code>import { calendarCenter, calendarSelect } from
-    'ember-power-calendar/test-support/helpers';</code>
-  and used indistinctly in acceptance or integration tests, with or without
-  async/await. If you use this approach you don't need to register them as
-  global helpers anymore.
-</p>
-
-<h3><code>calendarCenter(cssSelector, dateOrMoment)</code></h3>
-
-<p>
-  This async helper allows you to move the center (change the month) of the
-  calendar in the given selector without interacting with the nav.
-</p>
-
-<CodeSnippet @name="test-helpers-2-js.js" />
-
-<p>If the calendar does not have an
-  <code>onCenterChange</code>
-  action it will throw a helpful error message.</p>
-
-<h3><code>calendarSelect(cssSelector, dateOrMoment)</code></h3>
-
-<p>
-  Use this helper to select a day of the calendar like if you clicked on it. If
-  to do so the calendar has to display a different month, it will do that
-  automatically.
-</p>
-
-<CodeSnippet @name="test-helpers-3-js.js" />
-
-<p>
-  If you are dealing with a multiple or range calendar you can just call it more
-  than once.
-</p>
-
-<p>
-  <strong>Note:</strong>
-  Remember to whitelist
-  <code>calendarCenter</code>
-  and
-  <code>calendarSelect</code>
-  in the list of allowed globals in your
-  <code>tests/.jshintrc</code>
-  or
-  <code>tests/.eslintrc.js</code>
-  manifest.
-</p>
-
-<h2>Integration Tests</h2>
-
-<p>
-  Just import the helpers like
-  <code>import { calendarCenter, calendarSelect } from
-    'ember-power-calendar/test-support/helpers';</code>
-  and use them as any other helper 😀
-</p>
-
-<div class="doc-page-nav">
-  <LinkTo
-    @route="public-pages.docs.the-days"
-    class="doc-page-nav-link-prev"
-  >&lt; The days</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/the-days.gts b/docs/app/templates/public-pages/docs/the-days.gts
new file mode 100644
index 00000000..996258aa
--- /dev/null
+++ b/docs/app/templates/public-pages/docs/the-days.gts
@@ -0,0 +1,211 @@
+import CodeExample from 'docs/components/code-example';
+import TheDays0 from '../../../components/snippets/the-days-0';
+import TheDays1 from '../../../components/snippets/the-days-1';
+import TheDays2 from '../../../components/snippets/the-days-2';
+import TheDays3 from '../../../components/snippets/the-days-3';
+import TheDays4 from '../../../components/snippets/the-days-4';
+import TheDays5 from '../../../components/snippets/the-days-5';
+import TheDays6 from '../../../components/snippets/the-days-6';
+import TheDays7 from '../../../components/snippets/the-days-7';
+import TheDays8 from '../../../components/snippets/the-days-8';
+import { LinkTo } from '@ember/routing';
+
+<template>
+  <h1 class="doc-page-title">The days</h1>
+
+  <p>
+    A calendar is basically a list of days, typically (although not necessarily)
+    displayed in a grid with 7 columns. So the first thing you might want to
+    customize is the content of each day.
+  </p>
+
+  <h3>Pass a custom class for each day</h3>
+
+  <p>
+    You can pass to this component a
+    <code>dayClass</code>
+    argument. If this argument is a string, that string will be added as a class
+    to every rendered day.
+  </p>
+
+  <p>
+    This on itself is not amazing, but if instead of a string
+    <code>dayClass</code>
+    is a function, it will be invoked for every day, receiving the day object and
+    the calendar. You can then implement any custom logic to add classes to
+    buttons.
+  </p>
+
+  <p>
+    Using this technique we can create complex things, like a calendar with
+    multiple selection in which the selected days have a
+    <em>"magnetic"</em>
+    border.
+  </p>
+
+  <CodeExample @glimmerTs="the-days-0.gts">
+    {{TheDays0}}
+  </CodeExample>
+
+  <h3>Passing a block</h3>
+
+  <p>
+    There are many ways of doing it, but the simplest one is passing a block that
+    will be the content of each cell of the grid. It's not the most versatile, but
+    it can be used for simple customizations.
+  </p>
+
+  <p>
+    The block receives two arguments. The first one is a useful day object and the
+    second is the public API of the component. You can check the API of both
+    objects
+    <a href="/docs/api-reference">API reference</a>
+    section.
+  </p>
+
+  <p>
+    Let's start by making the number of the days of the weeked be strong and pink,
+    because we like weekends.
+  </p>
+
+  <CodeExample @glimmerTs="the-days-1.gts">
+    {{TheDays1}}
+  </CodeExample>
+
+  <p>
+    The properties of they so called "day" object to make most common
+    customizations easy.
+  </p>
+
+  <h3>Just using the public API</h3>
+
+  <p>
+    Like with
+    <LinkTo @route="public-pages.docs.the-nav">The nav</LinkTo>
+    component, all the behaviour is implemented using the public API of the
+    calendar, so you can build your calendar and replace it.
+  </p>
+
+  <p>
+    This is a non-trivial example where I build a weird month grid that has no
+    Mondays or Wednesdays. Yay short weeks!
+  </p>
+
+  <CodeExample @glimmerTs="the-days-2.gts">
+    {{TheDays2}}
+  </CodeExample>
+
+  <h3>Passing a custom component</h3>
+
+  <p>
+    Just like with the nav component, you can encapsulate this weird grid with 5
+    days week into a component to reuse it all over the place. Maybe if you use it
+    often enough the boss end up thinking weeks have 3 working days.
+  </p>
+
+  <CodeExample @glimmerTs="the-days-3.gts">
+    {{TheDays3}}
+  </CodeExample>
+
+  <p>
+    This options is the one that gives you more power, but it would be silly to
+    make users create their own components for very common changes like
+    customizing the start of the week and things like that, so the default
+    <code>calendar.Days</code>
+    component has a few configuration options to tweak for the most common use
+    cases.
+  </p>
+
+  <h3><code>startOfWeek</code></h3>
+
+  <p>
+    By default, weeks will start on the appropriate day of the week based on the
+    locale configured in the
+    <code>service:power-calendar</code>
+    (which defaults to the global locale configured in MomentJS if you are using
+    it). There is a built in option to tweak the locale's default, pass
+    <code>startOfWeek=[NUMBER]</code>
+    to change the first day of the week. Values go from
+    <code>0</code>
+    (Sunday) to
+    <code>6</code>
+    (Saturday).
+  </p>
+
+  <CodeExample @glimmerTs="the-days-4.gts">
+    {{TheDays4}}
+  </CodeExample>
+
+  <h3><code>showDaysAround</code></h3>
+
+  <p>
+    By default the calendar displays the days of the surrounding months in the
+    first and last week but if you want to hide them pass
+    <code>showDaysAround=false</code>.
+  </p>
+
+  <CodeExample @glimmerTs="the-days-5.gts">
+    {{TheDays5}}
+  </CodeExample>
+
+  <h3><code>minDate</code> and <code>maxDate</code></h3>
+
+  <p>
+    If you want to prevent some days before a particular date from being selected,
+    pass
+    <code>minDate=someDate</code>
+    and/or
+    <code>maxDate=someOtherDate</code>. Dates before/after those values can be
+    selected (those dates included), but the rest of the days cannot be selected
+    or focused.
+  </p>
+
+  <p>By example, in the next example, only days between 11th and 21th can be
+    selected (both inclusive)</p>
+
+  <CodeExample @glimmerTs="the-days-6.gts">
+    {{TheDays6}}
+  </CodeExample>
+
+  <h3><code>disabledDates</code></h3>
+
+  <p>
+    Sometimes you don't want to disabled dates before or after some marks but some
+    specific list of dates, like holidays or birthdays. The
+    <code>disabledDates</code>
+    is what you want. Pass a collection of Date or Moment objects and those days
+    will be disabled.
+  </p>
+
+  <CodeExample @glimmerTs="the-days-7.gts">
+    {{TheDays7}}
+  </CodeExample>
+
+  <h3><code>weekdayFormat</code></h3>
+
+  <p>
+    By default the name of the days of the week is in its abbreviated form, but
+    you can use the
+    <code>weekdayFormat</code>
+    to change it. The accepted values are
+    <code>short</code>
+    (the default),
+    <code>long</code>
+    (the full day name) and
+    <code>min</code>
+    (an even shorter abbreviation).
+  </p>
+
+  <CodeExample @glimmerTs="the-days-8.gts">
+    {{TheDays8}}
+  </CodeExample>
+
+  <div class="doc-page-nav">
+    <LinkTo @route="public-pages.docs.the-nav" class="doc-page-nav-link-prev">&lt;
+      The nav</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/the-days.hbs b/docs/app/templates/public-pages/docs/the-days.hbs
deleted file mode 100644
index b7dc7831..00000000
--- a/docs/app/templates/public-pages/docs/the-days.hbs
+++ /dev/null
@@ -1,197 +0,0 @@
-<h1 class="doc-page-title">The days</h1>
-
-<p>
-  A calendar is basically a list of days, typically (although not necessarily)
-  displayed in a grid with 7 columns. So the first thing you might want to
-  customize is the content of each day.
-</p>
-
-<h3>Pass a custom class for each day</h3>
-
-<p>
-  You can pass to this component a
-  <code>dayClass</code>
-  argument. If this argument is a string, that string will be added as a class
-  to every rendered day.
-</p>
-
-<p>
-  This on itself is not amazing, but if instead of a string
-  <code>dayClass</code>
-  is a function, it will be invoked for every day, receiving the day object and
-  the calendar. You can then implement any custom logic to add classes to
-  buttons.
-</p>
-
-<p>
-  Using this technique we can create complex things, like a calendar with
-  multiple selection in which the selected days have a
-  <em>"magnetic"</em>
-  border.
-</p>
-
-<CodeExample @hbs="the-days-0.hbs" @js="the-days-0.js">
-  {{component (ensure-safe-component this.theDays0)}}
-</CodeExample>
-
-<h3>Passing a block</h3>
-
-<p>
-  There are many ways of doing it, but the simplest one is passing a block that
-  will be the content of each cell of the grid. It's not the most versatile, but
-  it can be used for simple customizations.
-</p>
-
-<p>
-  The block receives two arguments. The first one is a useful day object and the
-  second is the public API of the component. You can check the API of both
-  objects
-  <a href="/docs/api-reference">API reference</a>
-  section.
-</p>
-
-<p>
-  Let's start by making the number of the days of the weeked be strong and pink,
-  because we like weekends.
-</p>
-
-<CodeExample @hbs="the-days-1.hbs">
-  {{component (ensure-safe-component this.theDays1)}}
-</CodeExample>
-
-<p>
-  The properties of they so called "day" object to make most common
-  customizations easy.
-</p>
-
-<h3>Just using the public API</h3>
-
-<p>
-  Like with
-  <LinkTo @route="public-pages.docs.the-nav">The nav</LinkTo>
-  component, all the behaviour is implemented using the public API of the
-  calendar, so you can build your calendar and replace it.
-</p>
-
-<p>
-  This is a non-trivial example where I build a weird month grid that has no
-  Mondays or Wednesdays. Yay short weeks!
-</p>
-
-<CodeExample @hbs="the-days-2.hbs" @js="the-days-2.js">
-  {{component (ensure-safe-component this.theDays2)}}
-</CodeExample>
-
-<h3>Passing a custom component</h3>
-
-<p>
-  Just like with the nav component, you can encapsulate this weird grid with 5
-  days week into a component to reuse it all over the place. Maybe if you use it
-  often enough the boss end up thinking weeks have 3 working days.
-</p>
-
-<CodeExample @hbs="the-days-3.hbs">
-  {{component (ensure-safe-component this.theDays3)}}
-</CodeExample>
-
-<p>
-  This options is the one that gives you more power, but it would be silly to
-  make users create their own components for very common changes like
-  customizing the start of the week and things like that, so the default
-  <code>calendar.Days</code>
-  component has a few configuration options to tweak for the most common use
-  cases.
-</p>
-
-<h3><code>startOfWeek</code></h3>
-
-<p>
-  By default, weeks will start on the appropriate day of the week based on the
-  locale configured in the
-  <code>service:power-calendar</code>
-  (which defaults to the global locale configured in MomentJS if you are using
-  it). There is a built in option to tweak the locale's default, pass
-  <code>startOfWeek=[NUMBER]</code>
-  to change the first day of the week. Values go from
-  <code>0</code>
-  (Sunday) to
-  <code>6</code>
-  (Saturday).
-</p>
-
-<CodeExample @hbs="the-days-4.hbs">
-  {{component (ensure-safe-component this.theDays4)}}
-</CodeExample>
-
-<h3><code>showDaysAround</code></h3>
-
-<p>
-  By default the calendar displays the days of the surrounding months in the
-  first and last week but if you want to hide them pass
-  <code>showDaysAround=false</code>.
-</p>
-
-<CodeExample @hbs="the-days-5.hbs">
-  {{component (ensure-safe-component this.theDays5)}}
-</CodeExample>
-
-<h3><code>minDate</code> and <code>maxDate</code></h3>
-
-<p>
-  If you want to prevent some days before a particular date from being selected,
-  pass
-  <code>minDate=someDate</code>
-  and/or
-  <code>maxDate=someOtherDate</code>. Dates before/after those values can be
-  selected (those dates included), but the rest of the days cannot be selected
-  or focused.
-</p>
-
-<p>By example, in the next example, only days between 11th and 21th can be
-  selected (both inclusive)</p>
-
-<CodeExample @hbs="the-days-6.hbs" @js="the-days-6.js">
-  {{component (ensure-safe-component this.theDays6)}}
-</CodeExample>
-
-<h3><code>disabledDates</code></h3>
-
-<p>
-  Sometimes you don't want to disabled dates before or after some marks but some
-  specific list of dates, like holidays or birthdays. The
-  <code>disabledDates</code>
-  is what you want. Pass a collection of Date or Moment objects and those days
-  will be disabled.
-</p>
-
-<CodeExample @hbs="the-days-7.hbs" @js="the-days-7.js">
-  {{component (ensure-safe-component this.theDays7)}}
-</CodeExample>
-
-<h3><code>weekdayFormat</code></h3>
-
-<p>
-  By default the name of the days of the week is in its abbreviated form, but
-  you can use the
-  <code>weekdayFormat</code>
-  to change it. The accepted values are
-  <code>short</code>
-  (the default),
-  <code>long</code>
-  (the full day name) and
-  <code>min</code>
-  (an even shorter abbreviation).
-</p>
-
-<CodeExample @hbs="the-days-8.hbs">
-  {{component (ensure-safe-component this.theDays8)}}
-</CodeExample>
-
-<div class="doc-page-nav">
-  <LinkTo @route="public-pages.docs.the-nav" class="doc-page-nav-link-prev">&lt;
-    The nav</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/the-nav.gts b/docs/app/templates/public-pages/docs/the-nav.gts
new file mode 100644
index 00000000..2a4f09d0
--- /dev/null
+++ b/docs/app/templates/public-pages/docs/the-nav.gts
@@ -0,0 +1,97 @@
+import CodeExample from 'docs/components/code-example';
+import TheNav1 from '../../../components/snippets/the-nav-1';
+import TheNav2 from '../../../components/snippets/the-nav-2';
+import TheNav3 from '../../../components/snippets/the-nav-3';
+import { LinkTo } from '@ember/routing';
+
+<template>
+  <h1 class="doc-page-title">The nav</h1>
+
+  <p>
+    Ember Power Calendar is written using contextual components and follows the
+    <a
+      href="https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0"
+    >Presentational and Container Components</a>
+    pattern.
+  </p>
+
+  <p>
+    The contextual components are
+    <em>mostly</em>
+    presentationals and you can customize how they look without much knowledge of
+    how the calendar works. The
+    <code>calendar.Nav</code>
+    component is the simplest one.
+  </p>
+
+  <p>
+    By default it displays the displayed month in
+    <code>MMMM YYYY</code>
+    format and a couple buttons to move to other months. Let's change that.
+  </p>
+
+  <h3>Passing a block</h3>
+
+  <p>
+    If you pass a block to this component, that block will replace the month/year
+    text. It can be used by example if you want to display the month in a
+    different format, maybe a more compact one for very small calendars.
+  </p>
+
+  <CodeExample @glimmerTs="the-nav-1.gts">
+    {{TheNav1}}
+  </CodeExample>
+
+  <h3>Just using the public API</h3>
+
+  <p>
+    If the thing you want is beyond what you can do with the block, Ember Power
+    Calendar doesn't try to provide a miriad of option to configure the component.
+    Instead it gives you the tools to build it yourself using the yielded
+    <code>calendar</code>. It's easy!
+  </p>
+
+  <p>
+    For example, let's build a different nav that, by reusing the existing CSS
+    classes, allows you to change months
+    <em>and years</em>.
+  </p>
+
+  <CodeExample @glimmerTs="the-nav-2.gts">
+    {{TheNav2}}
+  </CodeExample>
+
+  <h3>Passing your own component</h3>
+
+  <p>
+    The example above is simple and works if you only have one calendar, but if
+    you have several calendars it becomes repetitive. The last way of customizing
+    your calendar is replacing the
+    <code>nav</code>
+    component with your own component.
+  </p>
+
+  <p>Let's encapsulate the same logic above into a component and use that instead</p>
+
+  <CodeExample @glimmerTs="the-nav-3.gts">
+    {{TheNav3}}
+  </CodeExample>
+
+  <p>
+    Now you have the same logic but to use it the only thing you have to do is
+    tell the calenda to use your component with
+    <code>navComponent="name-of-my-component"</code>. Much easier to reuse across
+    your app.
+  </p>
+
+  <p>
+    Enough about the nav. Now it's the days turn.
+  </p>
+
+  <div class="doc-page-nav">
+    <LinkTo @route="public-pages.docs.i18n" class="doc-page-nav-link-prev">&lt;
+      I18n</LinkTo>
+    <LinkTo @route="public-pages.docs.the-days" class="doc-page-nav-link-next">The
+      days &gt;</LinkTo>
+  </div>
+</template>
diff --git a/docs/app/templates/public-pages/docs/the-nav.hbs b/docs/app/templates/public-pages/docs/the-nav.hbs
deleted file mode 100644
index 59254f59..00000000
--- a/docs/app/templates/public-pages/docs/the-nav.hbs
+++ /dev/null
@@ -1,89 +0,0 @@
-<h1 class="doc-page-title">The nav</h1>
-
-<p>
-  Ember Power Calendar is written using contextual components and follows the
-  <a
-    href="https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0"
-  >Presentational and Container Components</a>
-  pattern.
-</p>
-
-<p>
-  The contextual components are
-  <em>mostly</em>
-  presentationals and you can customize how they look without much knowledge of
-  how the calendar works. The
-  <code>calendar.Nav</code>
-  component is the simplest one.
-</p>
-
-<p>
-  By default it displays the displayed month in
-  <code>MMMM YYYY</code>
-  format and a couple buttons to move to other months. Let's change that.
-</p>
-
-<h3>Passing a block</h3>
-
-<p>
-  If you pass a block to this component, that block will replace the month/year
-  text. It can be used by example if you want to display the month in a
-  different format, maybe a more compact one for very small calendars.
-</p>
-
-<CodeExample @hbs="the-nav-1.hbs">
-  {{component (ensure-safe-component this.theNav1)}}
-</CodeExample>
-
-<h3>Just using the public API</h3>
-
-<p>
-  If the thing you want is beyond what you can do with the block, Ember Power
-  Calendar doesn't try to provide a miriad of option to configure the component.
-  Instead it gives you the tools to build it yourself using the yielded
-  <code>calendar</code>. It's easy!
-</p>
-
-<p>
-  For example, let's build a different nav that, by reusing the existing CSS
-  classes, allows you to change months
-  <em>and years</em>.
-</p>
-
-<CodeExample @hbs="the-nav-2.hbs">
-  {{component (ensure-safe-component this.theNav2)}}
-</CodeExample>
-
-<h3>Passing your own component</h3>
-
-<p>
-  The example above is simple and works if you only have one calendar, but if
-  you have several calendars it becomes repetitive. The last way of customizing
-  your calendar is replacing the
-  <code>nav</code>
-  component with your own component.
-</p>
-
-<p>Let's encapsulate the same logic above into a component and use that instead</p>
-
-<CodeExample @hbs="the-nav-3.hbs">
-  {{component (ensure-safe-component this.theNav3)}}
-</CodeExample>
-
-<p>
-  Now you have the same logic but to use it the only thing you have to do is
-  tell the calenda to use your component with
-  <code>navComponent="name-of-my-component"</code>. Much easier to reuse across
-  your app.
-</p>
-
-<p>
-  Enough about the nav. Now it's the days turn.
-</p>
-
-<div class="doc-page-nav">
-  <LinkTo @route="public-pages.docs.i18n" class="doc-page-nav-link-prev">&lt;
-    I18n</LinkTo>
-  <LinkTo @route="public-pages.docs.the-days" class="doc-page-nav-link-next">The
-    days &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..746ca491
--- /dev/null
+++ b/docs/app/templates/public-pages/index.gts
@@ -0,0 +1,66 @@
+import { LinkTo } from "@ember/routing";
+import { formatDate } from "ember-power-calendar/utils";
+
+const today = new Date();
+
+<template>
+  <section class="main-page-headline">
+    <h1 class="main-page-headline-content">
+      Powerful and customizable calendar component for
+      <img src="/ember_logo.png" alt="ember" />
+    </h1>
+  </section>
+  <section class="selling-points">
+    <article class="selling-point">
+      <img
+        src="/calendar-range-icon.svg"
+        alt="calendar range icon"
+        class="selling-point-icon"
+      />
+      <div class="selling-point-text">
+        <h2>Feature rich</h2>
+        Out of the box support for mouse and keyboard, highlighting, events,
+        selection, esparse-dates and ranges, it gives you the tools to build the
+        awesome calendar your app needs.
+      </div>
+    </article>
+
+    <article class="selling-point">
+      <div class="selling-point-calendar-page">
+        <sub class="selling-point-calendar-page-number">{{formatDate
+            today
+            "D"
+          }}</sub>
+        <img
+          src="/ember-word-logo.svg"
+          alt="Ember"
+          class="selling-point-calendar-page-ember-logo"
+        />
+      </div>
+      <div class="selling-point-text">
+        <h2>With Ember for Ember</h2>
+        Built in Ember for Ember apps, it works like you expect it to so it blends
+        naturally into your usual worlflow like it you built it yourself.
+      </div>
+    </article>
+
+    <article class="selling-point">
+      <img
+        src="/calendar-customized-icon.svg"
+        alt="calendar customized icon"
+        class="selling-point-icon"
+      />
+      <div class="selling-point-text">
+        <h2>Personalize it your way</h2>
+        Designed inside out to allow you to adjust it the way you want. Custom
+        days, a different grid, popups... Multiple extension point allow you to
+        tame it to your taste.
+      </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 97b32060..00000000
--- a/docs/app/templates/public-pages/index.hbs
+++ /dev/null
@@ -1,59 +0,0 @@
-<section class="main-page-headline">
-  <h1 class="main-page-headline-content">
-    Powerful and customizable calendar component for
-    <img src="/ember_logo.png" alt="ember" />
-  </h1>
-</section>
-<section class="selling-points">
-  <article class="selling-point">
-    <img
-      src="/calendar-range-icon.svg"
-      alt="calendar range icon"
-      class="selling-point-icon"
-    />
-    <div class="selling-point-text">
-      <h2>Feature rich</h2>
-      Out of the box support for mouse and keyboard, highlighting, events,
-      selection, esparse-dates and ranges, it gives you the tools to build the
-      awesome calendar your app needs.
-    </div>
-  </article>
-
-  <article class="selling-point">
-    <div class="selling-point-calendar-page">
-      <sub class="selling-point-calendar-page-number">{{format-date
-          this.today
-          "D"
-        }}</sub>
-      <img
-        src="/ember-word-logo.svg"
-        alt="Ember"
-        class="selling-point-calendar-page-ember-logo"
-      />
-    </div>
-    <div class="selling-point-text">
-      <h2>With Ember for Ember</h2>
-      Built in Ember for Ember apps, it works like you expect it to so it blends
-      naturally into your usual worlflow like it you built it yourself.
-    </div>
-  </article>
-
-  <article class="selling-point">
-    <img
-      src="/calendar-customized-icon.svg"
-      alt="calendar customized icon"
-      class="selling-point-icon"
-    />
-    <div class="selling-point-text">
-      <h2>Personalize it your way</h2>
-      Designed inside out to allow you to adjust it the way you want. Custom
-      days, a different grid, popups... Multiple extension point allow you to
-      tame it to your taste.
-    </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 4c799c81..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-friendly and render properly 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 Calendar</strong>
-          and
-          <a href="http://www.ember-power-select.com">Ember Power Select</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 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"
-    >
-      <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-----"
-      />
-      {{! template-lint-disable require-input-label }}
-      {{! template-lint-disable no-inline-styles }}
-      <input
-        type="image"
-        src="https://www.paypalobjects.com/en_GB/i/btn/btn_donate_LG.gif"
-        name="submit"
-        alt="PayPal – The safer, easier way to pay online!"
-        style="display: block; margin: 0 auto;"
-      />
-      <img
-        alt="Paypal"
-        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/package.json b/docs/package.json
index 28d68124..f84f8a24 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -50,7 +50,6 @@
     "@glint/template": "^1.7.4",
     "@tsconfig/ember": "^3.0.12",
     "@types/eslint__js": "^8.42.3",
-    "@types/prismjs": "^1.26.6",
     "@types/qunit": "^2.19.13",
     "broccoli-asset-rev": "^3.0.0",
     "concurrently": "^9.2.1",
@@ -67,7 +66,6 @@
     "ember-cli-sass": "^11.0.1",
     "ember-cli-sri": "^2.1.1",
     "ember-cli-terser": "^4.0.2",
-    "ember-code-snippet": "git+https://git@github.com/ef4/ember-code-snippet.git#d054b697098ad52481c94a952ccf8d89ba1f25fe",
     "ember-concurrency": "^5.1.0",
     "ember-fetch": "^8.1.2",
     "ember-load-initializers": "^3.0.1",
@@ -82,6 +80,7 @@
     "ember-source-channel-url": "^3.0.0",
     "ember-template-imports": "^4.4.0",
     "ember-template-lint": "^7.9.3",
+    "ember-truth-helpers": "^5.0.0",
     "ember-try": "^4.0.0",
     "eslint": "^9.25.1",
     "eslint-config-prettier": "^10.1.8",
@@ -90,17 +89,15 @@
     "eslint-plugin-qunit": "^8.2.6",
     "globals": "^16.4.0",
     "loader.js": "^4.7.0",
-    "memory-scroll": "^1.0.2",
     "moment": "^2.30.1",
     "postcss": "^8.5.6",
     "prettier": "^3.8.1",
     "prettier-plugin-ember-template-tag": "^2.1.3",
-    "prismjs": "^1.30.0",
-    "prismjs-glimmer": "^1.1.1",
     "qunit": "^2.25.0",
     "qunit-dom": "^3.5.0",
     "rsvp": "^4.8.5",
     "sass": "^1.97.3",
+    "shiki": "^3.21.0",
     "stylelint": "^16.19.1",
     "stylelint-config-standard": "^39.0.0",
     "stylelint-config-standard-scss": "^16.0.0",
diff --git a/docs/tsconfig.json b/docs/tsconfig.json
index ee3866b5..68857652 100644
--- a/docs/tsconfig.json
+++ b/docs/tsconfig.json
@@ -14,6 +14,6 @@
       "docs/*": ["app/*"],
       "*": ["types/*"]
     },
-    "types": ["ember-source/types", "./node_modules/@types/prismjs"]
+    "types": ["ember-source/types"]
   }
 }
diff --git a/docs/types/global.d.ts b/docs/types/global.d.ts
index 246b9a61..09d717ef 100644
--- a/docs/types/global.d.ts
+++ b/docs/types/global.d.ts
@@ -3,12 +3,7 @@ import '@glint/environment-ember-template-imports';
 
 import type EmberPowerCalendarRegistry from 'ember-power-calendar/template-registry';
 
-export interface CodeSnippetRegistry {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  [key: string]: any;
-}
-
 declare module '@glint/environment-ember-loose/registry' {
-  export default interface Registry
-    extends EmberPowerCalendarRegistry, CodeSnippetRegistry {}
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+  export default interface Registry extends EmberPowerCalendarRegistry {}
 }
diff --git a/ember-power-calendar/src/components/power-calendar-multiple.gts b/ember-power-calendar/src/components/power-calendar-multiple.gts
index 1c7c9381..d98c4c03 100644
--- a/ember-power-calendar/src/components/power-calendar-multiple.gts
+++ b/ember-power-calendar/src/components/power-calendar-multiple.gts
@@ -39,18 +39,18 @@ export interface PowerCalendarMultipleActions {
   changeCenter?: (
     newCenter: Date,
     calendar: PowerCalendarMultipleAPI,
-    event: MouseEvent,
+    event: Event,
   ) => TaskInstance<void>;
   moveCenter?: (
     step: number,
     unit: TPowerCalendarMoveCenterUnit,
     calendar: PowerCalendarMultipleAPI,
-    event: MouseEvent | KeyboardEvent,
+    event: Event,
   ) => Promise<void>;
   select?: (
     day: PowerCalendarDay | PowerCalendarDay[],
     calendar: PowerCalendarMultipleAPI,
-    event: MouseEvent,
+    event: Event,
   ) => void;
 }
 
diff --git a/ember-power-calendar/src/components/power-calendar-range.gts b/ember-power-calendar/src/components/power-calendar-range.gts
index ea1ffd43..44a38225 100644
--- a/ember-power-calendar/src/components/power-calendar-range.gts
+++ b/ember-power-calendar/src/components/power-calendar-range.gts
@@ -64,8 +64,8 @@ interface PowerCalendarRangeArgs extends Omit<
   navComponent?: ComponentLike<PowerCalendarRangeNavSignature>;
   daysComponent?: ComponentLike<PowerCalendarRangeDaysSignature>;
   selected?: SelectedPowerCalendarRange;
-  minRange?: number;
-  maxRange?: number;
+  minRange?: string | number;
+  maxRange?: string | number;
   proximitySelection?: boolean;
   onSelect?: TPowerCalendarRangeOnSelect;
   onInit?: (calendar: PowerCalendarRangeAPI) => void;
@@ -329,7 +329,7 @@ export default class PowerCalendarRange extends Component<PowerCalendarRangeSign
     }
   }
 
-  _formatRange(v: number | undefined) {
+  _formatRange(v: string | number | undefined) {
     if (typeof v === 'number') {
       return v * DAY_IN_MS;
     }
diff --git a/ember-power-calendar/src/components/power-calendar.gts b/ember-power-calendar/src/components/power-calendar.gts
index ee102a1e..c77744de 100644
--- a/ember-power-calendar/src/components/power-calendar.gts
+++ b/ember-power-calendar/src/components/power-calendar.gts
@@ -57,18 +57,18 @@ export interface PowerCalendarActions {
   changeCenter?: (
     newCenter: Date,
     calendar: PowerCalendarAPI,
-    event: MouseEvent,
+    event: Event,
   ) => TaskInstance<void>;
   moveCenter?: (
     step: number,
     unit: TPowerCalendarMoveCenterUnit,
     calendar: PowerCalendarAPI,
-    event: MouseEvent | KeyboardEvent,
+    event: Event,
   ) => Promise<void>;
   select?: (
     day: PowerCalendarDay,
     calendar: PowerCalendarAPI,
-    event: MouseEvent,
+    event: Event,
   ) => void;
 }
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 72f475d1..fae4fecd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -89,9 +89,6 @@ importers:
       '@types/eslint__js':
         specifier: ^8.42.3
         version: 8.42.3
-      '@types/prismjs':
-        specifier: ^1.26.6
-        version: 1.26.6
       '@types/qunit':
         specifier: ^2.19.13
         version: 2.19.13
@@ -140,9 +137,6 @@ importers:
       ember-cli-terser:
         specifier: ^4.0.2
         version: 4.0.2
-      ember-code-snippet:
-        specifier: git+https://git@github.com/ef4/ember-code-snippet.git#d054b697098ad52481c94a952ccf8d89ba1f25fe
-        version: https://codeload.github.com/ef4/ember-code-snippet/tar.gz/d054b697098ad52481c94a952ccf8d89ba1f25fe
       ember-concurrency:
         specifier: ^5.1.0
         version: 5.1.0(@babel/core@7.29.0)(@glint/template@1.7.4)
@@ -185,6 +179,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)
@@ -209,9 +206,6 @@ importers:
       loader.js:
         specifier: ^4.7.0
         version: 4.7.0
-      memory-scroll:
-        specifier: ^1.0.2
-        version: 1.0.2
       moment:
         specifier: ^2.30.1
         version: 2.30.1
@@ -224,12 +218,6 @@ importers:
       prettier-plugin-ember-template-tag:
         specifier: ^2.1.3
         version: 2.1.3(prettier@3.8.1)
-      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.25.0
         version: 2.25.0
@@ -242,6 +230,9 @@ importers:
       sass:
         specifier: ^1.97.3
         version: 1.97.3
+      shiki:
+        specifier: ^3.21.0
+        version: 3.22.0
       stylelint:
         specifier: ^16.19.1
         version: 16.26.1(typescript@5.9.3)
@@ -1959,6 +1950,27 @@ packages:
   '@rtsao/scc@1.1.0':
     resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==}
 
+  '@shikijs/core@3.22.0':
+    resolution: {integrity: sha512-iAlTtSDDbJiRpvgL5ugKEATDtHdUVkqgHDm/gbD2ZS9c88mx7G1zSYjjOxp5Qa0eaW0MAQosFRmJSk354PRoQA==}
+
+  '@shikijs/engine-javascript@3.22.0':
+    resolution: {integrity: sha512-jdKhfgW9CRtj3Tor0L7+yPwdG3CgP7W+ZEqSsojrMzCjD1e0IxIbwUMDDpYlVBlC08TACg4puwFGkZfLS+56Tw==}
+
+  '@shikijs/engine-oniguruma@3.22.0':
+    resolution: {integrity: sha512-DyXsOG0vGtNtl7ygvabHd7Mt5EY8gCNqR9Y7Lpbbd/PbJvgWrqaKzH1JW6H6qFkuUa8aCxoiYVv8/YfFljiQxA==}
+
+  '@shikijs/langs@3.22.0':
+    resolution: {integrity: sha512-x/42TfhWmp6H00T6uwVrdTJGKgNdFbrEdhaDwSR5fd5zhQ1Q46bHq9EO61SCEWJR0HY7z2HNDMaBZp8JRmKiIA==}
+
+  '@shikijs/themes@3.22.0':
+    resolution: {integrity: sha512-o+tlOKqsr6FE4+mYJG08tfCFDS+3CG20HbldXeVoyP+cYSUxDhrFf3GPjE60U55iOkkjbpY2uC3It/eeja35/g==}
+
+  '@shikijs/types@3.22.0':
+    resolution: {integrity: sha512-491iAekgKDBFE67z70Ok5a8KBMsQ2IJwOWw3us/7ffQkIBCyOQfm/aNwVMBUriP02QshIfgHCBSIYAl3u2eWjg==}
+
+  '@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==}
 
@@ -2058,6 +2070,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==}
 
@@ -2092,9 +2107,6 @@ packages:
   '@types/node@9.6.61':
     resolution: {integrity: sha512-/aKAdg5c8n468cYLy2eQrcR5k6chlbNwZNGUj3TboyPa2hcO2QAJcfymlqPzMiRj8B6nYKXjzQz36minFE0RwQ==}
 
-  '@types/prismjs@1.26.6':
-    resolution: {integrity: sha512-vqlvI7qlMvcCBbVe0AKAb4f97//Hy0EBTaiW8AalRnG/xAN5zOiWWyrNqNXeq8+KAuvRewjCVY1+IPxk4RdNYw==}
-
   '@types/qs@6.14.0':
     resolution: {integrity: sha512-eOunJqu0K1923aExK6y8p6fsihYEn/BYuQ4g0CxAAgFc4b/ZLN4CrsRZ55srTdqoiLzU2B2evC+apEIxprEzkQ==}
 
@@ -2187,6 +2199,9 @@ packages:
     resolution: {integrity: sha512-AxNRwEie8Nn4eFS1FzDMJWIISMGoXMb037sgCBJ3UR6o0fQTzr2tqN9WT+DkWJPhIdQCfV7T6D387566VtnCJA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@ungap/structured-clone@1.3.0':
+    resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
+
   '@webassemblyjs/ast@1.14.1':
     resolution: {integrity: sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==}
 
@@ -2753,9 +2768,6 @@ packages:
   broccoli-filter@1.3.0:
     resolution: {integrity: sha512-VXJXw7eBfG82CFxaBDjYmyN7V72D4In2zwLVQJd/h3mBfF3CMdRTsv2L20lmRTtCv1sAHcB+LgMso90e/KYiLw==}
 
-  broccoli-flatiron@0.1.3:
-    resolution: {integrity: sha512-dD/4ck+LKOLTBzFlxP2zX7fhWt1TFMVR/88b9/wd8LkAHUyAzWs1vBah94ObSvajYGZ7ic+XvMXw+OhmvdlYoQ==}
-
   broccoli-funnel-reducer@1.0.0:
     resolution: {integrity: sha512-SaOCEdh+wnt2jFUV2Qb32m7LXyElvFwW3NKNaEJyi5PGQNwxfqpkc0KI6AbQANKgdj/40U2UC0WuGThFwuEUaA==}
 
@@ -2773,9 +2785,6 @@ packages:
   broccoli-kitchen-sink-helpers@0.3.1:
     resolution: {integrity: sha512-gqYnKSJxBSjj/uJqeuRAzYVbmjWhG0mOZ8jrp6+fnUIOgLN6MvI7XxBECDHkYMIFPJ8Smf4xaI066Q2FqQDnXg==}
 
-  broccoli-merge-trees@1.2.4:
-    resolution: {integrity: sha512-RXJAleytlED0dxXGEo2EXwrg5cCesY8LQzzGRogwGQmluoz+ijzxajpyWAW6wu/AyuQZj1vgnIqnld8jvuuXtQ==}
-
   broccoli-merge-trees@2.0.1:
     resolution: {integrity: sha512-WjaexJ+I8BxP5V5RNn6um/qDRSmKoiBC/QkRi79FT9ClHfldxRyCDs9mcV7mmoaPlsshmmPaUz5jdtcKA6DClQ==}
 
@@ -2954,6 +2963,9 @@ packages:
     resolution: {integrity: sha512-INsuF4GyiFLk8C91FPokbKTc/rwHqV4JnfatVZ6GPhguP1qmkRWX2dp5tepYboYdPpGWisLVLI+KsXoXFPRSMg==}
     hasBin: true
 
+  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'}
@@ -2970,6 +2982,12 @@ packages:
     resolution: {integrity: sha512-zgVZuo2WcZgfUEmsn6eO3kINexW8RAE4maiQ8QNs8CtpPCSyMiYsULR3HQYkm3w8FIA3SberyMJMSldGsW+U3w==}
     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==}
 
@@ -3121,6 +3139,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==}
 
@@ -3838,11 +3859,6 @@ packages:
     engines: {node: '>= 18'}
     hasBin: true
 
-  ember-code-snippet@https://codeload.github.com/ef4/ember-code-snippet/tar.gz/d054b697098ad52481c94a952ccf8d89ba1f25fe:
-    resolution: {tarball: https://codeload.github.com/ef4/ember-code-snippet/tar.gz/d054b697098ad52481c94a952ccf8d89ba1f25fe}
-    version: 3.0.0
-    engines: {node: 8.* || >= 10.*}
-
   ember-concurrency@5.1.0:
     resolution: {integrity: sha512-cnudfQnW7soEN98uEwGgfmmMM5PP8L3pefpQ81FewAtTFZhYyYKyJsMtkk8R/7AHCbcuX5cvY44yndHVF6Vshw==}
     engines: {node: 16.* || >= 18}
@@ -4076,9 +4092,6 @@ packages:
   es-toolkit@1.44.0:
     resolution: {integrity: sha512-6penXeZalaV88MM3cGkFZZfOoLGWshWWfdy0tWw/RlVVyhvMaWSBTOvXNeiW3e5FwdS5ePW0LGEu17zT139ktg==}
 
-  es6-promise@1.0.0:
-    resolution: {integrity: sha512-8/2Juj7DeNMwxkbcruBmErKcgPSTPgaGIB08nQvlBzaqliW1vMliNOaBQaMzzQAxX9k0vGy+8wwWlgiLuKqZIw==}
-
   escalade@3.2.0:
     resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
     engines: {node: '>=6'}
@@ -4862,6 +4875,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==}
 
@@ -4905,6 +4924,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==}
 
@@ -5734,6 +5756,9 @@ packages:
   mdast-util-from-markdown@2.0.2:
     resolution: {integrity: sha512-uZhTV/8NBuw0WHkPTrCqDOl0zVe1BIng5ZtHoDk49ME1qqcjYmmLmOf0gELgcRMxN4w2iuIeVso5/6QymSrgmA==}
 
+  mdast-util-to-hast@13.2.1:
+    resolution: {integrity: sha512-cctsq2wp5vTsLIcaymblUriiTcZd0CwWtCbLvrOzYCDZoWyMNV8sZ7krj09FSnsiJi3WVsHLM4k6Dq/yaPyCXA==}
+
   mdast-util-to-string@4.0.0:
     resolution: {integrity: sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==}
 
@@ -5758,10 +5783,6 @@ packages:
     resolution: {integrity: sha512-qFCFUDs7U3b8mBDPyz5EToEKoAkgCzqquIgi9nkkR9bixxOVOre+09lbuH7+9Kn2NFpm56M3GUWVbU2hQgdACA==}
     engines: {node: '>=10'}
 
-  memory-scroll@1.0.2:
-    resolution: {integrity: sha512-R88p0Mv/ih491do3iyDCD1nwufEwPa6XtnRFe44G1ML7rifR3IqzHBjzFHP33vhWQWDcnxOWj6JXjhZlDHbzyg==}
-    engines: {node: ^4.5 || 6.* || >= 7.*}
-
   memory-streams@0.1.3:
     resolution: {integrity: sha512-qVQ/CjkMyMInPaaRMrwWNDvf6boRZXaT/DbQeMYcCWuXPEBf1v8qChOc9OlEVQp2uOvRXa1Qu30fLmKhY6NipA==}
 
@@ -6208,6 +6229,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.4:
+    resolution: {integrity: sha512-3VhUGN3w2eYxnTzHn+ikMI+fp/96KoRSVK9/kMTcFqj1NRDh2IhQCKvYxDnWePKRXY/AqH+Fuiyb7VHSzBjHfA==}
+
   open@10.1.0:
     resolution: {integrity: sha512-mnkeQ1qP5Ue2wd+aivTD3NHd/lZ96Lu0jgf0pwktLPtx6cTZiH7tyeGRRHs0zX0rbrahXPnXlUnbeXyaBBuIaw==}
     engines: {node: '>=18'}
@@ -6556,16 +6583,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'}
@@ -6607,6 +6624,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==}
+
   proto-list@1.2.4:
     resolution: {integrity: sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==}
 
@@ -6734,6 +6754,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.1.0:
+    resolution: {integrity: sha512-6VwtthbV4o/7+OaAF9I5L5V3llLEsoPyq9P1JVXkedTP33c7MfCG0/5NOPcSJn0TzXcG9YUrR0gQSWioew3LDg==}
+
   regexp.prototype.flags@1.5.4:
     resolution: {integrity: sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==}
     engines: {node: '>= 0.4'}
@@ -7132,6 +7161,9 @@ packages:
   shellwords@0.1.1:
     resolution: {integrity: sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==}
 
+  shiki@3.22.0:
+    resolution: {integrity: sha512-LBnhsoYEe0Eou4e1VgJACes+O6S6QC0w71fCSp5Oya79inkwkm15gQ1UF6VtQ8j/taMDh79hAB49WUk8ALQW3g==}
+
   side-channel-list@1.0.0:
     resolution: {integrity: sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==}
     engines: {node: '>= 0.4'}
@@ -7260,6 +7292,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==}
 
@@ -7346,6 +7381,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'}
@@ -7660,6 +7698,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.4.0:
     resolution: {integrity: sha512-3TaVTaAv2gTiMB35i3FiGJaRfwb3Pyn/j3m/bfAvGe8FB7CF6u+LMYqYlDh7reQf7UNvoTvdfAqHGmPGOSsPmA==}
     engines: {node: '>=18.12'}
@@ -7793,9 +7834,21 @@ packages:
     resolution: {integrity: sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==}
     engines: {node: '>=8'}
 
+  unist-util-is@6.0.1:
+    resolution: {integrity: sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g==}
+
+  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.2:
+    resolution: {integrity: sha512-goh1s1TBrqSqukSc8wrjwWhL0hiJxgA8m4kFxGlQ+8FYQ3C/m11FcTs4YYem7V664AhHVvgoQLk890Ssdsr2IQ==}
+
+  unist-util-visit@5.1.0:
+    resolution: {integrity: sha512-m+vIdyeCOpdr/QeQCu2EzxX/ohgS8KbnPDgFni4dQsfSCtpz8UqDyY5GjRru8PDKuYn7Fq19j1CQ+nJSsGKOzg==}
+
   universal-user-agent@6.0.1:
     resolution: {integrity: sha512-yCzhz6FN2wU1NiiQRogkTQszlQSlpWaw8SvVegAc+bDxbzHgh1vX8uIe8OYyMH6DwH+sdTJsgMl36+mSMdRJIQ==}
 
@@ -7887,6 +7940,12 @@ packages:
     resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
     engines: {node: '>= 0.8'}
 
+  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'}
@@ -8194,6 +8253,9 @@ packages:
     resolution: {integrity: sha512-U/PBtDf35ff0D8X8D0jfdzHYEPFxAI7jJlxZXwCSez5M3190m+QobIfh+sWDWSHMCWWJN2AWamkegn6vr6YBTw==}
     engines: {node: '>=18'}
 
+  zwitch@2.0.4:
+    resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
+
 snapshots:
 
   '@asamuzakjp/css-color@3.2.0':
@@ -9794,6 +9856,39 @@ snapshots:
 
   '@rtsao/scc@1.1.0': {}
 
+  '@shikijs/core@3.22.0':
+    dependencies:
+      '@shikijs/types': 3.22.0
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+      hast-util-to-html: 9.0.5
+
+  '@shikijs/engine-javascript@3.22.0':
+    dependencies:
+      '@shikijs/types': 3.22.0
+      '@shikijs/vscode-textmate': 10.0.2
+      oniguruma-to-es: 4.3.4
+
+  '@shikijs/engine-oniguruma@3.22.0':
+    dependencies:
+      '@shikijs/types': 3.22.0
+      '@shikijs/vscode-textmate': 10.0.2
+
+  '@shikijs/langs@3.22.0':
+    dependencies:
+      '@shikijs/types': 3.22.0
+
+  '@shikijs/themes@3.22.0':
+    dependencies:
+      '@shikijs/types': 3.22.0
+
+  '@shikijs/types@3.22.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
@@ -9907,6 +10002,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': {}
@@ -9937,8 +10036,6 @@ snapshots:
 
   '@types/node@9.6.61': {}
 
-  '@types/prismjs@1.26.6': {}
-
   '@types/qs@6.14.0': {}
 
   '@types/qunit@2.19.13': {}
@@ -10066,6 +10163,8 @@ snapshots:
       '@typescript-eslint/types': 8.55.0
       eslint-visitor-keys: 4.2.1
 
+  '@ungap/structured-clone@1.3.0': {}
+
   '@webassemblyjs/ast@1.14.1':
     dependencies:
       '@webassemblyjs/helper-numbers': 1.13.2
@@ -10808,11 +10907,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  broccoli-flatiron@0.1.3:
-    dependencies:
-      broccoli-plugin: 1.3.1
-      mkdirp: 0.5.6
-
   broccoli-funnel-reducer@1.0.0: {}
 
   broccoli-funnel@2.0.2:
@@ -10855,19 +10949,6 @@ snapshots:
       glob: 5.0.15
       mkdirp: 0.5.6
 
-  broccoli-merge-trees@1.2.4:
-    dependencies:
-      broccoli-plugin: 1.3.1
-      can-symlink: 1.0.0
-      fast-ordered-set: 1.0.3
-      fs-tree-diff: 0.5.9
-      heimdalljs: 0.2.6
-      heimdalljs-logger: 0.1.10
-      rimraf: 2.7.1
-      symlink-or-copy: 1.3.1
-    transitivePeerDependencies:
-      - supports-color
-
   broccoli-merge-trees@2.0.1:
     dependencies:
       broccoli-plugin: 1.3.1
@@ -11259,6 +11340,8 @@ snapshots:
       ansicolors: 0.2.1
       redeyed: 1.0.1
 
+  ccount@2.0.1: {}
+
   chalk@1.1.3:
     dependencies:
       ansi-styles: 2.2.1
@@ -11280,6 +11363,10 @@ snapshots:
 
   chalk@5.4.1: {}
 
+  character-entities-html4@2.1.0: {}
+
+  character-entities-legacy@3.0.0: {}
+
   character-entities@2.0.2: {}
 
   chardet@0.7.0: {}
@@ -11418,6 +11505,8 @@ snapshots:
     dependencies:
       delayed-stream: 1.0.0
 
+  comma-separated-tokens@2.0.3: {}
+
   commander@2.20.3: {}
 
   commander@2.8.1:
@@ -12314,18 +12403,6 @@ snapshots:
       - walrus
       - whiskers
 
-  ember-code-snippet@https://codeload.github.com/ef4/ember-code-snippet/tar.gz/d054b697098ad52481c94a952ccf8d89ba1f25fe:
-    dependencies:
-      broccoli-flatiron: 0.1.3
-      broccoli-merge-trees: 1.2.4
-      broccoli-plugin: 1.3.1
-      ember-cli-babel: 7.26.11
-      ember-cli-htmlbars: 6.3.0
-      es6-promise: 1.0.0
-      glob: 7.2.3
-    transitivePeerDependencies:
-      - supports-color
-
   ember-concurrency@5.1.0(@babel/core@7.29.0)(@glint/template@1.7.4):
     dependencies:
       '@babel/helper-module-imports': 7.28.6
@@ -12753,8 +12830,6 @@ snapshots:
 
   es-toolkit@1.44.0: {}
 
-  es6-promise@1.0.0: {}
-
   escalade@3.2.0: {}
 
   escape-goat@4.0.0: {}
@@ -13828,6 +13903,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.1
+      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
@@ -13877,6 +13970,8 @@ snapshots:
 
   html-tags@3.3.1: {}
 
+  html-void-elements@3.0.0: {}
+
   http-cache-semantics@4.2.0: {}
 
   http-errors@1.6.3:
@@ -14787,6 +14882,18 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  mdast-util-to-hast@13.2.1:
+    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.1.0
+      vfile: 6.0.3
+
   mdast-util-to-string@4.0.0:
     dependencies:
       '@types/mdast': 4.0.4
@@ -14810,12 +14917,6 @@ snapshots:
       map-age-cleaner: 0.1.3
       mimic-fn: 3.1.0
 
-  memory-scroll@1.0.2:
-    dependencies:
-      ember-cli-babel: 7.26.11
-    transitivePeerDependencies:
-      - supports-color
-
   memory-streams@0.1.3:
     dependencies:
       readable-stream: 1.0.34
@@ -15333,6 +15434,14 @@ snapshots:
     dependencies:
       mimic-function: 5.0.1
 
+  oniguruma-parser@0.12.1: {}
+
+  oniguruma-to-es@4.3.4:
+    dependencies:
+      oniguruma-parser: 0.12.1
+      regex: 6.1.0
+      regex-recursion: 6.0.2
+
   open@10.1.0:
     dependencies:
       default-browser: 5.5.0
@@ -15664,12 +15773,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: {}
@@ -15701,6 +15804,8 @@ snapshots:
       retry: 0.12.0
       signal-exit: 3.0.7
 
+  property-information@7.1.0: {}
+
   proto-list@1.2.4: {}
 
   protocols@2.0.2: {}
@@ -15858,6 +15963,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.1.0:
+    dependencies:
+      regex-utilities: 2.3.0
+
   regexp.prototype.flags@1.5.4:
     dependencies:
       call-bind: 1.0.8
@@ -16343,6 +16458,17 @@ snapshots:
 
   shellwords@0.1.1: {}
 
+  shiki@3.22.0:
+    dependencies:
+      '@shikijs/core': 3.22.0
+      '@shikijs/engine-javascript': 3.22.0
+      '@shikijs/engine-oniguruma': 3.22.0
+      '@shikijs/langs': 3.22.0
+      '@shikijs/themes': 3.22.0
+      '@shikijs/types': 3.22.0
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+
   side-channel-list@1.0.0:
     dependencies:
       es-errors: 1.3.0
@@ -16524,6 +16650,8 @@ snapshots:
 
   sourcemap-codec@1.4.8: {}
 
+  space-separated-tokens@2.0.2: {}
+
   spawn-args@0.2.0: {}
 
   split-string@3.1.0:
@@ -16632,6 +16760,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
@@ -17084,6 +17217,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  trim-lines@3.0.1: {}
+
   ts-api-utils@2.4.0(typescript@5.9.3):
     dependencies:
       typescript: 5.9.3
@@ -17226,10 +17361,29 @@ snapshots:
     dependencies:
       crypto-random-string: 2.0.0
 
+  unist-util-is@6.0.1:
+    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.2:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.1
+
+  unist-util-visit@5.1.0:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.1
+      unist-util-visit-parents: 6.0.2
+
   universal-user-agent@6.0.1: {}
 
   universalify@0.1.2: {}
@@ -17309,6 +17463,16 @@ snapshots:
 
   vary@1.1.2: {}
 
+  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:
@@ -17648,3 +17812,5 @@ snapshots:
   yocto-queue@0.1.0: {}
 
   yoctocolors-cjs@2.1.3: {}
+
+  zwitch@2.0.4: {}

From db1e3fb55c4d8a754a8b3d587c844638b78561bf Mon Sep 17 00:00:00 2001
From: Markus Sanin <markus.sanin@zeppelin-group.com>
Date: Sun, 15 Feb 2026 17:56:30 +0100
Subject: [PATCH 2/5] Update ember-cli v6.4.0...v6.7.2

---
 docs/.ember-cli                   |  14 +-
 docs/config/ember-cli-update.json |   2 +-
 docs/package.json                 |  16 +-
 pnpm-lock.yaml                    | 354 ++++++++++++++++++++++++++++--
 4 files changed, 352 insertions(+), 34 deletions(-)

diff --git a/docs/.ember-cli b/docs/.ember-cli
index 4defd284..abf65322 100644
--- a/docs/.ember-cli
+++ b/docs/.ember-cli
@@ -3,5 +3,17 @@
     Setting `isTypeScriptProject` to true will force the blueprint generators to generate TypeScript
     rather than JavaScript by default, when a TypeScript version of a given blueprint is available.
   */
-  "isTypeScriptProject": true
+  "isTypeScriptProject": true,
+
+  /**
+    Setting `componentAuthoringFormat` to "strict" will force the blueprint generators to generate GJS
+    or GTS files for the component and the component rendering test. "loose" is the default.
+  */
+  "componentAuthoringFormat": "loose",
+
+  /**
+    Setting `routeAuthoringFormat` to "strict" will force the blueprint generators to generate GJS
+    or GTS templates for routes. "loose" is the default
+  */
+  "routeAuthoringFormat": "loose"
 }
diff --git a/docs/config/ember-cli-update.json b/docs/config/ember-cli-update.json
index ca99d28d..b153dda7 100644
--- a/docs/config/ember-cli-update.json
+++ b/docs/config/ember-cli-update.json
@@ -3,7 +3,7 @@
   "packages": [
     {
       "name": "ember-cli",
-      "version": "6.4.0",
+      "version": "6.7.2",
       "blueprints": [
         {
           "name": "app",
diff --git a/docs/package.json b/docs/package.json
index f84f8a24..9d9b4f46 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -41,7 +41,7 @@
     "@ember/test-helpers": "^5.4.1",
     "@embroider/macros": "^1.19.7",
     "@embroider/test-setup": "^4.0.0",
-    "@eslint/js": "^9.25.1",
+    "@eslint/js": "^9.35.0",
     "@glimmer/component": "^2.0.0",
     "@glimmer/tracking": "^1.1.2",
     "@glint/core": "^1.5.2",
@@ -49,25 +49,23 @@
     "@glint/environment-ember-template-imports": "^1.5.2",
     "@glint/template": "^1.7.4",
     "@tsconfig/ember": "^3.0.12",
-    "@types/eslint__js": "^8.42.3",
     "@types/qunit": "^2.19.13",
     "broccoli-asset-rev": "^3.0.0",
     "concurrently": "^9.2.1",
     "ember-auto-import": "^2.12.0",
     "ember-basic-dropdown": "^8.11.0",
-    "ember-cli": "~6.4.0",
+    "ember-cli": "~6.7.2",
     "ember-cli-app-version": "^7.0.0",
     "ember-cli-babel": "^8.3.1",
     "ember-cli-clean-css": "^3.0.0",
     "ember-cli-dependency-checker": "^3.3.3",
-    "ember-cli-deprecation-workflow": "^3.3.0",
+    "ember-cli-deprecation-workflow": "^3.4.0",
     "ember-cli-htmlbars": "^6.3.0",
     "ember-cli-inject-live-reload": "^2.1.0",
     "ember-cli-sass": "^11.0.1",
     "ember-cli-sri": "^2.1.1",
     "ember-cli-terser": "^4.0.2",
     "ember-concurrency": "^5.1.0",
-    "ember-fetch": "^8.1.2",
     "ember-load-initializers": "^3.0.1",
     "ember-modifier": "^4.3.0",
     "ember-page-title": "^9.0.3",
@@ -76,13 +74,13 @@
     "ember-power-select": "^8.12.1",
     "ember-qunit": "^9.0.4",
     "ember-resolver": "^13.1.1",
-    "ember-source": "~6.4.0",
+    "ember-source": "~6.7.0",
     "ember-source-channel-url": "^3.0.0",
     "ember-template-imports": "^4.4.0",
     "ember-template-lint": "^7.9.3",
     "ember-truth-helpers": "^5.0.0",
     "ember-try": "^4.0.0",
-    "eslint": "^9.25.1",
+    "eslint": "^9.35.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-ember": "^12.7.5",
     "eslint-plugin-n": "^17.23.2",
@@ -98,7 +96,7 @@
     "rsvp": "^4.8.5",
     "sass": "^1.97.3",
     "shiki": "^3.21.0",
-    "stylelint": "^16.19.1",
+    "stylelint": "^16.23.1",
     "stylelint-config-standard": "^39.0.0",
     "stylelint-config-standard-scss": "^16.0.0",
     "tracked-built-ins": "^4.1.0",
@@ -107,7 +105,7 @@
     "webpack": "^5.105.2"
   },
   "engines": {
-    "node": ">= 18"
+    "node": ">= 20.11"
   },
   "ember": {
     "edition": "octane"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fae4fecd..352c5796 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -63,7 +63,7 @@ importers:
         specifier: ^4.0.0
         version: 4.0.0(@embroider/core@3.5.9(@glint/template@1.7.4))
       '@eslint/js':
-        specifier: ^9.25.1
+        specifier: ^9.35.0
         version: 9.39.2
       '@glimmer/component':
         specifier: ^2.0.0
@@ -86,9 +86,6 @@ importers:
       '@tsconfig/ember':
         specifier: ^3.0.12
         version: 3.0.12
-      '@types/eslint__js':
-        specifier: ^8.42.3
-        version: 8.42.3
       '@types/qunit':
         specifier: ^2.19.13
         version: 2.19.13
@@ -103,13 +100,13 @@ importers:
         version: 2.12.0(@glint/template@1.7.4)(webpack@5.105.2)
       ember-basic-dropdown:
         specifier: ^8.11.0
-        version: 8.11.0(@babel/core@7.29.0)(@ember/string@4.0.1)(@ember/test-helpers@5.4.1(@babel/core@7.29.0)(@glint/template@1.7.4))(@glimmer/component@2.0.0)(@glint/environment-ember-loose@1.5.2(@glimmer/component@2.0.0)(@glint/template@1.7.4)(ember-cli-htmlbars@6.3.0)(ember-modifier@4.3.0(@babel/core@7.29.0)))(@glint/template@1.7.4)(ember-source@6.4.0(@glimmer/component@2.0.0)(rsvp@4.8.5))
+        version: 8.11.0(@babel/core@7.29.0)(@ember/string@4.0.1)(@ember/test-helpers@5.4.1(@babel/core@7.29.0)(@glint/template@1.7.4))(@glimmer/component@2.0.0)(@glint/environment-ember-loose@1.5.2(@glimmer/component@2.0.0)(@glint/template@1.7.4)(ember-cli-htmlbars@6.3.0)(ember-modifier@4.3.0(@babel/core@7.29.0)))(@glint/template@1.7.4)(ember-source@6.7.0(@glimmer/component@2.0.0)(rsvp@4.8.5))
       ember-cli:
-        specifier: ~6.4.0
-        version: 6.4.0(@types/node@25.2.3)(handlebars@4.7.8)(underscore@1.13.7)
+        specifier: ~6.7.2
+        version: 6.7.2(@types/node@25.2.3)(handlebars@4.7.8)(underscore@1.13.7)
       ember-cli-app-version:
         specifier: ^7.0.0
-        version: 7.0.0(ember-source@6.4.0(@glimmer/component@2.0.0)(rsvp@4.8.5))
+        version: 7.0.0(ember-source@6.7.0(@glimmer/component@2.0.0)(rsvp@4.8.5))
       ember-cli-babel:
         specifier: ^8.3.1
         version: 8.3.1(@babel/core@7.29.0)
@@ -118,10 +115,10 @@ importers:
         version: 3.0.0
       ember-cli-dependency-checker:
         specifier: ^3.3.3
-        version: 3.3.3(ember-cli@6.4.0(@types/node@25.2.3)(handlebars@4.7.8)(underscore@1.13.7))
+        version: 3.3.3(ember-cli@6.7.2(@types/node@25.2.3)(handlebars@4.7.8)(underscore@1.13.7))
       ember-cli-deprecation-workflow:
-        specifier: ^3.3.0
-        version: 3.4.0(ember-source@6.4.0(@glimmer/component@2.0.0)(rsvp@4.8.5))
+        specifier: ^3.4.0
+        version: 3.4.0(ember-source@6.7.0(@glimmer/component@2.0.0)(rsvp@4.8.5))
       ember-cli-htmlbars:
         specifier: ^6.3.0
         version: 6.3.0
@@ -140,12 +137,9 @@ importers:
       ember-concurrency:
         specifier: ^5.1.0
         version: 5.1.0(@babel/core@7.29.0)(@glint/template@1.7.4)
-      ember-fetch:
-        specifier: ^8.1.2
-        version: 8.1.2(encoding@0.1.13)
       ember-load-initializers:
         specifier: ^3.0.1
-        version: 3.0.1(ember-source@6.4.0(@glimmer/component@2.0.0)(rsvp@4.8.5))
+        version: 3.0.1(ember-source@6.7.0(@glimmer/component@2.0.0)(rsvp@4.8.5))
       ember-modifier:
         specifier: ^4.3.0
         version: 4.3.0(@babel/core@7.29.0)
@@ -160,7 +154,7 @@ importers:
         version: 1.0.4(@babel/core@7.29.0)(@glint/template@1.7.4)(ember-power-calendar@file:ember-power-calendar(@babel/core@7.29.0)(@ember/test-helpers@5.4.1(@babel/core@7.29.0)(@glint/template@1.7.4))(@glimmer/component@2.0.0)(@glint/template@1.7.4)(ember-concurrency@5.1.0(@babel/core@7.29.0)(@glint/template@1.7.4)))(moment@2.30.1)
       ember-power-select:
         specifier: ^8.12.1
-        version: 8.12.1(@babel/core@7.29.0)(@ember/test-helpers@5.4.1(@babel/core@7.29.0)(@glint/template@1.7.4))(@glimmer/component@2.0.0)(@glint/environment-ember-loose@1.5.2(@glimmer/component@2.0.0)(@glint/template@1.7.4)(ember-cli-htmlbars@6.3.0)(ember-modifier@4.3.0(@babel/core@7.29.0)))(@glint/template@1.7.4)(ember-basic-dropdown@8.11.0(@babel/core@7.29.0)(@ember/string@4.0.1)(@ember/test-helpers@5.4.1(@babel/core@7.29.0)(@glint/template@1.7.4))(@glimmer/component@2.0.0)(@glint/environment-ember-loose@1.5.2(@glimmer/component@2.0.0)(@glint/template@1.7.4)(ember-cli-htmlbars@6.3.0)(ember-modifier@4.3.0(@babel/core@7.29.0)))(@glint/template@1.7.4)(ember-source@6.4.0(@glimmer/component@2.0.0)(rsvp@4.8.5)))(ember-concurrency@5.1.0(@babel/core@7.29.0)(@glint/template@1.7.4))(ember-source@6.4.0(@glimmer/component@2.0.0)(rsvp@4.8.5))
+        version: 8.12.1(@babel/core@7.29.0)(@ember/test-helpers@5.4.1(@babel/core@7.29.0)(@glint/template@1.7.4))(@glimmer/component@2.0.0)(@glint/environment-ember-loose@1.5.2(@glimmer/component@2.0.0)(@glint/template@1.7.4)(ember-cli-htmlbars@6.3.0)(ember-modifier@4.3.0(@babel/core@7.29.0)))(@glint/template@1.7.4)(ember-basic-dropdown@8.11.0(@babel/core@7.29.0)(@ember/string@4.0.1)(@ember/test-helpers@5.4.1(@babel/core@7.29.0)(@glint/template@1.7.4))(@glimmer/component@2.0.0)(@glint/environment-ember-loose@1.5.2(@glimmer/component@2.0.0)(@glint/template@1.7.4)(ember-cli-htmlbars@6.3.0)(ember-modifier@4.3.0(@babel/core@7.29.0)))(@glint/template@1.7.4)(ember-source@6.7.0(@glimmer/component@2.0.0)(rsvp@4.8.5)))(ember-concurrency@5.1.0(@babel/core@7.29.0)(@glint/template@1.7.4))(ember-source@6.7.0(@glimmer/component@2.0.0)(rsvp@4.8.5))
       ember-qunit:
         specifier: ^9.0.4
         version: 9.0.4(@babel/core@7.29.0)(@ember/test-helpers@5.4.1(@babel/core@7.29.0)(@glint/template@1.7.4))(@glint/template@1.7.4)(qunit@2.25.0)
@@ -168,8 +162,8 @@ importers:
         specifier: ^13.1.1
         version: 13.1.1
       ember-source:
-        specifier: ~6.4.0
-        version: 6.4.0(@glimmer/component@2.0.0)(rsvp@4.8.5)
+        specifier: ~6.7.0
+        version: 6.7.0(@glimmer/component@2.0.0)(rsvp@4.8.5)
       ember-source-channel-url:
         specifier: ^3.0.0
         version: 3.0.0(encoding@0.1.13)
@@ -186,7 +180,7 @@ importers:
         specifier: ^4.0.0
         version: 4.0.0(encoding@0.1.13)
       eslint:
-        specifier: ^9.25.1
+        specifier: ^9.35.0
         version: 9.39.2
       eslint-config-prettier:
         specifier: ^10.1.8
@@ -234,7 +228,7 @@ importers:
         specifier: ^3.21.0
         version: 3.22.0
       stylelint:
-        specifier: ^16.19.1
+        specifier: ^16.23.1
         version: 16.26.1(typescript@5.9.3)
       stylelint-config-standard:
         specifier: ^39.0.0
@@ -1237,6 +1231,18 @@ packages:
   '@ember-data/rfc395-data@0.0.4':
     resolution: {integrity: sha512-tGRdvgC9/QMQSuSuJV45xoyhI0Pzjm7A9o/MVVA3HakXIImJbbzx/k/6dO9CUEQXIyS2y0fW6C1XaYOG7rY0FQ==}
 
+  '@ember-tooling/blueprint-blueprint@0.0.2':
+    resolution: {integrity: sha512-W0Ulvny2PT+80qy2X9wSlNTobgfobI3cNfxoDgIlEr1f5ifyUg6rydyErl9RUupPxfsvuya6ss9TV6y86+qOjA==}
+
+  '@ember-tooling/blueprint-model@0.0.2':
+    resolution: {integrity: sha512-mZ6GZQE3zNfldN0qpZ8qAwCKH2fog60af72yppQueraYqRgL1SSd46An7sxRb1ur60+xlCMZAlj3086Fk1cKuQ==}
+
+  '@ember-tooling/classic-build-addon-blueprint@6.7.1':
+    resolution: {integrity: sha512-WICdxgfmazYtDE+vak7jgJ04saxlUcpYPN6i7fXP8UpN+VEx4hQ4nFgm1Mw+EPVdQkkm1dziX4eKlCBqAaxxcQ==}
+
+  '@ember-tooling/classic-build-app-blueprint@6.7.2':
+    resolution: {integrity: sha512-VLyBxd7aMkKqLFFhEmAgw/3l+McRWOlLnWUYDZjdxwrF8AAwOyLHgiP9AoGydPHGbKF5L40DkJDjWe+1T+5VWQ==}
+
   '@ember/edition-utils@1.2.0':
     resolution: {integrity: sha512-VmVq/8saCaPdesQmftPqbFtxJWrzxNGSQ+e8x8LLe3Hjm36pJ04Q8LeORGZkAeOhldoUX9seLGmSaHeXkIqoog==}
 
@@ -3859,6 +3865,11 @@ packages:
     engines: {node: '>= 18'}
     hasBin: true
 
+  ember-cli@6.7.2:
+    resolution: {integrity: sha512-e5TpmLPApKcNaYiJ6bUyLO2D4eDY0yDV0gydTHPWVxm/Y03HdVoAtdlP6a0gHeVB8TrVVYISetNf/WB8k8aKOQ==}
+    engines: {node: '>= 20.11'}
+    hasBin: true
+
   ember-concurrency@5.1.0:
     resolution: {integrity: sha512-cnudfQnW7soEN98uEwGgfmmMM5PP8L3pefpQ81FewAtTFZhYyYKyJsMtkk8R/7AHCbcuX5cvY44yndHVF6Vshw==}
     engines: {node: 16.* || >= 18}
@@ -3958,6 +3969,12 @@ packages:
     peerDependencies:
       '@glimmer/component': '>= 1.1.2'
 
+  ember-source@6.7.0:
+    resolution: {integrity: sha512-/vsO5kvquMWcmIkAqkLmDrmeH0JnoN03Fqua+QuzUIeUueIi5ZW8qqQCBWWQ78+EZOUoekXGlP9NUTMBQM9hKg==}
+    engines: {node: '>= 18.*'}
+    peerDependencies:
+      '@glimmer/component': '>= 1.1.2'
+
   ember-style-modifier@4.5.1:
     resolution: {integrity: sha512-ReVGW9fZmDIsCWsuJGH4joiiHOv9aF9Yv4lUZUjXjQyR9SEAae7RWjZcjPgmEJwpN7yDSyy4PIwdJa0smT2A3g==}
     engines: {node: 18.* || >= 20, pnpm: '>= 10.*'}
@@ -9065,6 +9082,42 @@ snapshots:
 
   '@ember-data/rfc395-data@0.0.4': {}
 
+  '@ember-tooling/blueprint-blueprint@0.0.2': {}
+
+  '@ember-tooling/blueprint-model@0.0.2':
+    dependencies:
+      chalk: 4.1.2
+      diff: 7.0.0
+      isbinaryfile: 5.0.7
+      lodash: 4.17.23
+      promise.hash.helper: 1.0.8
+      quick-temp: 0.1.9
+      silent-error: 1.1.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@ember-tooling/classic-build-addon-blueprint@6.7.1':
+    dependencies:
+      '@ember-tooling/blueprint-model': 0.0.2
+      chalk: 4.1.2
+      ember-cli-normalize-entity-name: 1.0.0
+      ember-cli-string-utils: 1.1.0
+      fs-extra: 11.3.3
+      lodash: 4.17.23
+      silent-error: 1.1.1
+      sort-package-json: 2.15.1
+      walk-sync: 3.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@ember-tooling/classic-build-app-blueprint@6.7.2':
+    dependencies:
+      '@ember-tooling/blueprint-model': 0.0.2
+      chalk: 4.1.2
+      ember-cli-string-utils: 1.1.0
+    transitivePeerDependencies:
+      - supports-color
+
   '@ember/edition-utils@1.2.0': {}
 
   '@ember/library-tsconfig@1.1.3': {}
@@ -9243,6 +9296,19 @@ snapshots:
       - '@babel/core'
       - supports-color
 
+  '@embroider/util@1.13.5(@babel/core@7.29.0)(@glint/environment-ember-loose@1.5.2(@glimmer/component@2.0.0)(@glint/template@1.7.4)(ember-cli-htmlbars@6.3.0)(ember-modifier@4.3.0(@babel/core@7.29.0)))(@glint/template@1.7.4)(ember-source@6.7.0(@glimmer/component@2.0.0)(rsvp@4.8.5))':
+    dependencies:
+      '@embroider/macros': 1.19.7(@babel/core@7.29.0)(@glint/template@1.7.4)
+      broccoli-funnel: 3.0.8
+      ember-cli-babel: 7.26.11
+      ember-source: 6.7.0(@glimmer/component@2.0.0)(rsvp@4.8.5)
+    optionalDependencies:
+      '@glint/environment-ember-loose': 1.5.2(@glimmer/component@2.0.0)(@glint/template@1.7.4)(ember-cli-htmlbars@6.3.0)(ember-modifier@4.3.0(@babel/core@7.29.0))
+      '@glint/template': 1.7.4
+    transitivePeerDependencies:
+      - '@babel/core'
+      - supports-color
+
   '@eslint-community/eslint-utils@4.9.1(eslint@9.39.2)':
     dependencies:
       eslint: 9.39.2
@@ -11985,6 +12051,26 @@ snapshots:
       - ember-source
       - supports-color
 
+  ember-basic-dropdown@8.11.0(@babel/core@7.29.0)(@ember/string@4.0.1)(@ember/test-helpers@5.4.1(@babel/core@7.29.0)(@glint/template@1.7.4))(@glimmer/component@2.0.0)(@glint/environment-ember-loose@1.5.2(@glimmer/component@2.0.0)(@glint/template@1.7.4)(ember-cli-htmlbars@6.3.0)(ember-modifier@4.3.0(@babel/core@7.29.0)))(@glint/template@1.7.4)(ember-source@6.7.0(@glimmer/component@2.0.0)(rsvp@4.8.5)):
+    dependencies:
+      '@ember/test-helpers': 5.4.1(@babel/core@7.29.0)(@glint/template@1.7.4)
+      '@embroider/addon-shim': 1.10.2
+      '@embroider/macros': 1.19.7(@babel/core@7.29.0)(@glint/template@1.7.4)
+      '@embroider/util': 1.13.5(@babel/core@7.29.0)(@glint/environment-ember-loose@1.5.2(@glimmer/component@2.0.0)(@glint/template@1.7.4)(ember-cli-htmlbars@6.3.0)(ember-modifier@4.3.0(@babel/core@7.29.0)))(@glint/template@1.7.4)(ember-source@6.7.0(@glimmer/component@2.0.0)(rsvp@4.8.5))
+      '@glimmer/component': 2.0.0
+      decorator-transforms: 2.3.1(@babel/core@7.29.0)
+      ember-element-helper: 0.8.8
+      ember-modifier: 4.3.0(@babel/core@7.29.0)
+      ember-style-modifier: 4.5.1(@babel/core@7.29.0)(@ember/string@4.0.1)
+      ember-truth-helpers: 5.0.0
+    transitivePeerDependencies:
+      - '@babel/core'
+      - '@ember/string'
+      - '@glint/environment-ember-loose'
+      - '@glint/template'
+      - ember-source
+      - supports-color
+
   ember-cli-app-version@7.0.0(ember-source@6.4.0(@glimmer/component@2.0.0)(rsvp@4.8.5)):
     dependencies:
       ember-cli-babel: 7.26.11
@@ -11993,6 +12079,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  ember-cli-app-version@7.0.0(ember-source@6.7.0(@glimmer/component@2.0.0)(rsvp@4.8.5)):
+    dependencies:
+      ember-cli-babel: 7.26.11
+      ember-source: 6.7.0(@glimmer/component@2.0.0)(rsvp@4.8.5)
+      git-repo-info: 2.1.1
+    transitivePeerDependencies:
+      - supports-color
+
   ember-cli-babel-plugin-helpers@1.1.1: {}
 
   ember-cli-babel@7.26.11:
@@ -12080,6 +12174,15 @@ snapshots:
       resolve: 1.22.11
       semver: 5.7.2
 
+  ember-cli-dependency-checker@3.3.3(ember-cli@6.7.2(@types/node@25.2.3)(handlebars@4.7.8)(underscore@1.13.7)):
+    dependencies:
+      chalk: 2.4.2
+      ember-cli: 6.7.2(@types/node@25.2.3)(handlebars@4.7.8)(underscore@1.13.7)
+      find-yarn-workspace-root: 2.0.0
+      is-git-url: 1.0.0
+      resolve: 1.22.11
+      semver: 5.7.2
+
   ember-cli-deprecation-workflow@3.4.0(ember-source@6.4.0(@glimmer/component@2.0.0)(rsvp@4.8.5)):
     dependencies:
       '@babel/core': 7.29.0
@@ -12088,6 +12191,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  ember-cli-deprecation-workflow@3.4.0(ember-source@6.7.0(@glimmer/component@2.0.0)(rsvp@4.8.5)):
+    dependencies:
+      '@babel/core': 7.29.0
+      ember-cli-babel: 8.3.1(@babel/core@7.29.0)
+      ember-source: 6.7.0(@glimmer/component@2.0.0)(rsvp@4.8.5)
+    transitivePeerDependencies:
+      - supports-color
+
   ember-cli-fastboot@4.1.5(ember-source@6.4.0(@glimmer/component@2.0.0)(rsvp@4.8.5)):
     dependencies:
       broccoli-concat: 4.2.7
@@ -12403,6 +12514,152 @@ snapshots:
       - walrus
       - whiskers
 
+  ember-cli@6.7.2(@types/node@25.2.3)(handlebars@4.7.8)(underscore@1.13.7):
+    dependencies:
+      '@ember-tooling/blueprint-blueprint': 0.0.2
+      '@ember-tooling/blueprint-model': 0.0.2
+      '@ember-tooling/classic-build-addon-blueprint': 6.7.1
+      '@ember-tooling/classic-build-app-blueprint': 6.7.2
+      '@pnpm/find-workspace-dir': 1000.1.4
+      babel-remove-types: 1.1.0
+      broccoli: 3.5.2
+      broccoli-concat: 4.2.7
+      broccoli-config-loader: 1.0.1
+      broccoli-config-replace: 1.1.2
+      broccoli-debug: 0.6.5
+      broccoli-funnel: 3.0.8
+      broccoli-funnel-reducer: 1.0.0
+      broccoli-merge-trees: 4.2.0
+      broccoli-middleware: 2.1.1
+      broccoli-slow-trees: 3.1.0
+      broccoli-source: 3.0.1
+      broccoli-stew: 3.0.0
+      calculate-cache-key-for-tree: 2.0.0
+      capture-exit: 2.0.0
+      chalk: 4.1.2
+      ci-info: 4.4.0
+      clean-base-url: 1.0.0
+      compression: 1.8.1
+      configstore: 5.0.1
+      console-ui: 3.1.2
+      content-tag: 3.1.3
+      core-object: 3.1.5
+      dag-map: 2.0.2
+      diff: 7.0.0
+      ember-cli-is-package-missing: 1.0.0
+      ember-cli-normalize-entity-name: 1.0.0
+      ember-cli-preprocess-registry: 5.0.1
+      ember-cli-string-utils: 1.1.0
+      ensure-posix-path: 1.1.1
+      execa: 5.1.1
+      exit: 0.1.2
+      express: 4.22.1
+      filesize: 10.1.6
+      find-up: 5.0.0
+      find-yarn-workspace-root: 2.0.0
+      fixturify-project: 2.1.1
+      fs-extra: 11.3.3
+      fs-tree-diff: 2.0.1
+      get-caller-file: 2.0.5
+      git-repo-info: 2.1.1
+      glob: 8.1.0
+      heimdalljs: 0.2.6
+      heimdalljs-fs-monitor: 1.1.2
+      heimdalljs-graph: 1.0.0
+      heimdalljs-logger: 0.1.10
+      http-proxy: 1.18.1
+      inflection: 2.0.1
+      inquirer: 9.3.8(@types/node@25.2.3)
+      is-git-url: 1.0.0
+      is-language-code: 3.1.0
+      isbinaryfile: 5.0.7
+      lodash: 4.17.23
+      markdown-it: 14.1.1
+      markdown-it-terminal: 0.4.0(markdown-it@14.1.1)
+      minimatch: 7.4.6
+      morgan: 1.10.1
+      nopt: 3.0.6
+      npm-package-arg: 12.0.2
+      os-locale: 5.0.0
+      p-defer: 3.0.0
+      portfinder: 1.0.38
+      promise-map-series: 0.3.0
+      promise.hash.helper: 1.0.8
+      quick-temp: 0.1.9
+      resolve: 1.22.11
+      resolve-package-path: 4.0.3
+      safe-stable-stringify: 2.5.0
+      sane: 5.0.1
+      semver: 7.7.4
+      silent-error: 1.1.1
+      sort-package-json: 2.15.1
+      symlink-or-copy: 1.3.1
+      temp: 0.9.4
+      testem: 3.17.0(handlebars@4.7.8)(underscore@1.13.7)
+      tiny-lr: 2.0.0
+      tree-sync: 2.1.0
+      walk-sync: 3.0.0
+      watch-detector: 1.0.2
+      workerpool: 9.3.4
+      yam: 1.0.0
+    transitivePeerDependencies:
+      - '@types/node'
+      - arc-templates
+      - atpl
+      - babel-core
+      - bracket-template
+      - bufferutil
+      - coffee-script
+      - debug
+      - dot
+      - dust
+      - dustjs-helpers
+      - dustjs-linkedin
+      - eco
+      - ect
+      - ejs
+      - haml-coffee
+      - hamlet
+      - hamljs
+      - handlebars
+      - hogan.js
+      - htmling
+      - jade
+      - jazz
+      - jqtpl
+      - just
+      - liquid-node
+      - liquor
+      - marko
+      - mote
+      - nunjucks
+      - plates
+      - pug
+      - qejs
+      - ractive
+      - razor-tmpl
+      - react
+      - react-dom
+      - slm
+      - squirrelly
+      - supports-color
+      - swig
+      - swig-templates
+      - teacup
+      - templayed
+      - then-jade
+      - then-pug
+      - tinyliquid
+      - toffee
+      - twig
+      - twing
+      - underscore
+      - utf-8-validate
+      - vash
+      - velocityjs
+      - walrus
+      - whiskers
+
   ember-concurrency@5.1.0(@babel/core@7.29.0)(@glint/template@1.7.4):
     dependencies:
       '@babel/helper-module-imports': 7.28.6
@@ -12463,6 +12720,10 @@ snapshots:
     dependencies:
       ember-source: 6.4.0(@glimmer/component@2.0.0)(rsvp@4.8.5)
 
+  ember-load-initializers@3.0.1(ember-source@6.7.0(@glimmer/component@2.0.0)(rsvp@4.8.5)):
+    dependencies:
+      ember-source: 6.7.0(@glimmer/component@2.0.0)(rsvp@4.8.5)
+
   ember-modifier@4.3.0(@babel/core@7.29.0):
     dependencies:
       '@embroider/addon-shim': 1.10.2
@@ -12506,15 +12767,15 @@ snapshots:
       - '@glint/template'
       - supports-color
 
-  ember-power-select@8.12.1(@babel/core@7.29.0)(@ember/test-helpers@5.4.1(@babel/core@7.29.0)(@glint/template@1.7.4))(@glimmer/component@2.0.0)(@glint/environment-ember-loose@1.5.2(@glimmer/component@2.0.0)(@glint/template@1.7.4)(ember-cli-htmlbars@6.3.0)(ember-modifier@4.3.0(@babel/core@7.29.0)))(@glint/template@1.7.4)(ember-basic-dropdown@8.11.0(@babel/core@7.29.0)(@ember/string@4.0.1)(@ember/test-helpers@5.4.1(@babel/core@7.29.0)(@glint/template@1.7.4))(@glimmer/component@2.0.0)(@glint/environment-ember-loose@1.5.2(@glimmer/component@2.0.0)(@glint/template@1.7.4)(ember-cli-htmlbars@6.3.0)(ember-modifier@4.3.0(@babel/core@7.29.0)))(@glint/template@1.7.4)(ember-source@6.4.0(@glimmer/component@2.0.0)(rsvp@4.8.5)))(ember-concurrency@5.1.0(@babel/core@7.29.0)(@glint/template@1.7.4))(ember-source@6.4.0(@glimmer/component@2.0.0)(rsvp@4.8.5)):
+  ember-power-select@8.12.1(@babel/core@7.29.0)(@ember/test-helpers@5.4.1(@babel/core@7.29.0)(@glint/template@1.7.4))(@glimmer/component@2.0.0)(@glint/environment-ember-loose@1.5.2(@glimmer/component@2.0.0)(@glint/template@1.7.4)(ember-cli-htmlbars@6.3.0)(ember-modifier@4.3.0(@babel/core@7.29.0)))(@glint/template@1.7.4)(ember-basic-dropdown@8.11.0(@babel/core@7.29.0)(@ember/string@4.0.1)(@ember/test-helpers@5.4.1(@babel/core@7.29.0)(@glint/template@1.7.4))(@glimmer/component@2.0.0)(@glint/environment-ember-loose@1.5.2(@glimmer/component@2.0.0)(@glint/template@1.7.4)(ember-cli-htmlbars@6.3.0)(ember-modifier@4.3.0(@babel/core@7.29.0)))(@glint/template@1.7.4)(ember-source@6.7.0(@glimmer/component@2.0.0)(rsvp@4.8.5)))(ember-concurrency@5.1.0(@babel/core@7.29.0)(@glint/template@1.7.4))(ember-source@6.7.0(@glimmer/component@2.0.0)(rsvp@4.8.5)):
     dependencies:
       '@ember/test-helpers': 5.4.1(@babel/core@7.29.0)(@glint/template@1.7.4)
       '@embroider/addon-shim': 1.10.2
-      '@embroider/util': 1.13.5(@babel/core@7.29.0)(@glint/environment-ember-loose@1.5.2(@glimmer/component@2.0.0)(@glint/template@1.7.4)(ember-cli-htmlbars@6.3.0)(ember-modifier@4.3.0(@babel/core@7.29.0)))(@glint/template@1.7.4)(ember-source@6.4.0(@glimmer/component@2.0.0)(rsvp@4.8.5))
+      '@embroider/util': 1.13.5(@babel/core@7.29.0)(@glint/environment-ember-loose@1.5.2(@glimmer/component@2.0.0)(@glint/template@1.7.4)(ember-cli-htmlbars@6.3.0)(ember-modifier@4.3.0(@babel/core@7.29.0)))(@glint/template@1.7.4)(ember-source@6.7.0(@glimmer/component@2.0.0)(rsvp@4.8.5))
       '@glimmer/component': 2.0.0
       decorator-transforms: 2.3.1(@babel/core@7.29.0)
       ember-assign-helper: 0.5.1
-      ember-basic-dropdown: 8.11.0(@babel/core@7.29.0)(@ember/string@4.0.1)(@ember/test-helpers@5.4.1(@babel/core@7.29.0)(@glint/template@1.7.4))(@glimmer/component@2.0.0)(@glint/environment-ember-loose@1.5.2(@glimmer/component@2.0.0)(@glint/template@1.7.4)(ember-cli-htmlbars@6.3.0)(ember-modifier@4.3.0(@babel/core@7.29.0)))(@glint/template@1.7.4)(ember-source@6.4.0(@glimmer/component@2.0.0)(rsvp@4.8.5))
+      ember-basic-dropdown: 8.11.0(@babel/core@7.29.0)(@ember/string@4.0.1)(@ember/test-helpers@5.4.1(@babel/core@7.29.0)(@glint/template@1.7.4))(@glimmer/component@2.0.0)(@glint/environment-ember-loose@1.5.2(@glimmer/component@2.0.0)(@glint/template@1.7.4)(ember-cli-htmlbars@6.3.0)(ember-modifier@4.3.0(@babel/core@7.29.0)))(@glint/template@1.7.4)(ember-source@6.7.0(@glimmer/component@2.0.0)(rsvp@4.8.5))
       ember-concurrency: 5.1.0(@babel/core@7.29.0)(@glint/template@1.7.4)
       ember-element-helper: 0.8.8
       ember-modifier: 4.3.0(@babel/core@7.29.0)
@@ -12613,6 +12874,53 @@ snapshots:
       - rsvp
       - supports-color
 
+  ember-source@6.7.0(@glimmer/component@2.0.0)(rsvp@4.8.5):
+    dependencies:
+      '@babel/core': 7.29.0
+      '@ember/edition-utils': 1.2.0
+      '@embroider/addon-shim': 1.10.2
+      '@glimmer/compiler': 0.94.10
+      '@glimmer/component': 2.0.0
+      '@glimmer/destroyable': 0.94.8
+      '@glimmer/global-context': 0.93.4
+      '@glimmer/interfaces': 0.94.6
+      '@glimmer/manager': 0.94.9
+      '@glimmer/node': 0.94.9
+      '@glimmer/opcode-compiler': 0.94.9
+      '@glimmer/owner': 0.93.4
+      '@glimmer/program': 0.94.9
+      '@glimmer/reference': 0.94.8
+      '@glimmer/runtime': 0.94.10
+      '@glimmer/syntax': 0.94.9
+      '@glimmer/util': 0.94.8
+      '@glimmer/validator': 0.94.8
+      '@glimmer/vm': 0.94.8
+      '@glimmer/vm-babel-plugins': 0.93.4(@babel/core@7.29.0)
+      '@simple-dom/interface': 1.4.0
+      backburner.js: 2.8.0
+      broccoli-file-creator: 2.1.1
+      broccoli-funnel: 3.0.8
+      broccoli-merge-trees: 4.2.0
+      chalk: 4.1.2
+      ember-cli-babel: 8.3.1(@babel/core@7.29.0)
+      ember-cli-get-component-path-option: 1.0.0
+      ember-cli-is-package-missing: 1.0.0
+      ember-cli-normalize-entity-name: 1.0.0
+      ember-cli-path-utils: 1.0.0
+      ember-cli-string-utils: 1.1.0
+      ember-cli-typescript-blueprint-polyfill: 0.1.0
+      ember-cli-version-checker: 5.1.2
+      ember-router-generator: 2.0.0
+      inflection: 2.0.1
+      route-recognizer: 0.3.4
+      router_js: 8.0.6(route-recognizer@0.3.4)(rsvp@4.8.5)
+      semver: 7.7.4
+      silent-error: 1.1.1
+      simple-html-tokenizer: 0.5.11
+    transitivePeerDependencies:
+      - rsvp
+      - supports-color
+
   ember-style-modifier@4.5.1(@babel/core@7.29.0)(@ember/string@4.0.1):
     dependencies:
       '@ember/string': 4.0.1

From 8d15a8fe317105966f74e84633b05abdb4fc2a22 Mon Sep 17 00:00:00 2001
From: Markus Sanin <markus.sanin@zeppelin-group.com>
Date: Sun, 15 Feb 2026 18:49:58 +0100
Subject: [PATCH 3/5] Convert docs to vite & minor docs fixes

---
 docs/.gitignore                               |   2 +
 docs/app/app.ts                               |  11 +-
 docs/app/components/snippets/nav-select-1.gts |   4 +-
 docs/app/components/snippets/nav-select-2.gts |  12 +-
 docs/app/components/snippets/nav-select-3.gts |   2 +-
 docs/app/config/environment.d.ts              |  14 -
 docs/app/config/environment.ts                |  33 +
 docs/app/router.ts                            |   4 -
 docs/app/styles/app.scss                      |   1 +
 docs/app/styles/components/code-block.scss    |  10 +
 docs/app/templates/public-pages.gts           |   4 -
 docs/app/templates/public-pages/addons.gts    |   7 -
 .../templates/public-pages/addons/index.gts   |  44 -
 docs/babel.config.cjs                         |  50 ++
 docs/ember-cli-build.js                       |  16 +-
 docs/eslint.config.mjs                        |   9 -
 docs/{app => }/index.html                     |  13 +-
 docs/package.json                             |  32 +-
 docs/testem.js                                |  45 +-
 docs/tests/index.html                         |  21 +-
 docs/tests/test-helper.ts                     |  14 +-
 docs/tsconfig.json                            |   6 +-
 docs/vite.config.mjs                          |  15 +
 .../components/power-calendar-multiple.gts    |   1 -
 pnpm-lock.yaml                                | 818 ++++++++++++++++--
 25 files changed, 969 insertions(+), 219 deletions(-)
 delete mode 100644 docs/app/config/environment.d.ts
 create mode 100644 docs/app/config/environment.ts
 create mode 100644 docs/app/styles/components/code-block.scss
 delete mode 100644 docs/app/templates/public-pages/addons.gts
 delete mode 100644 docs/app/templates/public-pages/addons/index.gts
 create mode 100644 docs/babel.config.cjs
 rename docs/{app => }/index.html (79%)
 create mode 100644 docs/vite.config.mjs

diff --git a/docs/.gitignore b/docs/.gitignore
index f0dde6db..812161fb 100644
--- a/docs/.gitignore
+++ b/docs/.gitignore
@@ -1,3 +1,5 @@
+/tmp/
+
 # compiled output
 /dist/
 /declarations/
diff --git a/docs/app/app.ts b/docs/app/app.ts
index b88e6877..cea72cbe 100644
--- a/docs/app/app.ts
+++ b/docs/app/app.ts
@@ -1,10 +1,15 @@
 import Application from '@ember/application';
 import Resolver from 'ember-resolver';
 import loadInitializers from 'ember-load-initializers';
-import config from 'docs/config/environment';
+import config from "./config/environment";
 import { importSync, isDevelopingApp, macroCondition } from '@embroider/macros';
 import { registerDateLibrary } from 'ember-power-calendar';
 import DateUtils from 'ember-power-calendar-moment';
+import compatModules from "@embroider/virtual/compat-modules";
+import 'moment/dist/locale/es';
+import 'moment/dist/locale/ru';
+import 'moment/dist/locale/fr';
+import 'moment/dist/locale/pt';
 
 if (macroCondition(isDevelopingApp())) {
   importSync('./deprecation-workflow');
@@ -15,7 +20,7 @@ registerDateLibrary(DateUtils);
 export default class App extends Application {
   modulePrefix = config.modulePrefix;
   podModulePrefix = config.podModulePrefix;
-  Resolver = Resolver;
+  Resolver = Resolver.withModules(compatModules);
 }
 
-loadInitializers(App, config.modulePrefix);
+loadInitializers(App, config.modulePrefix, compatModules);
diff --git a/docs/app/components/snippets/nav-select-1.gts b/docs/app/components/snippets/nav-select-1.gts
index 01515044..63280492 100644
--- a/docs/app/components/snippets/nav-select-1.gts
+++ b/docs/app/components/snippets/nav-select-1.gts
@@ -37,12 +37,12 @@ export default class extends Component {
     switch (unit) {
       case 'month': {
         const value = this.months.indexOf(selectedValue);
-        calendar.center.setMonth(value);
+        newCenter.setMonth(value);
         break;
       }
 
       case 'year':
-        calendar.center.setFullYear(parseInt(selectedValue));
+        newCenter.setFullYear(parseInt(selectedValue));
         break;
     }
 
diff --git a/docs/app/components/snippets/nav-select-2.gts b/docs/app/components/snippets/nav-select-2.gts
index 26110be5..d26ba7a1 100644
--- a/docs/app/components/snippets/nav-select-2.gts
+++ b/docs/app/components/snippets/nav-select-2.gts
@@ -2,7 +2,7 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import PowerCalendar, { type PowerCalendarDefaultBlock } from 'ember-power-calendar/components/power-calendar';
-import PowerSelect from 'ember-power-select/components/power-select';
+import PowerSelect, { type Select } from 'ember-power-select/components/power-select';
 import { formatDate, type NormalizeCalendarValue } from 'ember-power-calendar/utils';
 import { fn } from '@ember/helper';
 
@@ -59,24 +59,22 @@ export default class extends Component {
   ];
 
   @action
-  async changeCenter2(unit: 'month' | 'year', calendar: PowerCalendarDefaultBlock, e: Event) {
-    const selectedValue = (e.target as HTMLSelectElement)?.value;
-
+  async changeCenter2(unit: 'month' | 'year', calendar: PowerCalendarDefaultBlock, selectedValue: string, _select: Select, e?: Event) {
     const newCenter = new Date(calendar.center);
 
     switch (unit) {
       case 'month': {
         const value = this.months.indexOf(selectedValue);
-        calendar.center.setMonth(value);
+        newCenter.setMonth(value);
         break;
       }
 
       case 'year':
-        calendar.center.setFullYear(parseInt(selectedValue));
+        newCenter.setFullYear(parseInt(selectedValue));
         break;
     }
 
-    if (calendar.actions.changeCenter) {
+    if (calendar.actions.changeCenter && e) {
       await calendar.actions.changeCenter(newCenter, calendar, e);
     }
   }
diff --git a/docs/app/components/snippets/nav-select-3.gts b/docs/app/components/snippets/nav-select-3.gts
index 472625cb..837e9cda 100644
--- a/docs/app/components/snippets/nav-select-3.gts
+++ b/docs/app/components/snippets/nav-select-3.gts
@@ -30,7 +30,7 @@ export default class extends Component {
 
     const newCenter = new Date(calendar.center);
 
-    calendar.center.setFullYear(parseInt(selectedValue));
+    newCenter.setFullYear(parseInt(selectedValue));
 
     if (calendar.actions.changeCenter) {
       await calendar.actions.changeCenter(newCenter, calendar, e);
diff --git a/docs/app/config/environment.d.ts b/docs/app/config/environment.d.ts
deleted file mode 100644
index a58802a8..00000000
--- a/docs/app/config/environment.d.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * Type declarations for
- *    import config from 'docs/config/environment'
- */
-declare const config: {
-  environment: string;
-  modulePrefix: string;
-  podModulePrefix: string;
-  locationType: 'history' | 'hash' | 'none';
-  rootURL: string;
-  APP: Record<string, unknown>;
-};
-
-export default config;
diff --git a/docs/app/config/environment.ts b/docs/app/config/environment.ts
new file mode 100644
index 00000000..11bc5009
--- /dev/null
+++ b/docs/app/config/environment.ts
@@ -0,0 +1,33 @@
+import loadConfigFromMeta from '@embroider/config-meta-loader';
+import { assert } from '@ember/debug';
+
+const config = loadConfigFromMeta('docs') as unknown;
+
+assert(
+  'config is not an object',
+  typeof config === 'object' && config !== null
+);
+assert(
+  'modulePrefix was not detected on your config',
+  'modulePrefix' in config && typeof config.modulePrefix === 'string'
+);
+assert(
+  'locationType was not detected on your config',
+  'locationType' in config && typeof config.locationType === 'string'
+);
+assert(
+  'rootURL was not detected on your config',
+  'rootURL' in config && typeof config.rootURL === 'string'
+);
+assert(
+  'APP was not detected on your config',
+  'APP' in config && typeof config.APP === 'object'
+);
+
+export default config as {
+  modulePrefix: string;
+  podModulePrefix?: string;
+  locationType: string;
+  rootURL: string;
+  APP: Record<string, unknown>;
+} & Record<string, unknown>;
diff --git a/docs/app/router.ts b/docs/app/router.ts
index 3d61a537..6b99e415 100644
--- a/docs/app/router.ts
+++ b/docs/app/router.ts
@@ -31,10 +31,6 @@ Router.map(function () {
       this.route('nav-select');
       this.route('multiple-months');
     });
-
-    this.route('addons', function () {
-      this.route('index');
-    });
   });
   this.route('helpers-testing');
 });
diff --git a/docs/app/styles/app.scss b/docs/app/styles/app.scss
index 5470f625..0f56e9dd 100644
--- a/docs/app/styles/app.scss
+++ b/docs/app/styles/app.scss
@@ -20,6 +20,7 @@
 @import "components/index";
 @import "components/sidenav";
 @import "components/docs";
+@import 'components/code-block';
 
 // Docs
 @import "docs/code-example";
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/templates/public-pages.gts b/docs/app/templates/public-pages.gts
index 5bc8492d..75a4f3c1 100644
--- a/docs/app/templates/public-pages.gts
+++ b/docs/app/templates/public-pages.gts
@@ -60,10 +60,6 @@ export default class PublicPages extends Component {
             @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-power-calendar"
             class="main-header-nav-link"
diff --git a/docs/app/templates/public-pages/addons.gts b/docs/app/templates/public-pages/addons.gts
deleted file mode 100644
index 991f5174..00000000
--- a/docs/app/templates/public-pages/addons.gts
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <section class="docs">
-    <section class="doc-page">
-      {{outlet}}
-    </section>
-  </section>
-</template>
diff --git a/docs/app/templates/public-pages/addons/index.gts b/docs/app/templates/public-pages/addons/index.gts
deleted file mode 100644
index 70897ea0..00000000
--- a/docs/app/templates/public-pages/addons/index.gts
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-  <h1 class="doc-page-title">Addons</h1>
-
-  <p>
-    Ember Power Calendar is designed to allow users to customize it to fit their
-    needs, and hopefully that work could be also released to the public to others
-    use it.
-  </p>
-
-  <p>
-    If you develop an addon that builds on top of Ember Power Calendar, there are
-    three things you should do:
-  </p>
-
-  <ol>
-    <li>
-      Remember to list it as a <code>dependency</code>, not a <code>devDependency</code> in your addon's
-      <code>package.json</code>. Otherwise, apps will not be able to find any of the
-      components.
-    </li>
-    <li>
-      Add
-      <code>"ember-power-calendar-addon"</code>
-      to the keywords section of your
-      <em>package.json</em>
-      so I can scan the npm registry and find them.
-    </li>
-    <li>Let me know about it!</li>
-  </ol>
-
-  <p>
-    In case you want inspiration, this are some ideas that could be cool:
-  </p>
-
-  <ul>
-    <li>A datepicker with a nice API based on contextual components</li>
-    <li>A calendar-subcomponent that displays weeks instead of months</li>
-    <li>A calendar-subcomponent with infinite scrolling</li>
-  </ul>
-
-  <p>
-    Roll up sleves and let's do it!
-  </p>
-</template>
diff --git a/docs/babel.config.cjs b/docs/babel.config.cjs
new file mode 100644
index 00000000..95729872
--- /dev/null
+++ b/docs/babel.config.cjs
@@ -0,0 +1,50 @@
+const {
+  babelCompatSupport,
+  templateCompatSupport,
+} = require('@embroider/compat/babel');
+
+module.exports = {
+  plugins: [
+    [
+      '@babel/plugin-transform-typescript',
+      {
+        allExtensions: true,
+        onlyRemoveTypeImports: true,
+        allowDeclareFields: true,
+      },
+    ],
+    [
+      'babel-plugin-ember-template-compilation',
+      {
+        compilerPath: 'ember-source/dist/ember-template-compiler.js',
+        enableLegacyModules: [
+          'ember-cli-htmlbars',
+          'ember-cli-htmlbars-inline-precompile',
+          'htmlbars-inline-precompile',
+        ],
+        transforms: [...templateCompatSupport()],
+      },
+    ],
+    [
+      'module:decorator-transforms',
+      {
+        runtime: {
+          import: require.resolve('decorator-transforms/runtime-esm'),
+        },
+      },
+    ],
+    [
+      '@babel/plugin-transform-runtime',
+      {
+        absoluteRuntime: __dirname,
+        useESModules: true,
+        regenerator: false,
+      },
+    ],
+    ...babelCompatSupport(),
+  ],
+
+  generatorOpts: {
+    compact: false,
+  },
+};
diff --git a/docs/ember-cli-build.js b/docs/ember-cli-build.js
index f798d3c5..e734393a 100644
--- a/docs/ember-cli-build.js
+++ b/docs/ember-cli-build.js
@@ -1,8 +1,15 @@
-'use strict';
-
+'use strict';;
 const EmberApp = require('ember-cli/lib/broccoli/ember-app');
 
-module.exports = function (defaults) {
+const {
+  compatBuild
+} = require("@embroider/compat");
+
+module.exports = async function(defaults) {
+  const {
+    buildOnce
+  } = await import("@embroider/vite");
+
   let app = new EmberApp(defaults, {
     autoImport: {
       watchDependencies: ['ember-power-calendar'],
@@ -16,6 +23,5 @@ module.exports = function (defaults) {
     snippetPaths: ['app/components/snippets'],
   });
 
-  const { maybeEmbroider } = require('@embroider/test-setup');
-  return maybeEmbroider(app);
+  return compatBuild(app, buildOnce);
 };
diff --git a/docs/eslint.config.mjs b/docs/eslint.config.mjs
index e579a5b8..420d71aa 100644
--- a/docs/eslint.config.mjs
+++ b/docs/eslint.config.mjs
@@ -30,15 +30,6 @@ const parserOptions = {
     js: {
       ecmaFeatures: { modules: true },
       ecmaVersion: 'latest',
-      requireConfigFile: false,
-      babelOptions: {
-        plugins: [
-          [
-            '@babel/plugin-proposal-decorators',
-            { decoratorsBeforeExport: true },
-          ],
-        ],
-      },
     },
     ts: {
       projectService: true,
diff --git a/docs/app/index.html b/docs/index.html
similarity index 79%
rename from docs/app/index.html
rename to docs/index.html
index 464f8ddc..12ea17ff 100644
--- a/docs/app/index.html
+++ b/docs/index.html
@@ -8,8 +8,8 @@
 
     {{content-for "head"}}
 
-    <link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css">
-    <link integrity="" rel="stylesheet" href="{{rootURL}}assets/docs.css">
+    <link integrity="" rel="stylesheet" href="/@embroider/virtual/vendor.css">
+    <link integrity="" rel="stylesheet" href="/@embroider/virtual/app.css">
     
     <!-- Start Single Page Apps for GitHub Pages -->
     <script type="text/javascript">
@@ -41,8 +41,13 @@
   <body>
     {{content-for "body"}}
 
-    <script src="{{rootURL}}assets/vendor.js"></script>
-    <script src="{{rootURL}}assets/docs.js"></script>
+    <script src="/@embroider/virtual/vendor.js"></script>
+    <script type="module">
+      import Application from './app/app';
+      import environment from './app/config/environment';
+
+      Application.create(environment.APP);
+    </script>
 
     {{content-for "body-footer"}}
   </body>
diff --git a/docs/package.json b/docs/package.json
index 9d9b4f46..d7540c4e 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -11,7 +11,7 @@
     "test": "tests"
   },
   "scripts": {
-    "build": "ember build --environment=production",
+    "build": "vite build",
     "format": "prettier . --cache --write",
     "lint": "concurrently \"pnpm:lint:*(!fix)\" --names \"lint:\" --prefixColors auto",
     "lint:css": "stylelint \"**/*.css\" --allow-empty-input",
@@ -23,9 +23,9 @@
     "lint:js": "eslint . --cache",
     "lint:js:fix": "eslint . --fix",
     "lint:types": "glint",
-    "start": "ember serve",
+    "start": "vite",
     "test": "concurrently \"pnpm:lint\" \"pnpm:test:*\" --names \"lint,test:\" --prefixColors auto",
-    "test:ember": "ember test"
+    "test:ember": "vite build --mode development && ember test --path dist"
   },
   "dependenciesMeta": {
     "ember-power-calendar": {
@@ -36,11 +36,17 @@
     "@babel/core": "^7.29.0",
     "@babel/eslint-parser": "^7.28.6",
     "@babel/plugin-proposal-decorators": "^7.29.0",
+    "@babel/plugin-transform-runtime": "^7.26.9",
+    "@babel/plugin-transform-typescript": "^7.28.0",
     "@ember/optional-features": "^2.2.0",
     "@ember/string": "^4.0.1",
     "@ember/test-helpers": "^5.4.1",
+    "@embroider/compat": "^4.0.3",
+    "@embroider/config-meta-loader": "^1.0.0",
+    "@embroider/core": "^4.0.3",
     "@embroider/macros": "^1.19.7",
     "@embroider/test-setup": "^4.0.0",
+    "@embroider/vite": "^1.1.1",
     "@eslint/js": "^9.35.0",
     "@glimmer/component": "^2.0.0",
     "@glimmer/tracking": "^1.1.2",
@@ -48,23 +54,19 @@
     "@glint/environment-ember-loose": "^1.5.2",
     "@glint/environment-ember-template-imports": "^1.5.2",
     "@glint/template": "^1.7.4",
+    "@rollup/plugin-babel": "^6.0.4",
     "@tsconfig/ember": "^3.0.12",
     "@types/qunit": "^2.19.13",
-    "broccoli-asset-rev": "^3.0.0",
+    "babel-plugin-ember-template-compilation": "^2.3.0",
     "concurrently": "^9.2.1",
+    "decorator-transforms": "^2.3.0",
     "ember-auto-import": "^2.12.0",
     "ember-basic-dropdown": "^8.11.0",
     "ember-cli": "~6.7.2",
-    "ember-cli-app-version": "^7.0.0",
     "ember-cli-babel": "^8.3.1",
-    "ember-cli-clean-css": "^3.0.0",
-    "ember-cli-dependency-checker": "^3.3.3",
     "ember-cli-deprecation-workflow": "^3.4.0",
     "ember-cli-htmlbars": "^6.3.0",
-    "ember-cli-inject-live-reload": "^2.1.0",
     "ember-cli-sass": "^11.0.1",
-    "ember-cli-sri": "^2.1.1",
-    "ember-cli-terser": "^4.0.2",
     "ember-concurrency": "^5.1.0",
     "ember-load-initializers": "^3.0.1",
     "ember-modifier": "^4.3.0",
@@ -76,7 +78,6 @@
     "ember-resolver": "^13.1.1",
     "ember-source": "~6.7.0",
     "ember-source-channel-url": "^3.0.0",
-    "ember-template-imports": "^4.4.0",
     "ember-template-lint": "^7.9.3",
     "ember-truth-helpers": "^5.0.0",
     "ember-try": "^4.0.0",
@@ -86,7 +87,6 @@
     "eslint-plugin-n": "^17.23.2",
     "eslint-plugin-qunit": "^8.2.6",
     "globals": "^16.4.0",
-    "loader.js": "^4.7.0",
     "moment": "^2.30.1",
     "postcss": "^8.5.6",
     "prettier": "^3.8.1",
@@ -102,12 +102,16 @@
     "tracked-built-ins": "^4.1.0",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.55.0",
-    "webpack": "^5.105.2"
+    "vite": "^6.0.0"
   },
   "engines": {
     "node": ">= 20.11"
   },
   "ember": {
     "edition": "octane"
+  },
+  "exports": {
+    "./tests/*": "./tests/*",
+    "./*": "./app/*"
   }
-}
+}
\ No newline at end of file
diff --git a/docs/testem.js b/docs/testem.js
index ed2f3712..051b27f7 100644
--- a/docs/testem.js
+++ b/docs/testem.js
@@ -1,23 +1,24 @@
-'use strict';
-
-module.exports = {
-  test_page: 'tests/index.html?hidepassed',
-  disable_watching: true,
-  launch_in_ci: ['Chrome'],
-  launch_in_dev: ['Chrome'],
-  browser_start_timeout: 120,
-  browser_args: {
-    Chrome: {
-      ci: [
-        // --no-sandbox is needed when running Chrome inside a container
-        process.env.CI ? '--no-sandbox' : null,
-        '--headless',
-        '--disable-dev-shm-usage',
-        '--disable-software-rasterizer',
-        '--mute-audio',
-        '--remote-debugging-port=0',
-        '--window-size=1440,900',
-      ].filter(Boolean),
+'use strict';;
+if (typeof module !== "undefined") {
+  module.exports = {
+    test_page: 'tests/index.html?hidepassed',
+    disable_watching: true,
+    launch_in_ci: ['Chrome'],
+    launch_in_dev: ['Chrome'],
+    browser_start_timeout: 120,
+    browser_args: {
+      Chrome: {
+        ci: [
+          // --no-sandbox is needed when running Chrome inside a container
+          process.env.CI ? '--no-sandbox' : null,
+          '--headless',
+          '--disable-dev-shm-usage',
+          '--disable-software-rasterizer',
+          '--mute-audio',
+          '--remote-debugging-port=0',
+          '--window-size=1440,900',
+        ].filter(Boolean),
+      },
     },
-  },
-};
+  };
+}
diff --git a/docs/tests/index.html b/docs/tests/index.html
index 9ef0017a..551d7728 100644
--- a/docs/tests/index.html
+++ b/docs/tests/index.html
@@ -9,9 +9,9 @@
     {{content-for "head"}}
     {{content-for "test-head"}}
 
-    <link rel="stylesheet" href="{{rootURL}}assets/vendor.css">
-    <link rel="stylesheet" href="{{rootURL}}assets/docs.css">
-    <link rel="stylesheet" href="{{rootURL}}assets/test-support.css">
+    <link rel="stylesheet" href="/@embroider/virtual/vendor.css">
+    <link rel="stylesheet" href="/@embroider/virtual/app.css">
+    <link rel="stylesheet" href="/@embroider/virtual/test-support.css">
 
     {{content-for "head-footer"}}
     {{content-for "test-head-footer"}}
@@ -28,12 +28,17 @@
     </div>
 
     <script src="/testem.js" integrity="" data-embroider-ignore></script>
-    <script src="{{rootURL}}assets/vendor.js"></script>
-    <script src="{{rootURL}}assets/test-support.js"></script>
-    <script src="{{rootURL}}assets/docs.js"></script>
-    <script src="{{rootURL}}assets/tests.js"></script>
+    <script src="/@embroider/virtual/vendor.js"></script>
+    <script src="/@embroider/virtual/test-support.js"></script>
+    
+    <script type="module">import "ember-testing";</script>
+    <script type="module">
+      import { start } from './test-helper';
+      import.meta.glob("./**/*.{js,ts,gjs,gts}", { eager: true });
+      start();
+    </script>
 
     {{content-for "body-footer"}}
-    {{content-for "test-body-footer"}}
+    
   </body>
 </html>
diff --git a/docs/tests/test-helper.ts b/docs/tests/test-helper.ts
index bd22ed03..24ffceff 100644
--- a/docs/tests/test-helper.ts
+++ b/docs/tests/test-helper.ts
@@ -3,12 +3,12 @@ import config from 'docs/config/environment';
 import * as QUnit from 'qunit';
 import { setApplication } from '@ember/test-helpers';
 import { setup } from 'qunit-dom';
-import { loadTests } from 'ember-qunit/test-loader';
-import { start, setupEmberOnerrorValidation } from 'ember-qunit';
+import { start as qunitStart, setupEmberOnerrorValidation } from 'ember-qunit';
 
-setApplication(Application.create(config.APP));
+export function start() {
+  setApplication(Application.create(config.APP));
 
-setup(QUnit.assert);
-setupEmberOnerrorValidation();
-loadTests();
-start();
+  setup(QUnit.assert);
+  setupEmberOnerrorValidation();
+  qunitStart();
+}
diff --git a/docs/tsconfig.json b/docs/tsconfig.json
index 68857652..5a86e296 100644
--- a/docs/tsconfig.json
+++ b/docs/tsconfig.json
@@ -14,6 +14,10 @@
       "docs/*": ["app/*"],
       "*": ["types/*"]
     },
-    "types": ["ember-source/types"]
+    "types": [
+      "ember-source/types",
+      "@embroider/core/virtual",
+      "vite/client"
+    ]
   }
 }
diff --git a/docs/vite.config.mjs b/docs/vite.config.mjs
new file mode 100644
index 00000000..219253db
--- /dev/null
+++ b/docs/vite.config.mjs
@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite';
+import { extensions, classicEmberSupport, ember } from '@embroider/vite';
+import { babel } from '@rollup/plugin-babel';
+
+export default defineConfig({
+  plugins: [
+    classicEmberSupport(),
+    ember(),
+    // extra plugins here
+    babel({
+      babelHelpers: 'runtime',
+      extensions,
+    }),
+  ],
+});
diff --git a/ember-power-calendar/src/components/power-calendar-multiple.gts b/ember-power-calendar/src/components/power-calendar-multiple.gts
index d98c4c03..39d1ea3b 100644
--- a/ember-power-calendar/src/components/power-calendar-multiple.gts
+++ b/ember-power-calendar/src/components/power-calendar-multiple.gts
@@ -261,7 +261,6 @@ export default class PowerCalendarMultiple extends Component<PowerCalendarMultip
     calendar: PowerCalendarMultipleAPI,
     e?: Event,
   ) {
-    console.log('dayOrDays', dayOrDays);
     assert(
       `The select action expects an array of date objects, or a date object. ${typeof dayOrDays} was recieved instead.`,
       isArray(dayOrDays) ||
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 352c5796..aeb1fd46 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -47,6 +47,12 @@ importers:
       '@babel/plugin-proposal-decorators':
         specifier: ^7.29.0
         version: 7.29.0(@babel/core@7.29.0)
+      '@babel/plugin-transform-runtime':
+        specifier: ^7.26.9
+        version: 7.29.0(@babel/core@7.29.0)
+      '@babel/plugin-transform-typescript':
+        specifier: ^7.28.0
+        version: 7.28.6(@babel/core@7.29.0)
       '@ember/optional-features':
         specifier: ^2.2.0
         version: 2.3.0
@@ -56,12 +62,24 @@ importers:
       '@ember/test-helpers':
         specifier: ^5.4.1
         version: 5.4.1(@babel/core@7.29.0)(@glint/template@1.7.4)
+      '@embroider/compat':
+        specifier: ^4.0.3
+        version: 4.1.13(@embroider/core@4.4.3(@glint/template@1.7.4))(@glint/template@1.7.4)
+      '@embroider/config-meta-loader':
+        specifier: ^1.0.0
+        version: 1.0.0
+      '@embroider/core':
+        specifier: ^4.0.3
+        version: 4.4.3(@glint/template@1.7.4)
       '@embroider/macros':
         specifier: ^1.19.7
         version: 1.19.7(@babel/core@7.29.0)(@glint/template@1.7.4)
       '@embroider/test-setup':
         specifier: ^4.0.0
-        version: 4.0.0(@embroider/core@3.5.9(@glint/template@1.7.4))
+        version: 4.0.0(@embroider/compat@4.1.13(@embroider/core@4.4.3(@glint/template@1.7.4))(@glint/template@1.7.4))(@embroider/core@4.4.3(@glint/template@1.7.4))
+      '@embroider/vite':
+        specifier: ^1.1.1
+        version: 1.5.2(@embroider/core@4.4.3(@glint/template@1.7.4))(@glint/template@1.7.4)(rollup@4.57.1)(vite@6.4.1(@types/node@25.2.3)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))
       '@eslint/js':
         specifier: ^9.35.0
         version: 9.39.2
@@ -83,18 +101,24 @@ importers:
       '@glint/template':
         specifier: ^1.7.4
         version: 1.7.4
+      '@rollup/plugin-babel':
+        specifier: ^6.0.4
+        version: 6.1.0(@babel/core@7.29.0)(rollup@4.57.1)
       '@tsconfig/ember':
         specifier: ^3.0.12
         version: 3.0.12
       '@types/qunit':
         specifier: ^2.19.13
         version: 2.19.13
-      broccoli-asset-rev:
-        specifier: ^3.0.0
-        version: 3.0.0
+      babel-plugin-ember-template-compilation:
+        specifier: ^2.3.0
+        version: 2.4.1
       concurrently:
         specifier: ^9.2.1
         version: 9.2.1
+      decorator-transforms:
+        specifier: ^2.3.0
+        version: 2.3.1(@babel/core@7.29.0)
       ember-auto-import:
         specifier: ^2.12.0
         version: 2.12.0(@glint/template@1.7.4)(webpack@5.105.2)
@@ -104,36 +128,18 @@ importers:
       ember-cli:
         specifier: ~6.7.2
         version: 6.7.2(@types/node@25.2.3)(handlebars@4.7.8)(underscore@1.13.7)
-      ember-cli-app-version:
-        specifier: ^7.0.0
-        version: 7.0.0(ember-source@6.7.0(@glimmer/component@2.0.0)(rsvp@4.8.5))
       ember-cli-babel:
         specifier: ^8.3.1
         version: 8.3.1(@babel/core@7.29.0)
-      ember-cli-clean-css:
-        specifier: ^3.0.0
-        version: 3.0.0
-      ember-cli-dependency-checker:
-        specifier: ^3.3.3
-        version: 3.3.3(ember-cli@6.7.2(@types/node@25.2.3)(handlebars@4.7.8)(underscore@1.13.7))
       ember-cli-deprecation-workflow:
         specifier: ^3.4.0
         version: 3.4.0(ember-source@6.7.0(@glimmer/component@2.0.0)(rsvp@4.8.5))
       ember-cli-htmlbars:
         specifier: ^6.3.0
         version: 6.3.0
-      ember-cli-inject-live-reload:
-        specifier: ^2.1.0
-        version: 2.1.0
       ember-cli-sass:
         specifier: ^11.0.1
         version: 11.0.1
-      ember-cli-sri:
-        specifier: ^2.1.1
-        version: 2.1.1
-      ember-cli-terser:
-        specifier: ^4.0.2
-        version: 4.0.2
       ember-concurrency:
         specifier: ^5.1.0
         version: 5.1.0(@babel/core@7.29.0)(@glint/template@1.7.4)
@@ -167,9 +173,6 @@ importers:
       ember-source-channel-url:
         specifier: ^3.0.0
         version: 3.0.0(encoding@0.1.13)
-      ember-template-imports:
-        specifier: ^4.4.0
-        version: 4.4.0
       ember-template-lint:
         specifier: ^7.9.3
         version: 7.9.3
@@ -197,9 +200,6 @@ importers:
       globals:
         specifier: ^16.4.0
         version: 16.5.0
-      loader.js:
-        specifier: ^4.7.0
-        version: 4.7.0
       moment:
         specifier: ^2.30.1
         version: 2.30.1
@@ -245,9 +245,9 @@ importers:
       typescript-eslint:
         specifier: ^8.55.0
         version: 8.55.0(eslint@9.39.2)(typescript@5.9.3)
-      webpack:
-        specifier: ^5.105.2
-        version: 5.105.2
+      vite:
+        specifier: ^6.0.0
+        version: 6.4.1(@types/node@25.2.3)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
 
   ember-power-calendar:
     dependencies:
@@ -784,6 +784,11 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
+  '@babel/plugin-syntax-dynamic-import@7.8.3':
+    resolution: {integrity: sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
   '@babel/plugin-syntax-import-assertions@7.28.6':
     resolution: {integrity: sha512-pSJUpFHdx9z5nqTSirOCMtYVP2wFgoWhP0p3g8ONK/4IHhLIBd0B9NYqAvIUAhq+OkhO4VM1tENCt0cjlsNShw==}
     engines: {node: '>=6.9.0'}
@@ -1276,10 +1281,24 @@ packages:
     resolution: {integrity: sha512-EfI9cJ5/3QSUJtwm7x1MXrx3TEa2p7RNgSHefy7fvGm8/DP1xUFL25nST1NaHbHcqR1UhMlrTtv5iUIDoVzeQQ==}
     engines: {node: 12.* || 14.* || >= 16}
 
+  '@embroider/compat@4.1.13':
+    resolution: {integrity: sha512-TUvc1bv95deXBdhbgnuNAISbgky5Muo+2x38H4qaw56B//9ppmwqnqw0LIVTXlezY40qgwrW8/ztLW6qIbsPeg==}
+    engines: {node: '>= 20.19.*'}
+    peerDependencies:
+      '@embroider/core': ^4.4.3
+
+  '@embroider/config-meta-loader@1.0.0':
+    resolution: {integrity: sha512-qznkdjgEGPe6NM94hZNXvOm/WhrJwBh8FtSQZ+nGjh9TOjY42tOiTEevFuM0onNXUn6bpdGzmjwKo2xY2jxQxQ==}
+    engines: {node: 12.* || 14.* || >= 16}
+
   '@embroider/core@3.5.9':
     resolution: {integrity: sha512-e6ChqCI2I4/UMnnGRS6be2pY3ssJDXfjrF1dtLt2e6l4EM2IIlT1ndtPAYUGSYSO9JB5WxNpO8Wirj88mVh97Q==}
     engines: {node: 12.* || 14.* || >= 16}
 
+  '@embroider/core@4.4.3':
+    resolution: {integrity: sha512-kj651cfYIRf4V8OUnMhuPy1mo7lF1CpCCXyw7kD77qkeBXdvAzCSQFGKANxwuOVkcTW0kU74l3Dv9gGp2NrHxA==}
+    engines: {node: 12.* || 14.* || >= 16}
+
   '@embroider/macros@1.19.7':
     resolution: {integrity: sha512-KOdoJ2QwNpWFwRP8q4CutMjs4QAgZ0rjNJAO+hYZkWFxM3DOQFyqvImNDx0m/Z/sXEnE1XwUN8NpMCNYyq801A==}
     engines: {node: 12.* || 14.* || >= 16}
@@ -1329,6 +1348,168 @@ packages:
       '@glint/template':
         optional: true
 
+  '@embroider/vite@1.5.2':
+    resolution: {integrity: sha512-vaD2rSugRGAsBgoF6a098JqyL8grPAoPTx627wvxfUhE5uW19hGi7ybpTD3Zlkn4pKNKR9k9tPW3sP1Cnvbm4A==}
+    peerDependencies:
+      '@embroider/core': ^4.4.3
+      vite: '>= 5.2.0'
+
+  '@esbuild/aix-ppc64@0.25.12':
+    resolution: {integrity: sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [aix]
+
+  '@esbuild/android-arm64@0.25.12':
+    resolution: {integrity: sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [android]
+
+  '@esbuild/android-arm@0.25.12':
+    resolution: {integrity: sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [android]
+
+  '@esbuild/android-x64@0.25.12':
+    resolution: {integrity: sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [android]
+
+  '@esbuild/darwin-arm64@0.25.12':
+    resolution: {integrity: sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@esbuild/darwin-x64@0.25.12':
+    resolution: {integrity: sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@esbuild/freebsd-arm64@0.25.12':
+    resolution: {integrity: sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@esbuild/freebsd-x64@0.25.12':
+    resolution: {integrity: sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@esbuild/linux-arm64@0.25.12':
+    resolution: {integrity: sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@esbuild/linux-arm@0.25.12':
+    resolution: {integrity: sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [linux]
+
+  '@esbuild/linux-ia32@0.25.12':
+    resolution: {integrity: sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [linux]
+
+  '@esbuild/linux-loong64@0.25.12':
+    resolution: {integrity: sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng==}
+    engines: {node: '>=18'}
+    cpu: [loong64]
+    os: [linux]
+
+  '@esbuild/linux-mips64el@0.25.12':
+    resolution: {integrity: sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw==}
+    engines: {node: '>=18'}
+    cpu: [mips64el]
+    os: [linux]
+
+  '@esbuild/linux-ppc64@0.25.12':
+    resolution: {integrity: sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@esbuild/linux-riscv64@0.25.12':
+    resolution: {integrity: sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w==}
+    engines: {node: '>=18'}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@esbuild/linux-s390x@0.25.12':
+    resolution: {integrity: sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg==}
+    engines: {node: '>=18'}
+    cpu: [s390x]
+    os: [linux]
+
+  '@esbuild/linux-x64@0.25.12':
+    resolution: {integrity: sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [linux]
+
+  '@esbuild/netbsd-arm64@0.25.12':
+    resolution: {integrity: sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [netbsd]
+
+  '@esbuild/netbsd-x64@0.25.12':
+    resolution: {integrity: sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [netbsd]
+
+  '@esbuild/openbsd-arm64@0.25.12':
+    resolution: {integrity: sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openbsd]
+
+  '@esbuild/openbsd-x64@0.25.12':
+    resolution: {integrity: sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@esbuild/openharmony-arm64@0.25.12':
+    resolution: {integrity: sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@esbuild/sunos-x64@0.25.12':
+    resolution: {integrity: sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [sunos]
+
+  '@esbuild/win32-arm64@0.25.12':
+    resolution: {integrity: sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@esbuild/win32-ia32@0.25.12':
+    resolution: {integrity: sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@esbuild/win32-x64@0.25.12':
+    resolution: {integrity: sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [win32]
+
   '@eslint-community/eslint-utils@4.9.1':
     resolution: {integrity: sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -2024,6 +2205,9 @@ packages:
   '@types/acorn@4.0.6':
     resolution: {integrity: sha512-veQTnWP+1D/xbxVrPC3zHnCZRjSrKfhbMUlEA43iMZLu7EsnTtkJklIuwrCPbOi8YkvDQAiW05VQQFvvz9oieQ==}
 
+  '@types/babel__code-frame@7.27.0':
+    resolution: {integrity: sha512-Dwlo+LrxDx/0SpfmJ/BKveHf7QXWvLBLc+x03l5sbzykj3oB9nHygCpSECF1a+s+QIxbghe+KHqC90vGtxLRAA==}
+
   '@types/body-parser@1.19.6':
     resolution: {integrity: sha512-HLFeCYgz89uk22N5Qg3dvGvsv46B8GLvKKo1zKG4NybA8U2DiEO3w9lqGg29t/tfLRJpJ6iQxnVw4OnB7MoM9g==}
 
@@ -2373,6 +2557,11 @@ packages:
     engines: {'0': node >= 0.8.0}
     hasBin: true
 
+  ansi-html@0.0.9:
+    resolution: {integrity: sha512-ozbS3LuenHVxNRh/wdnN16QapUHzauqSomAl1jwwJRRsGwFwtj644lIhxfWu0Fy0acCij2+AEgHvjscq3dlVXg==}
+    engines: {'0': node >= 0.8.0}
+    hasBin: true
+
   ansi-regex@2.1.1:
     resolution: {integrity: sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==}
     engines: {node: '>=0.10.0'}
@@ -2582,6 +2771,12 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0
 
+  babel-plugin-debug-macros@2.0.0:
+    resolution: {integrity: sha512-7ZaLtXIY01PAPhLyjV3OACePnl+X5iQO7F4O/sOJHTfMf/36zyu14uVUxNiZmOUntYBsyT/VVplf1LrH6NcwvQ==}
+    engines: {node: '>=16'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
   babel-plugin-ember-data-packages-polyfill@0.1.2:
     resolution: {integrity: sha512-kTHnOwoOXfPXi00Z8yAgyD64+jdSXk3pknnS7NlqnCKAU6YDkXZ4Y7irl66kaZjZn0FBBt0P4YOZFZk85jYOww==}
     engines: {node: 6.* || 8.* || 10.* || >= 12.*}
@@ -2598,6 +2793,10 @@ packages:
     resolution: {integrity: sha512-n+ktQ3JeyWrpRutSyPn2PsHeH+A94SVm+iUoogzf9VUqpP47FfWem24gpQXhn+p6+x5/BpuFJXMLXWt7ZoYAKA==}
     engines: {node: '>= 12.*'}
 
+  babel-plugin-ember-template-compilation@3.1.0:
+    resolution: {integrity: sha512-kk7cGyblE9n4MB98rqw2wuUW7YLD5FM+Tr97gNSYL4e8DBMQndLuWaWNx1wfd7o00NjFhhoTR+HZs2nj23g2Lw==}
+    engines: {node: '>= 18.*'}
+
   babel-plugin-htmlbars-inline-precompile@5.3.1:
     resolution: {integrity: sha512-QWjjFgSKtSRIcsBhJmEwS2laIdrA6na8HAlc/pEAhjHgQsah/gMiBFRZvbQTy//hWxR4BMwV7/Mya7q5H8uHeA==}
     engines: {node: 10.* || >= 12.*}
@@ -2635,6 +2834,10 @@ packages:
   babel-remove-types@1.1.0:
     resolution: {integrity: sha512-2wszSY8Pll8uefPFrJcOb2cP67epjpDnLADtzgQ9u1WgFJmBdJAkx5MGISjFCg/56Q8YgzA/o9RBMpScjhf+dw==}
 
+  babylon@6.18.0:
+    resolution: {integrity: sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==}
+    hasBin: true
+
   backbone@1.6.1:
     resolution: {integrity: sha512-YQzWxOrIgL6BoFnZjThVN99smKYhyEXXFyJJ2lsF1wJLyo4t+QjmkLrH8/fN22FZ4ykF70Xq7PgTugJVR4zS9Q==}
 
@@ -2688,6 +2891,9 @@ packages:
     resolution: {integrity: sha512-nAihlQsYGyc5Bwq6+EsubvANYGExeJKHDO3RjnvwU042fawQTQfM3Kxn7IHUXQOz4bzfwsGYYHGSvXyW4zOGLg==}
     engines: {node: '>=0.8'}
 
+  bind-decorator@1.0.11:
+    resolution: {integrity: sha512-yzkH0uog6Vv/vQ9+rhSKxecnqGUZHYncg7qS7voz3Q76+TAi1SGiOKk2mlOvusQnFz9Dc4BC/NMkeXu11YgjJg==}
+
   bl@4.1.0:
     resolution: {integrity: sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==}
 
@@ -2884,9 +3090,20 @@ packages:
     resolution: {integrity: sha512-sWi3b3fTUSVPDsz5KsQ5eCQNVAtLgkIE/HYFkEZXR/07clqmd4E/gFiuwSaqa9b+QTXc1Uemfb7TVWbEIURWDg==}
     engines: {node: 8.* || >= 10.*}
 
+  broccoli@4.0.0:
+    resolution: {integrity: sha512-p5el5/ig0QeRGFPkLMPdm7KblkTm44eicEWfwnRTz6hncghVuRZ0+XDAtCi7ynxobeE/mey5Q7lAulFkgNzxVA==}
+    engines: {node: '>= 20.19.*'}
+
   browser-process-hrtime@1.0.0:
     resolution: {integrity: sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==}
 
+  browserslist-to-esbuild@2.1.1:
+    resolution: {integrity: sha512-KN+mty6C3e9AN8Z5dI1xeN15ExcRNeISoC3g7V0Kax/MMF9MSoYA2G7lkTTcVUFntiEjkpI0HNgqJC1NjdyNUw==}
+    engines: {node: '>=18'}
+    hasBin: true
+    peerDependencies:
+      browserslist: '*'
+
   browserslist@4.28.1:
     resolution: {integrity: sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
@@ -2988,6 +3205,10 @@ packages:
     resolution: {integrity: sha512-zgVZuo2WcZgfUEmsn6eO3kINexW8RAE4maiQ8QNs8CtpPCSyMiYsULR3HQYkm3w8FIA3SberyMJMSldGsW+U3w==}
     engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
 
+  chalk@5.6.2:
+    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==}
 
@@ -3148,6 +3369,10 @@ packages:
   comma-separated-tokens@2.0.3:
     resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
 
+  commander@14.0.3:
+    resolution: {integrity: sha512-H+y0Jo/T1RZ9qPP4Eh1pkcQcLRglraJaSLoyOtHxu6AapkjWVCy2Sit1QQ4x3Dng8qDlSsZEet7g5Pq06MvTgw==}
+    engines: {node: '>=20'}
+
   commander@2.20.3:
     resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
 
@@ -4109,6 +4334,11 @@ packages:
   es-toolkit@1.44.0:
     resolution: {integrity: sha512-6penXeZalaV88MM3cGkFZZfOoLGWshWWfdy0tWw/RlVVyhvMaWSBTOvXNeiW3e5FwdS5ePW0LGEu17zT139ktg==}
 
+  esbuild@0.25.12:
+    resolution: {integrity: sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   escalade@3.2.0:
     resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
     engines: {node: '>=6'}
@@ -4497,6 +4727,10 @@ packages:
     resolution: {integrity: sha512-6jvvn/12IC4quLBL1KNokxC7wWTvYncaVUYSoxWw7YykPLuRrnv4qdHcSOywOI5RpkOVGeQRtWM8/q+G6W6qfQ==}
     engines: {node: '>= 8'}
 
+  findup-sync@5.0.0:
+    resolution: {integrity: sha512-MzwXju70AuyflbgeOhzvQWAvvQdo1XL0A9bVvlXsYcFEBM87WR4OakL4OfZq+QRmr+duJubio+UtNQCPsVESzQ==}
+    engines: {node: '>= 10.13.0'}
+
   fireworm@0.7.2:
     resolution: {integrity: sha512-GjebTzq+NKKhfmDxjKq3RXwQcN9xRmZWhnnuC9L+/x5wBQtR0aaQM50HsjrzJ2wc28v1vSdfOpELok0TKR4ddg==}
 
@@ -4727,6 +4961,10 @@ packages:
     deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
     hasBin: true
 
+  glob@13.0.3:
+    resolution: {integrity: sha512-/g3B0mC+4x724v1TgtBlBtt2hPi/EWptsIAmXUx9Z2rvBYleQcsrmaOzd5LyL50jf/Soi83ZDJmw2+XqvH/EeA==}
+    engines: {node: 20 || >=22}
+
   glob@5.0.15:
     resolution: {integrity: sha512-c9IPMazfRITpmAAKi22dK1VKxGDX9ehhqfABDriL/lzO92xcUKEJPQHrVA/2YHSNFB4iFlykVmWvwo48nr3OxA==}
     deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
@@ -4951,6 +5189,10 @@ packages:
     resolution: {integrity: sha512-lks+lVC8dgGyh97jxvxeYTWQFvh4uw4yC12gVl63Cg30sjPX4wuGcdkICVXDAESr6OJGjqGA8Iz5mkeN6zlD7A==}
     engines: {node: '>= 0.6'}
 
+  http-errors@2.0.0:
+    resolution: {integrity: sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==}
+    engines: {node: '>= 0.8'}
+
   http-errors@2.0.1:
     resolution: {integrity: sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==}
     engines: {node: '>= 0.8'}
@@ -5036,6 +5278,9 @@ packages:
     resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
     engines: {node: '>=6'}
 
+  import-meta-resolve@4.2.0:
+    resolution: {integrity: sha512-Iqv2fzaTQN28s/FwZAoFq0ZSs/7hMAHJVX+w8PZl3cY19Pxk6jFFalxQoIfW2826i/fDLXv8IiEZRIT0lDuWcg==}
+
   imurmurhash@0.1.4:
     resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
     engines: {node: '>=0.8.19'}
@@ -5462,6 +5707,15 @@ packages:
       canvas:
         optional: true
 
+  jsdom@26.1.0:
+    resolution: {integrity: sha512-Cvc9WUhxSMEo4McES3P7oK3QaXldCfNWp7pl2NNeiIFlCoLr3kfq9kb1fxftiwk1FLV7CvpvDfonxtzUDeSOPg==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      canvas: ^3.0.0
+    peerDependenciesMeta:
+      canvas:
+        optional: true
+
   jsesc@3.1.0:
     resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
     engines: {node: '>=6'}
@@ -5699,6 +5953,10 @@ packages:
   lru-cache@10.4.3:
     resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
 
+  lru-cache@11.2.6:
+    resolution: {integrity: sha512-ESL2CrkS/2wTPfuend7Zhkzo2u0daGJ/A2VucJOgQ/C48S/zB8MMeMHSGKYpXhIjbPxfuezITkaBH1wqv00DDQ==}
+    engines: {node: 20 || >=22}
+
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
@@ -5910,6 +6168,10 @@ packages:
     resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
     engines: {node: '>= 0.6'}
 
+  mime-types@3.0.2:
+    resolution: {integrity: sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==}
+    engines: {node: '>=18'}
+
   mime@1.6.0:
     resolution: {integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==}
     engines: {node: '>=4'}
@@ -6458,6 +6720,10 @@ packages:
     resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
     engines: {node: '>=16 || 14 >=14.18'}
 
+  path-scurry@2.0.1:
+    resolution: {integrity: sha512-oWyT4gICAu+kaA7QWk/jvCHWarMKNs6pXOGWKDTr7cw4IGcUbW+PeTfbaQiLGheFRpjo6O9J0PmyMfQPjH71oA==}
+    engines: {node: 20 || >=22}
+
   path-to-regexp@0.1.12:
     resolution: {integrity: sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==}
 
@@ -6955,6 +7221,11 @@ packages:
     resolution: {integrity: sha512-l0OE8wL34P4nJH/H2ffoaniAokM2qSmrtXHmlpvYr5AVVX8msAyW0l8NVJFDxlSK4u3Uh/f41cQheDVdnYijwQ==}
     hasBin: true
 
+  rimraf@6.1.2:
+    resolution: {integrity: sha512-cFCkPslJv7BAXJsYlK1dZsbP8/ZNLkCAQ0bi1hf5EKX2QHegmDFEFA6QhuYJlk7UDdc+02JjO80YSOrWPpw06g==}
+    engines: {node: 20 || >=22}
+    hasBin: true
+
   rollup-plugin-copy-assets@2.0.3:
     resolution: {integrity: sha512-ETShhQGb9SoiwcNrvb3BhUNSGR89Jao0+XxxfzzLW1YsUzx8+rMO4z9oqWWmo6OHUmfNQRvqRj0cAyPkS9lN9w==}
     peerDependencies:
@@ -7114,6 +7385,10 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
+  send@0.18.0:
+    resolution: {integrity: sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==}
+    engines: {node: '>= 0.8.0'}
+
   send@0.19.2:
     resolution: {integrity: sha512-VMbMxbDeehAxpOtWJXlcUS5E8iXh6QmN+BkRX1GARS3wRaXEEgzCcB10gTQazO42tpNIya8xIyNx8fll1OFPrg==}
     engines: {node: '>= 0.8.0'}
@@ -7345,6 +7620,10 @@ packages:
     resolution: {integrity: sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==}
     engines: {node: '>= 0.6'}
 
+  statuses@2.0.1:
+    resolution: {integrity: sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==}
+    engines: {node: '>= 0.8'}
+
   statuses@2.0.2:
     resolution: {integrity: sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==}
     engines: {node: '>= 0.8'}
@@ -7963,6 +8242,46 @@ packages:
   vfile@6.0.3:
     resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
 
+  vite@6.4.1:
+    resolution: {integrity: sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^18.0.0 || ^20.0.0 || >=22.0.0
+      jiti: '>=1.21.0'
+      less: '*'
+      lightningcss: ^1.21.0
+      sass: '*'
+      sass-embedded: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.16.0
+      tsx: ^4.8.1
+      yaml: ^2.4.2
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      jiti:
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
+
   vscode-jsonrpc@8.1.0:
     resolution: {integrity: sha512-6TDy/abTQk+zDGYazgbIPc+4JoXdwC8NHU9Pbn4UJP1fehUyZmM4RHp5IthX7A6L5KS30PRui+j+tbbMMMafdw==}
     engines: {node: '>=14.0.0'}
@@ -8528,6 +8847,11 @@ snapshots:
       '@babel/core': 7.29.0
       '@babel/helper-plugin-utils': 7.28.6
 
+  '@babel/plugin-syntax-dynamic-import@7.8.3(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-plugin-utils': 7.28.6
+
   '@babel/plugin-syntax-import-assertions@7.28.6(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
@@ -9186,31 +9510,50 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@embroider/core@3.5.9(@glint/template@1.7.4)':
+  '@embroider/compat@4.1.13(@embroider/core@4.4.3(@glint/template@1.7.4))(@glint/template@1.7.4)':
     dependencies:
+      '@babel/code-frame': 7.29.0
       '@babel/core': 7.29.0
-      '@babel/parser': 7.29.0
+      '@babel/plugin-syntax-decorators': 7.28.6(@babel/core@7.29.0)
+      '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.29.0)
+      '@babel/plugin-syntax-typescript': 7.28.6(@babel/core@7.29.0)
+      '@babel/plugin-transform-runtime': 7.29.0(@babel/core@7.29.0)
+      '@babel/preset-env': 7.29.0(@babel/core@7.29.0)
+      '@babel/runtime': 7.28.6
       '@babel/traverse': 7.29.0
+      '@embroider/core': 4.4.3(@glint/template@1.7.4)
       '@embroider/macros': 1.19.7(@babel/core@7.29.0)(@glint/template@1.7.4)
-      '@embroider/shared-internals': 2.9.2
+      '@types/babel__code-frame': 7.27.0
       assert-never: 1.4.0
-      babel-plugin-ember-template-compilation: 2.3.0
-      broccoli-node-api: 1.7.0
+      babel-import-util: 3.0.1
+      babel-plugin-debug-macros: 2.0.0(@babel/core@7.29.0)
+      babel-plugin-ember-template-compilation: 3.1.0
+      babel-plugin-ember-template-compilation-2: babel-plugin-ember-template-compilation@2.4.1
+      babel-plugin-syntax-dynamic-import: 6.18.0
+      babylon: 6.18.0
+      bind-decorator: 1.0.11
+      broccoli: 4.0.0
+      broccoli-concat: 4.2.7
+      broccoli-file-creator: 2.1.1
+      broccoli-funnel: 3.0.8
+      broccoli-merge-trees: 4.2.0
       broccoli-persistent-filter: 3.1.3
       broccoli-plugin: 4.0.7
       broccoli-source: 3.0.1
+      chalk: 4.1.2
       debug: 4.4.3
       fast-sourcemap-concat: 2.1.1
-      filesize: 10.1.6
       fs-extra: 9.1.0
       fs-tree-diff: 2.0.1
-      handlebars: 4.7.8
-      js-string-escape: 1.0.1
-      jsdom: 25.0.1
+      jsdom: 26.1.0
       lodash: 4.17.23
+      pkg-up: 3.1.0
       resolve: 1.22.11
       resolve-package-path: 4.0.3
+      resolve.exports: 2.0.3
       semver: 7.7.4
+      symlink-or-copy: 1.3.1
+      tree-sync: 2.1.0
       typescript-memoize: 1.1.1
       walk-sync: 3.0.0
     transitivePeerDependencies:
@@ -9220,10 +9563,82 @@ snapshots:
       - supports-color
       - utf-8-validate
 
-  '@embroider/macros@1.19.7(@babel/core@7.29.0)(@glint/template@1.7.4)':
+  '@embroider/config-meta-loader@1.0.0': {}
+
+  '@embroider/core@3.5.9(@glint/template@1.7.4)':
     dependencies:
-      '@embroider/shared-internals': 3.0.2
-      assert-never: 1.4.0
+      '@babel/core': 7.29.0
+      '@babel/parser': 7.29.0
+      '@babel/traverse': 7.29.0
+      '@embroider/macros': 1.19.7(@babel/core@7.29.0)(@glint/template@1.7.4)
+      '@embroider/shared-internals': 2.9.2
+      assert-never: 1.4.0
+      babel-plugin-ember-template-compilation: 2.3.0
+      broccoli-node-api: 1.7.0
+      broccoli-persistent-filter: 3.1.3
+      broccoli-plugin: 4.0.7
+      broccoli-source: 3.0.1
+      debug: 4.4.3
+      fast-sourcemap-concat: 2.1.1
+      filesize: 10.1.6
+      fs-extra: 9.1.0
+      fs-tree-diff: 2.0.1
+      handlebars: 4.7.8
+      js-string-escape: 1.0.1
+      jsdom: 25.0.1
+      lodash: 4.17.23
+      resolve: 1.22.11
+      resolve-package-path: 4.0.3
+      semver: 7.7.4
+      typescript-memoize: 1.1.1
+      walk-sync: 3.0.0
+    transitivePeerDependencies:
+      - '@glint/template'
+      - bufferutil
+      - canvas
+      - supports-color
+      - utf-8-validate
+
+  '@embroider/core@4.4.3(@glint/template@1.7.4)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/parser': 7.29.0
+      '@babel/traverse': 7.29.0
+      '@embroider/macros': 1.19.7(@babel/core@7.29.0)(@glint/template@1.7.4)
+      '@embroider/reverse-exports': 0.2.0
+      '@embroider/shared-internals': 3.0.2
+      assert-never: 1.4.0
+      babel-plugin-ember-template-compilation: 3.1.0
+      broccoli-node-api: 1.7.0
+      broccoli-persistent-filter: 3.1.3
+      broccoli-plugin: 4.0.7
+      broccoli-source: 3.0.1
+      debug: 4.4.3
+      escape-string-regexp: 4.0.0
+      fast-sourcemap-concat: 2.1.1
+      fs-extra: 9.1.0
+      fs-tree-diff: 2.0.1
+      handlebars: 4.7.8
+      js-string-escape: 1.0.1
+      jsdom: 25.0.1
+      lodash: 4.17.23
+      resolve: 1.22.11
+      resolve-package-path: 4.0.3
+      resolve.exports: 2.0.3
+      semver: 7.7.4
+      typescript-memoize: 1.1.1
+      walk-sync: 3.0.0
+    transitivePeerDependencies:
+      - '@glint/template'
+      - bufferutil
+      - canvas
+      - supports-color
+      - utf-8-validate
+
+  '@embroider/macros@1.19.7(@babel/core@7.29.0)(@glint/template@1.7.4)':
+    dependencies:
+      '@embroider/shared-internals': 3.0.2
+      assert-never: 1.4.0
       babel-import-util: 3.0.1
       ember-cli-babel: 8.3.1(@babel/core@7.29.0)
       find-up: 5.0.0
@@ -9276,6 +9691,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@embroider/test-setup@4.0.0(@embroider/compat@4.1.13(@embroider/core@4.4.3(@glint/template@1.7.4))(@glint/template@1.7.4))(@embroider/core@4.4.3(@glint/template@1.7.4))':
+    dependencies:
+      lodash: 4.17.23
+      resolve: 1.22.11
+    optionalDependencies:
+      '@embroider/compat': 4.1.13(@embroider/core@4.4.3(@glint/template@1.7.4))(@glint/template@1.7.4)
+      '@embroider/core': 4.4.3(@glint/template@1.7.4)
+
   '@embroider/test-setup@4.0.0(@embroider/core@3.5.9(@glint/template@1.7.4))':
     dependencies:
       lodash: 4.17.23
@@ -9309,6 +9732,112 @@ snapshots:
       - '@babel/core'
       - supports-color
 
+  '@embroider/vite@1.5.2(@embroider/core@4.4.3(@glint/template@1.7.4))(@glint/template@1.7.4)(rollup@4.57.1)(vite@6.4.1(@types/node@25.2.3)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@embroider/core': 4.4.3(@glint/template@1.7.4)
+      '@embroider/macros': 1.19.7(@babel/core@7.29.0)(@glint/template@1.7.4)
+      '@embroider/reverse-exports': 0.2.0
+      '@rollup/pluginutils': 5.3.0(rollup@4.57.1)
+      assert-never: 1.4.0
+      browserslist: 4.28.1
+      browserslist-to-esbuild: 2.1.1(browserslist@4.28.1)
+      chalk: 5.6.2
+      content-tag: 4.1.0
+      debug: 4.4.3
+      fast-glob: 3.3.3
+      fs-extra: 10.1.0
+      jsdom: 25.0.1
+      send: 0.18.0
+      source-map-url: 0.4.1
+      terser: 5.46.0
+      vite: 6.4.1(@types/node@25.2.3)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
+    transitivePeerDependencies:
+      - '@glint/template'
+      - bufferutil
+      - canvas
+      - rollup
+      - supports-color
+      - utf-8-validate
+
+  '@esbuild/aix-ppc64@0.25.12':
+    optional: true
+
+  '@esbuild/android-arm64@0.25.12':
+    optional: true
+
+  '@esbuild/android-arm@0.25.12':
+    optional: true
+
+  '@esbuild/android-x64@0.25.12':
+    optional: true
+
+  '@esbuild/darwin-arm64@0.25.12':
+    optional: true
+
+  '@esbuild/darwin-x64@0.25.12':
+    optional: true
+
+  '@esbuild/freebsd-arm64@0.25.12':
+    optional: true
+
+  '@esbuild/freebsd-x64@0.25.12':
+    optional: true
+
+  '@esbuild/linux-arm64@0.25.12':
+    optional: true
+
+  '@esbuild/linux-arm@0.25.12':
+    optional: true
+
+  '@esbuild/linux-ia32@0.25.12':
+    optional: true
+
+  '@esbuild/linux-loong64@0.25.12':
+    optional: true
+
+  '@esbuild/linux-mips64el@0.25.12':
+    optional: true
+
+  '@esbuild/linux-ppc64@0.25.12':
+    optional: true
+
+  '@esbuild/linux-riscv64@0.25.12':
+    optional: true
+
+  '@esbuild/linux-s390x@0.25.12':
+    optional: true
+
+  '@esbuild/linux-x64@0.25.12':
+    optional: true
+
+  '@esbuild/netbsd-arm64@0.25.12':
+    optional: true
+
+  '@esbuild/netbsd-x64@0.25.12':
+    optional: true
+
+  '@esbuild/openbsd-arm64@0.25.12':
+    optional: true
+
+  '@esbuild/openbsd-x64@0.25.12':
+    optional: true
+
+  '@esbuild/openharmony-arm64@0.25.12':
+    optional: true
+
+  '@esbuild/sunos-x64@0.25.12':
+    optional: true
+
+  '@esbuild/win32-arm64@0.25.12':
+    optional: true
+
+  '@esbuild/win32-ia32@0.25.12':
+    optional: true
+
+  '@esbuild/win32-x64@0.25.12':
+    optional: true
+
   '@eslint-community/eslint-utils@4.9.1(eslint@9.39.2)':
     dependencies:
       eslint: 9.39.2
@@ -9993,6 +10522,8 @@ snapshots:
     dependencies:
       '@types/estree': 1.0.8
 
+  '@types/babel__code-frame@7.27.0': {}
+
   '@types/body-parser@1.19.6':
     dependencies:
       '@types/connect': 3.4.38
@@ -10412,6 +10943,8 @@ snapshots:
 
   ansi-html@0.0.7: {}
 
+  ansi-html@0.0.9: {}
+
   ansi-regex@2.1.1: {}
 
   ansi-regex@3.0.1: {}
@@ -10627,6 +11160,12 @@ snapshots:
       '@babel/core': 7.29.0
       semver: 5.7.2
 
+  babel-plugin-debug-macros@2.0.0(@babel/core@7.29.0):
+    dependencies:
+      '@babel/core': 7.29.0
+      babel-import-util: 2.1.1
+      semver: 7.7.4
+
   babel-plugin-ember-data-packages-polyfill@0.1.2:
     dependencies:
       '@ember-data/rfc395-data': 0.0.4
@@ -10645,6 +11184,12 @@ snapshots:
       '@glimmer/syntax': 0.95.0
       babel-import-util: 3.0.1
 
+  babel-plugin-ember-template-compilation@3.1.0:
+    dependencies:
+      '@glimmer/syntax': 0.95.0
+      babel-import-util: 3.0.1
+      import-meta-resolve: 4.2.0
+
   babel-plugin-htmlbars-inline-precompile@5.3.1:
     dependencies:
       babel-plugin-ember-modules-api-polyfill: 3.5.0
@@ -10712,6 +11257,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  babylon@6.18.0: {}
+
   backbone@1.6.1:
     dependencies:
       underscore: 1.13.7
@@ -10758,6 +11305,8 @@ snapshots:
 
   binaryextensions@2.3.0: {}
 
+  bind-decorator@1.0.11: {}
+
   bl@4.1.0:
     dependencies:
       buffer: 5.7.1
@@ -11277,8 +11826,36 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  broccoli@4.0.0:
+    dependencies:
+      ansi-html: 0.0.9
+      broccoli-node-info: 2.2.0
+      broccoli-source: 3.0.1
+      commander: 14.0.3
+      connect: 3.7.0
+      console-ui: 3.1.2
+      findup-sync: 5.0.0
+      handlebars: 4.7.8
+      heimdalljs: 0.2.6
+      heimdalljs-logger: 0.1.10
+      mime-types: 3.0.2
+      resolve-path: 1.4.0
+      rimraf: 6.1.2
+      sane: 5.0.1
+      tmp: 0.2.5
+      tree-sync: 2.1.0
+      underscore.string: 3.3.6
+      watch-detector: 1.0.2
+    transitivePeerDependencies:
+      - supports-color
+
   browser-process-hrtime@1.0.0: {}
 
+  browserslist-to-esbuild@2.1.1(browserslist@4.28.1):
+    dependencies:
+      browserslist: 4.28.1
+      meow: 13.2.0
+
   browserslist@4.28.1:
     dependencies:
       baseline-browser-mapping: 2.9.19
@@ -11429,6 +12006,8 @@ snapshots:
 
   chalk@5.4.1: {}
 
+  chalk@5.6.2: {}
+
   character-entities-html4@2.1.0: {}
 
   character-entities-legacy@3.0.0: {}
@@ -11573,6 +12152,8 @@ snapshots:
 
   comma-separated-tokens@2.0.3: {}
 
+  commander@14.0.3: {}
+
   commander@2.20.3: {}
 
   commander@2.8.1:
@@ -12079,14 +12660,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  ember-cli-app-version@7.0.0(ember-source@6.7.0(@glimmer/component@2.0.0)(rsvp@4.8.5)):
-    dependencies:
-      ember-cli-babel: 7.26.11
-      ember-source: 6.7.0(@glimmer/component@2.0.0)(rsvp@4.8.5)
-      git-repo-info: 2.1.1
-    transitivePeerDependencies:
-      - supports-color
-
   ember-cli-babel-plugin-helpers@1.1.1: {}
 
   ember-cli-babel@7.26.11:
@@ -12174,15 +12747,6 @@ snapshots:
       resolve: 1.22.11
       semver: 5.7.2
 
-  ember-cli-dependency-checker@3.3.3(ember-cli@6.7.2(@types/node@25.2.3)(handlebars@4.7.8)(underscore@1.13.7)):
-    dependencies:
-      chalk: 2.4.2
-      ember-cli: 6.7.2(@types/node@25.2.3)(handlebars@4.7.8)(underscore@1.13.7)
-      find-yarn-workspace-root: 2.0.0
-      is-git-url: 1.0.0
-      resolve: 1.22.11
-      semver: 5.7.2
-
   ember-cli-deprecation-workflow@3.4.0(ember-source@6.4.0(@glimmer/component@2.0.0)(rsvp@4.8.5)):
     dependencies:
       '@babel/core': 7.29.0
@@ -13138,6 +13702,35 @@ snapshots:
 
   es-toolkit@1.44.0: {}
 
+  esbuild@0.25.12:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.25.12
+      '@esbuild/android-arm': 0.25.12
+      '@esbuild/android-arm64': 0.25.12
+      '@esbuild/android-x64': 0.25.12
+      '@esbuild/darwin-arm64': 0.25.12
+      '@esbuild/darwin-x64': 0.25.12
+      '@esbuild/freebsd-arm64': 0.25.12
+      '@esbuild/freebsd-x64': 0.25.12
+      '@esbuild/linux-arm': 0.25.12
+      '@esbuild/linux-arm64': 0.25.12
+      '@esbuild/linux-ia32': 0.25.12
+      '@esbuild/linux-loong64': 0.25.12
+      '@esbuild/linux-mips64el': 0.25.12
+      '@esbuild/linux-ppc64': 0.25.12
+      '@esbuild/linux-riscv64': 0.25.12
+      '@esbuild/linux-s390x': 0.25.12
+      '@esbuild/linux-x64': 0.25.12
+      '@esbuild/netbsd-arm64': 0.25.12
+      '@esbuild/netbsd-x64': 0.25.12
+      '@esbuild/openbsd-arm64': 0.25.12
+      '@esbuild/openbsd-x64': 0.25.12
+      '@esbuild/openharmony-arm64': 0.25.12
+      '@esbuild/sunos-x64': 0.25.12
+      '@esbuild/win32-arm64': 0.25.12
+      '@esbuild/win32-ia32': 0.25.12
+      '@esbuild/win32-x64': 0.25.12
+
   escalade@3.2.0: {}
 
   escape-goat@4.0.0: {}
@@ -13702,6 +14295,13 @@ snapshots:
       micromatch: 4.0.8
       resolve-dir: 1.0.1
 
+  findup-sync@5.0.0:
+    dependencies:
+      detect-file: 1.0.0
+      is-glob: 4.0.3
+      micromatch: 4.0.8
+      resolve-dir: 1.0.1
+
   fireworm@0.7.2:
     dependencies:
       async: 0.2.10
@@ -14002,6 +14602,12 @@ snapshots:
       package-json-from-dist: 1.0.1
       path-scurry: 1.11.1
 
+  glob@13.0.3:
+    dependencies:
+      minimatch: 10.2.0
+      minipass: 7.1.2
+      path-scurry: 2.0.1
+
   glob@5.0.15:
     dependencies:
       inflight: 1.0.6
@@ -14289,6 +14895,14 @@ snapshots:
       setprototypeof: 1.1.0
       statuses: 1.5.0
 
+  http-errors@2.0.0:
+    dependencies:
+      depd: 2.0.0
+      inherits: 2.0.4
+      setprototypeof: 1.2.0
+      statuses: 2.0.1
+      toidentifier: 1.0.1
+
   http-errors@2.0.1:
     dependencies:
       depd: 2.0.0
@@ -14385,6 +14999,8 @@ snapshots:
       parent-module: 1.0.1
       resolve-from: 4.0.0
 
+  import-meta-resolve@4.2.0: {}
+
   imurmurhash@0.1.4: {}
 
   include-path-searcher@0.1.0: {}
@@ -14852,6 +15468,33 @@ snapshots:
       - supports-color
       - utf-8-validate
 
+  jsdom@26.1.0:
+    dependencies:
+      cssstyle: 4.6.0
+      data-urls: 5.0.0
+      decimal.js: 10.6.0
+      html-encoding-sniffer: 4.0.0
+      http-proxy-agent: 7.0.2
+      https-proxy-agent: 7.0.6
+      is-potential-custom-element-name: 1.0.1
+      nwsapi: 2.2.23
+      parse5: 7.3.0
+      rrweb-cssom: 0.8.0
+      saxes: 6.0.0
+      symbol-tree: 3.2.4
+      tough-cookie: 5.1.2
+      w3c-xmlserializer: 5.0.0
+      webidl-conversions: 7.0.0
+      whatwg-encoding: 3.1.1
+      whatwg-mimetype: 4.0.0
+      whatwg-url: 14.2.0
+      ws: 8.19.0
+      xml-name-validator: 5.0.0
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+
   jsesc@3.1.0: {}
 
   json-buffer@3.0.0: {}
@@ -15079,6 +15722,8 @@ snapshots:
 
   lru-cache@10.4.3: {}
 
+  lru-cache@11.2.6: {}
+
   lru-cache@5.1.1:
     dependencies:
       yallist: 3.1.1
@@ -15421,6 +16066,10 @@ snapshots:
     dependencies:
       mime-db: 1.52.0
 
+  mime-types@3.0.2:
+    dependencies:
+      mime-db: 1.54.0
+
   mime@1.6.0: {}
 
   mimic-fn@1.2.0: {}
@@ -15893,7 +16542,7 @@ snapshots:
       ky: 1.14.3
       registry-auth-token: 5.1.1
       registry-url: 6.0.1
-      semver: 7.6.3
+      semver: 7.7.4
 
   package-json@6.5.0:
     dependencies:
@@ -15970,6 +16619,11 @@ snapshots:
       lru-cache: 10.4.3
       minipass: 7.1.2
 
+  path-scurry@2.0.1:
+    dependencies:
+      lru-cache: 11.2.6
+      minipass: 7.1.2
+
   path-to-regexp@0.1.12: {}
 
   path-type@4.0.0: {}
@@ -16470,6 +17124,11 @@ snapshots:
     dependencies:
       glob: 10.5.0
 
+  rimraf@6.1.2:
+    dependencies:
+      glob: 13.0.3
+      package-json-from-dist: 1.0.1
+
   rollup-plugin-copy-assets@2.0.3(rollup@4.57.1):
     dependencies:
       fs-extra: 7.0.1
@@ -16678,6 +17337,24 @@ snapshots:
 
   semver@7.7.4: {}
 
+  send@0.18.0:
+    dependencies:
+      debug: 2.6.9
+      depd: 2.0.0
+      destroy: 1.2.0
+      encodeurl: 1.0.2
+      escape-html: 1.0.3
+      etag: 1.8.1
+      fresh: 0.5.2
+      http-errors: 2.0.0
+      mime: 1.6.0
+      ms: 2.1.3
+      on-finished: 2.4.1
+      range-parser: 1.2.1
+      statuses: 2.0.1
+    transitivePeerDependencies:
+      - supports-color
+
   send@0.19.2:
     dependencies:
       debug: 2.6.9
@@ -16989,6 +17666,8 @@ snapshots:
 
   statuses@1.5.0: {}
 
+  statuses@2.0.1: {}
+
   statuses@2.0.2: {}
 
   stdin-discarder@0.2.2: {}
@@ -17725,7 +18404,7 @@ snapshots:
       is-npm: 6.1.0
       latest-version: 9.0.0
       pupa: 3.3.0
-      semver: 7.6.3
+      semver: 7.7.4
       xdg-basedir: 5.1.0
 
   uri-js@4.4.1:
@@ -17781,6 +18460,21 @@ snapshots:
       '@types/unist': 3.0.3
       vfile-message: 4.0.3
 
+  vite@6.4.1(@types/node@25.2.3)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2):
+    dependencies:
+      esbuild: 0.25.12
+      fdir: 6.5.0(picomatch@4.0.3)
+      picomatch: 4.0.3
+      postcss: 8.5.6
+      rollup: 4.57.1
+      tinyglobby: 0.2.15
+    optionalDependencies:
+      '@types/node': 25.2.3
+      fsevents: 2.3.3
+      sass: 1.97.3
+      terser: 5.46.0
+      yaml: 2.8.2
+
   vscode-jsonrpc@8.1.0: {}
 
   vscode-languageserver-protocol@3.17.3:

From c3c1c520a3f393454a1daa3ea17a61d06128baf2 Mon Sep 17 00:00:00 2001
From: Markus Sanin <markus.sanin@zeppelin-group.com>
Date: Sun, 15 Feb 2026 18:50:48 +0100
Subject: [PATCH 4/5] Run lint fix

---
 docs/app/app.ts                               |  4 +-
 .../days-grid-without-mon-or-wed.gts          |  5 +-
 docs/app/components/snippets/datepicker-1.gts |  6 +-
 .../components/snippets/how-to-use-it-1.gts   |  2 +-
 .../components/snippets/how-to-use-it-5.gts   |  4 +-
 .../components/snippets/multiple-months-1.gts |  7 ++-
 .../components/snippets/multiple-months-2.gts |  5 +-
 .../snippets/multiple-selection-1.gts         |  5 +-
 .../snippets/multiple-selection-3.gts         |  5 +-
 docs/app/components/snippets/nav-select-1.gts | 14 ++++-
 docs/app/components/snippets/nav-select-2.gts | 25 +++++++--
 docs/app/components/snippets/nav-select-3.gts |  9 ++-
 .../components/snippets/range-selection-2.gts |  5 +-
 .../components/snippets/range-selection-3.gts | 17 ++++--
 .../components/snippets/range-selection-4.gts | 15 +++--
 .../components/snippets/range-selection-5.gts | 15 +++--
 .../components/snippets/range-selection-6.gts | 14 +++--
 .../components/snippets/range-selection-7.gts | 10 ++--
 docs/app/components/snippets/the-days-0.gts   | 12 +++-
 docs/app/components/snippets/the-days-2.gts   |  2 +-
 docs/app/components/snippets/the-days-3.gts   |  5 +-
 docs/app/components/snippets/the-days-8.gts   |  3 +-
 docs/app/components/snippets/the-nav-2.gts    |  5 +-
 docs/app/config/environment.ts                | 10 ++--
 docs/app/initializers/global-locale.ts        |  3 +-
 docs/app/styles/app.scss                      |  2 +-
 docs/app/templates/public-pages.gts           |  9 ++-
 docs/app/templates/public-pages/cookbook.gts  | 16 +++---
 .../templates/public-pages/cookbook/index.gts | 22 ++++----
 .../public-pages/cookbook/multiple-months.gts | 14 ++---
 .../public-pages/cookbook/nav-select.gts      | 19 +++----
 docs/app/templates/public-pages/docs.gts      | 31 ++++++----
 .../public-pages/docs/action-handling.gts     | 56 ++++++++++---------
 .../public-pages/docs/api-reference.gts       | 16 +++---
 .../public-pages/docs/how-to-use-it.gts       | 23 ++++----
 docs/app/templates/public-pages/docs/i18n.gts | 14 +++--
 .../app/templates/public-pages/docs/index.gts | 43 +++++++-------
 .../public-pages/docs/installation.gts        | 33 +++++------
 .../public-pages/docs/multiple-selection.gts  | 11 ++--
 .../public-pages/docs/range-selection.gts     | 30 +++++-----
 .../public-pages/docs/test-helpers.gts        | 16 +++---
 .../templates/public-pages/docs/the-days.gts  | 36 ++++++------
 .../templates/public-pages/docs/the-nav.gts   | 32 ++++++-----
 docs/app/templates/public-pages/index.gts     |  8 +--
 docs/ember-cli-build.js                       | 12 ++--
 docs/package.json                             |  2 +-
 docs/testem.js                                |  4 +-
 docs/tsconfig.json                            |  6 +-
 48 files changed, 375 insertions(+), 287 deletions(-)

diff --git a/docs/app/app.ts b/docs/app/app.ts
index cea72cbe..e6628a92 100644
--- a/docs/app/app.ts
+++ b/docs/app/app.ts
@@ -1,11 +1,11 @@
 import Application from '@ember/application';
 import Resolver from 'ember-resolver';
 import loadInitializers from 'ember-load-initializers';
-import config from "./config/environment";
+import config from './config/environment';
 import { importSync, isDevelopingApp, macroCondition } from '@embroider/macros';
 import { registerDateLibrary } from 'ember-power-calendar';
 import DateUtils from 'ember-power-calendar-moment';
-import compatModules from "@embroider/virtual/compat-modules";
+import compatModules from '@embroider/virtual/compat-modules';
 import 'moment/dist/locale/es';
 import 'moment/dist/locale/ru';
 import 'moment/dist/locale/fr';
diff --git a/docs/app/components/days-grid-without-mon-or-wed.gts b/docs/app/components/days-grid-without-mon-or-wed.gts
index 5c06d043..57388be4 100644
--- a/docs/app/components/days-grid-without-mon-or-wed.gts
+++ b/docs/app/components/days-grid-without-mon-or-wed.gts
@@ -50,7 +50,10 @@ export default class DaysGridWithoutMonOrWed extends PowerCalendarDays {
           {{#each week.days as |day|}}
             <div
               class="ember-power-calendar-day
-                {{if day.isCurrentMonth 'ember-power-calendar-day--current-month'}}"
+                {{if
+                  day.isCurrentMonth
+                  'ember-power-calendar-day--current-month'
+                }}"
             >
               {{formatDate day.date "D"}}
             </div>
diff --git a/docs/app/components/snippets/datepicker-1.gts b/docs/app/components/snippets/datepicker-1.gts
index a393d1ce..2fb378ca 100644
--- a/docs/app/components/snippets/datepicker-1.gts
+++ b/docs/app/components/snippets/datepicker-1.gts
@@ -4,7 +4,11 @@ import { action } from '@ember/object';
 import { on } from '@ember/modifier';
 import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown';
 import PowerCalendar from 'ember-power-calendar/components/power-calendar';
-import { formatDate, type NormalizeCalendarValue, type PowerCalendarDay } from 'ember-power-calendar/utils';
+import {
+  formatDate,
+  type NormalizeCalendarValue,
+  type PowerCalendarDay,
+} from 'ember-power-calendar/utils';
 
 export default class extends Component {
   @tracked center: Date | undefined = undefined;
diff --git a/docs/app/components/snippets/how-to-use-it-1.gts b/docs/app/components/snippets/how-to-use-it-1.gts
index 08a6eb01..4a83fd52 100644
--- a/docs/app/components/snippets/how-to-use-it-1.gts
+++ b/docs/app/components/snippets/how-to-use-it-1.gts
@@ -1,4 +1,4 @@
-import PowerCalendar from "ember-power-calendar/components/power-calendar";
+import PowerCalendar from 'ember-power-calendar/components/power-calendar';
 
 <template>
   <PowerCalendar as |calendar|>
diff --git a/docs/app/components/snippets/how-to-use-it-5.gts b/docs/app/components/snippets/how-to-use-it-5.gts
index 033c95c5..f89c185b 100644
--- a/docs/app/components/snippets/how-to-use-it-5.gts
+++ b/docs/app/components/snippets/how-to-use-it-5.gts
@@ -1,5 +1,3 @@
 import PowerCalendar from 'ember-power-calendar/components/power-calendar';
 
-<template>
-  <PowerCalendar />
-</template>
+<template><PowerCalendar /></template>
diff --git a/docs/app/components/snippets/multiple-months-1.gts b/docs/app/components/snippets/multiple-months-1.gts
index b183b41c..26273a35 100644
--- a/docs/app/components/snippets/multiple-months-1.gts
+++ b/docs/app/components/snippets/multiple-months-1.gts
@@ -1,7 +1,12 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
-import { add, type NormalizeCalendarValue, type NormalizeRangeActionValue, type SelectedPowerCalendarRange } from 'ember-power-calendar/utils';
+import {
+  add,
+  type NormalizeCalendarValue,
+  type NormalizeRangeActionValue,
+  type SelectedPowerCalendarRange,
+} from 'ember-power-calendar/utils';
 import PowerCalendarRange from 'ember-power-calendar/components/power-calendar-range';
 import powerCalendarFormatDate from 'ember-power-calendar/helpers/power-calendar-format-date';
 
diff --git a/docs/app/components/snippets/multiple-months-2.gts b/docs/app/components/snippets/multiple-months-2.gts
index f9212a0c..96c978d7 100644
--- a/docs/app/components/snippets/multiple-months-2.gts
+++ b/docs/app/components/snippets/multiple-months-2.gts
@@ -3,7 +3,10 @@ import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import PowerCalendarRange from 'ember-power-calendar/components/power-calendar-range';
 import powerCalendarFormatDate from 'ember-power-calendar/helpers/power-calendar-format-date';
-import type { NormalizeRangeActionValue, SelectedPowerCalendarRange } from 'ember-power-calendar/utils';
+import type {
+  NormalizeRangeActionValue,
+  SelectedPowerCalendarRange,
+} from 'ember-power-calendar/utils';
 
 export default class extends Component {
   @tracked selected: SelectedPowerCalendarRange | undefined = undefined;
diff --git a/docs/app/components/snippets/multiple-selection-1.gts b/docs/app/components/snippets/multiple-selection-1.gts
index af10aaa6..2c2a8c65 100644
--- a/docs/app/components/snippets/multiple-selection-1.gts
+++ b/docs/app/components/snippets/multiple-selection-1.gts
@@ -2,7 +2,10 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import PowerCalendarMultiple from 'ember-power-calendar/components/power-calendar-multiple';
-import type { NormalizeCalendarValue, NormalizeMultipleActionValue } from 'ember-power-calendar/utils';
+import type {
+  NormalizeCalendarValue,
+  NormalizeMultipleActionValue,
+} from 'ember-power-calendar/utils';
 
 export default class extends Component {
   @tracked center: Date | undefined = new Date('2016-05-17');
diff --git a/docs/app/components/snippets/multiple-selection-3.gts b/docs/app/components/snippets/multiple-selection-3.gts
index 3711c9be..8bb08ef6 100644
--- a/docs/app/components/snippets/multiple-selection-3.gts
+++ b/docs/app/components/snippets/multiple-selection-3.gts
@@ -2,7 +2,10 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import PowerCalendarMultiple from 'ember-power-calendar/components/power-calendar-multiple';
-import { formatDate, type NormalizeMultipleActionValue } from 'ember-power-calendar/utils';
+import {
+  formatDate,
+  type NormalizeMultipleActionValue,
+} from 'ember-power-calendar/utils';
 
 export default class extends Component {
   @tracked center: Date = new Date('2016-05-17');
diff --git a/docs/app/components/snippets/nav-select-1.gts b/docs/app/components/snippets/nav-select-1.gts
index 63280492..9767c56c 100644
--- a/docs/app/components/snippets/nav-select-1.gts
+++ b/docs/app/components/snippets/nav-select-1.gts
@@ -1,7 +1,9 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
-import PowerCalendar, { type PowerCalendarDefaultBlock } from 'ember-power-calendar/components/power-calendar';
+import PowerCalendar, {
+  type PowerCalendarDefaultBlock,
+} from 'ember-power-calendar/components/power-calendar';
 import { formatDate } from 'ember-power-calendar/utils';
 import { fn } from '@ember/helper';
 import { on } from '@ember/modifier';
@@ -26,10 +28,16 @@ export default class extends Component {
     'December',
   ];
 
-  years: string[] = Array(...(Array(80) as never[])).map((_, i) => `${i + 1940}`);
+  years: string[] = Array(...(Array(80) as never[])).map(
+    (_, i) => `${i + 1940}`,
+  );
 
   @action
-  async changeCenter(unit: 'month' | 'year', calendar: PowerCalendarDefaultBlock, e: Event) {
+  async changeCenter(
+    unit: 'month' | 'year',
+    calendar: PowerCalendarDefaultBlock,
+    e: Event,
+  ) {
     const selectedValue = (e.target as HTMLSelectElement)?.value;
 
     const newCenter = new Date(calendar.center);
diff --git a/docs/app/components/snippets/nav-select-2.gts b/docs/app/components/snippets/nav-select-2.gts
index d26ba7a1..9e4f063d 100644
--- a/docs/app/components/snippets/nav-select-2.gts
+++ b/docs/app/components/snippets/nav-select-2.gts
@@ -1,9 +1,16 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
-import PowerCalendar, { type PowerCalendarDefaultBlock } from 'ember-power-calendar/components/power-calendar';
-import PowerSelect, { type Select } from 'ember-power-select/components/power-select';
-import { formatDate, type NormalizeCalendarValue } from 'ember-power-calendar/utils';
+import PowerCalendar, {
+  type PowerCalendarDefaultBlock,
+} from 'ember-power-calendar/components/power-calendar';
+import PowerSelect, {
+  type Select,
+} from 'ember-power-select/components/power-select';
+import {
+  formatDate,
+  type NormalizeCalendarValue,
+} from 'ember-power-calendar/utils';
 import { fn } from '@ember/helper';
 
 export default class extends Component {
@@ -25,8 +32,8 @@ export default class extends Component {
   ];
 
   groupedYears: {
-      groupName: string;
-      options: string[];
+    groupName: string;
+    options: string[];
   }[] = [
     {
       groupName: "40's",
@@ -59,7 +66,13 @@ export default class extends Component {
   ];
 
   @action
-  async changeCenter2(unit: 'month' | 'year', calendar: PowerCalendarDefaultBlock, selectedValue: string, _select: Select, e?: Event) {
+  async changeCenter2(
+    unit: 'month' | 'year',
+    calendar: PowerCalendarDefaultBlock,
+    selectedValue: string,
+    _select: Select,
+    e?: Event,
+  ) {
     const newCenter = new Date(calendar.center);
 
     switch (unit) {
diff --git a/docs/app/components/snippets/nav-select-3.gts b/docs/app/components/snippets/nav-select-3.gts
index 837e9cda..3208dcfe 100644
--- a/docs/app/components/snippets/nav-select-3.gts
+++ b/docs/app/components/snippets/nav-select-3.gts
@@ -3,8 +3,13 @@ import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { fn } from '@ember/helper';
 import { on } from '@ember/modifier';
-import PowerCalendar, { type PowerCalendarDefaultBlock } from 'ember-power-calendar/components/power-calendar';
-import { formatDate, type NormalizeCalendarValue } from 'ember-power-calendar/utils';
+import PowerCalendar, {
+  type PowerCalendarDefaultBlock,
+} from 'ember-power-calendar/components/power-calendar';
+import {
+  formatDate,
+  type NormalizeCalendarValue,
+} from 'ember-power-calendar/utils';
 
 export default class extends Component {
   @tracked center3: Date | undefined = undefined;
diff --git a/docs/app/components/snippets/range-selection-2.gts b/docs/app/components/snippets/range-selection-2.gts
index 12e98f5d..2fd58023 100644
--- a/docs/app/components/snippets/range-selection-2.gts
+++ b/docs/app/components/snippets/range-selection-2.gts
@@ -2,7 +2,10 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import PowerCalendarRange from 'ember-power-calendar/components/power-calendar-range';
-import type { NormalizeCalendarValue, NormalizeRangeActionValue } from 'ember-power-calendar/utils';
+import type {
+  NormalizeCalendarValue,
+  NormalizeRangeActionValue,
+} from 'ember-power-calendar/utils';
 
 export default class extends Component {
   @tracked center: Date | undefined = new Date('2016-05-17');
diff --git a/docs/app/components/snippets/range-selection-3.gts b/docs/app/components/snippets/range-selection-3.gts
index 78b34686..264fe872 100644
--- a/docs/app/components/snippets/range-selection-3.gts
+++ b/docs/app/components/snippets/range-selection-3.gts
@@ -2,17 +2,22 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import PowerCalendarRange from 'ember-power-calendar/components/power-calendar-range';
-import type { NormalizeCalendarValue, NormalizeRangeActionValue } from 'ember-power-calendar/utils';
+import type {
+  NormalizeCalendarValue,
+  NormalizeRangeActionValue,
+} from 'ember-power-calendar/utils';
 
 export default class extends Component {
   @tracked center: Date | undefined = new Date('2016-05-17');
-  @tracked mediumRange: {
+  @tracked mediumRange:
+    | {
+        start?: Date | null;
+        end?: Date | null;
+      }
+    | undefined = undefined;
+  @tracked range: {
     start?: Date | null;
     end?: Date | null;
-  } | undefined = undefined;
-  @tracked range: {
-      start?: Date | null;
-      end?: Date | null;
   } = {
     start: new Date('2016-05-10'),
     end: new Date('2016-05-15'),
diff --git a/docs/app/components/snippets/range-selection-4.gts b/docs/app/components/snippets/range-selection-4.gts
index f733f6c4..9685f912 100644
--- a/docs/app/components/snippets/range-selection-4.gts
+++ b/docs/app/components/snippets/range-selection-4.gts
@@ -2,14 +2,19 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import PowerCalendarRange from 'ember-power-calendar/components/power-calendar-range';
-import type { NormalizeCalendarValue, NormalizeRangeActionValue } from 'ember-power-calendar/utils';
+import type {
+  NormalizeCalendarValue,
+  NormalizeRangeActionValue,
+} from 'ember-power-calendar/utils';
 
 export default class extends Component {
   @tracked center: Date | undefined = new Date('2016-05-17');
-  @tracked largeRange: {
-    start?: Date | null;
-    end?: Date | null;
-  } | undefined = undefined;
+  @tracked largeRange:
+    | {
+        start?: Date | null;
+        end?: Date | null;
+      }
+    | undefined = undefined;
 
   @action
   onCenterChange(selected: NormalizeCalendarValue) {
diff --git a/docs/app/components/snippets/range-selection-5.gts b/docs/app/components/snippets/range-selection-5.gts
index a6a493fd..bf6ad369 100644
--- a/docs/app/components/snippets/range-selection-5.gts
+++ b/docs/app/components/snippets/range-selection-5.gts
@@ -2,14 +2,19 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import PowerCalendarRange from 'ember-power-calendar/components/power-calendar-range';
-import type { NormalizeCalendarValue, NormalizeRangeActionValue } from 'ember-power-calendar/utils';
+import type {
+  NormalizeCalendarValue,
+  NormalizeRangeActionValue,
+} from 'ember-power-calendar/utils';
 
 export default class extends Component {
   @tracked center: Date | undefined = new Date('2016-05-17');
-  @tracked largeRange: {
-    start?: Date | null;
-    end?: Date | null;
-  } | undefined = undefined;
+  @tracked largeRange:
+    | {
+        start?: Date | null;
+        end?: Date | null;
+      }
+    | undefined = undefined;
 
   @action
   onCenterChange(selected: NormalizeCalendarValue) {
diff --git a/docs/app/components/snippets/range-selection-6.gts b/docs/app/components/snippets/range-selection-6.gts
index 96a6c697..5ff4e071 100644
--- a/docs/app/components/snippets/range-selection-6.gts
+++ b/docs/app/components/snippets/range-selection-6.gts
@@ -6,10 +6,12 @@ import type { NormalizeRangeActionValue } from 'ember-power-calendar/utils';
 
 export default class extends Component {
   @tracked center: Date | undefined = new Date('2016-05-17');
-  @tracked minimalRange: {
-    start?: Date | null;
-    end?: Date | null;
-  } | undefined = undefined;
+  @tracked minimalRange:
+    | {
+        start?: Date | null;
+        end?: Date | null;
+      }
+    | undefined = undefined;
 
   @action
   onSelect(selected: NormalizeRangeActionValue) {
@@ -28,8 +30,8 @@ export default class extends Component {
       <cal.Days />
     </PowerCalendarRange>
     <small>
-      To help visualize it in this demo the color of the days when range starts and
-      ends in the same day is red.
+      To help visualize it in this demo the color of the days when range starts
+      and ends in the same day is red.
     </small>
   </template>
 }
diff --git a/docs/app/components/snippets/range-selection-7.gts b/docs/app/components/snippets/range-selection-7.gts
index 5ef6cfa1..9fee8337 100644
--- a/docs/app/components/snippets/range-selection-7.gts
+++ b/docs/app/components/snippets/range-selection-7.gts
@@ -5,10 +5,12 @@ import PowerCalendarRange from 'ember-power-calendar/components/power-calendar-r
 import type { NormalizeRangeActionValue } from 'ember-power-calendar/utils';
 
 export default class extends Component {
-  @tracked selectedRange: {
-    start?: Date | null;
-    end?: Date | null;
-  } | undefined = undefined;
+  @tracked selectedRange:
+    | {
+        start?: Date | null;
+        end?: Date | null;
+      }
+    | undefined = undefined;
 
   @action
   onSelect(selected: NormalizeRangeActionValue) {
diff --git a/docs/app/components/snippets/the-days-0.gts b/docs/app/components/snippets/the-days-0.gts
index cf0d51f0..45b28c37 100644
--- a/docs/app/components/snippets/the-days-0.gts
+++ b/docs/app/components/snippets/the-days-0.gts
@@ -1,7 +1,9 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
-import PowerCalendarMultiple, { type PowerCalendarMultipleAPI } from 'ember-power-calendar/components/power-calendar-multiple';
+import PowerCalendarMultiple, {
+  type PowerCalendarMultipleAPI,
+} from 'ember-power-calendar/components/power-calendar-multiple';
 import type { NormalizeMultipleActionValue } from 'ember-power-calendar/utils';
 import type { TDayClass } from 'ember-power-calendar/helpers/ember-power-calendar-day-classes';
 
@@ -13,7 +15,11 @@ export default class extends Component {
     this.selectedDays = selected.date;
   }
 
-  customClass: TDayClass<PowerCalendarMultipleAPI> = (day, _calendar, weeks): string => {
+  customClass: TDayClass<PowerCalendarMultipleAPI> = (
+    day,
+    _calendar,
+    weeks,
+  ): string => {
     if (day.isSelected) {
       const currentWeek = weeks.find((w) => w.days.includes(day));
 
@@ -44,7 +50,7 @@ export default class extends Component {
     }
 
     return '';
-  }
+  };
 
   <template>
     <PowerCalendarMultiple
diff --git a/docs/app/components/snippets/the-days-2.gts b/docs/app/components/snippets/the-days-2.gts
index 5b714ae7..ada00d61 100644
--- a/docs/app/components/snippets/the-days-2.gts
+++ b/docs/app/components/snippets/the-days-2.gts
@@ -6,7 +6,7 @@ import {
   startOf,
   endOf,
   weekday,
-formatDate,
+  formatDate,
 } from 'ember-power-calendar/utils';
 
 export default class extends Component {
diff --git a/docs/app/components/snippets/the-days-3.gts b/docs/app/components/snippets/the-days-3.gts
index 39f41f08..182391b1 100644
--- a/docs/app/components/snippets/the-days-3.gts
+++ b/docs/app/components/snippets/the-days-3.gts
@@ -5,10 +5,7 @@ import DaysGridWithoutMonOrWed from '../days-grid-without-mon-or-wed';
 // eslint-disable-next-line ember/no-empty-glimmer-component-classes
 export default class extends Component {
   <template>
-    <PowerCalendar
-      @daysComponent={{DaysGridWithoutMonOrWed}}
-      as |calendar|
-    >
+    <PowerCalendar @daysComponent={{DaysGridWithoutMonOrWed}} as |calendar|>
       <calendar.Nav />
       <calendar.Days />
     </PowerCalendar>
diff --git a/docs/app/components/snippets/the-days-8.gts b/docs/app/components/snippets/the-days-8.gts
index 92ec4dbe..90b64ff1 100644
--- a/docs/app/components/snippets/the-days-8.gts
+++ b/docs/app/components/snippets/the-days-8.gts
@@ -10,7 +10,8 @@ export default class extends Component {
 
   @action
   onChange(evt: Event) {
-    this.weekdayFormat = (evt.target as HTMLInputElement).value as TWeekdayFormat;
+    this.weekdayFormat = (evt.target as HTMLInputElement)
+      .value as TWeekdayFormat;
   }
 
   <template>
diff --git a/docs/app/components/snippets/the-nav-2.gts b/docs/app/components/snippets/the-nav-2.gts
index 0256bc38..cb968b83 100644
--- a/docs/app/components/snippets/the-nav-2.gts
+++ b/docs/app/components/snippets/the-nav-2.gts
@@ -4,7 +4,10 @@ import { action } from '@ember/object';
 import PowerCalendar from 'ember-power-calendar/components/power-calendar';
 import { on } from '@ember/modifier';
 import { fn } from '@ember/helper';
-import { formatDate, type NormalizeCalendarValue } from 'ember-power-calendar/utils';
+import {
+  formatDate,
+  type NormalizeCalendarValue,
+} from 'ember-power-calendar/utils';
 
 export default class extends Component {
   @tracked month: Date | undefined = undefined;
diff --git a/docs/app/config/environment.ts b/docs/app/config/environment.ts
index 11bc5009..ca8d66bb 100644
--- a/docs/app/config/environment.ts
+++ b/docs/app/config/environment.ts
@@ -5,23 +5,23 @@ const config = loadConfigFromMeta('docs') as unknown;
 
 assert(
   'config is not an object',
-  typeof config === 'object' && config !== null
+  typeof config === 'object' && config !== null,
 );
 assert(
   'modulePrefix was not detected on your config',
-  'modulePrefix' in config && typeof config.modulePrefix === 'string'
+  'modulePrefix' in config && typeof config.modulePrefix === 'string',
 );
 assert(
   'locationType was not detected on your config',
-  'locationType' in config && typeof config.locationType === 'string'
+  'locationType' in config && typeof config.locationType === 'string',
 );
 assert(
   'rootURL was not detected on your config',
-  'rootURL' in config && typeof config.rootURL === 'string'
+  'rootURL' in config && typeof config.rootURL === 'string',
 );
 assert(
   'APP was not detected on your config',
-  'APP' in config && typeof config.APP === 'object'
+  'APP' in config && typeof config.APP === 'object',
 );
 
 export default config as {
diff --git a/docs/app/initializers/global-locale.ts b/docs/app/initializers/global-locale.ts
index a5160f6c..c5a1ded2 100644
--- a/docs/app/initializers/global-locale.ts
+++ b/docs/app/initializers/global-locale.ts
@@ -16,7 +16,8 @@ if (macroCondition(dependencySatisfies('moment', '*'))) {
 export default {
   initialize() {
     if (dateLibrary === 'moment') {
-      const moment = (importSync('moment') as { default: typeof momentNs }).default;
+      const moment = (importSync('moment') as { default: typeof momentNs })
+        .default;
       moment.locale('en');
     }
   },
diff --git a/docs/app/styles/app.scss b/docs/app/styles/app.scss
index 0f56e9dd..29602a84 100644
--- a/docs/app/styles/app.scss
+++ b/docs/app/styles/app.scss
@@ -20,7 +20,7 @@
 @import "components/index";
 @import "components/sidenav";
 @import "components/docs";
-@import 'components/code-block';
+@import "components/code-block";
 
 // Docs
 @import "docs/code-example";
diff --git a/docs/app/templates/public-pages.gts b/docs/app/templates/public-pages.gts
index 75a4f3c1..48361cc6 100644
--- a/docs/app/templates/public-pages.gts
+++ b/docs/app/templates/public-pages.gts
@@ -22,7 +22,9 @@ export default class PublicPages extends Component {
       return;
     }
 
-    const pageElement = (e.target as HTMLElement).closest<HTMLElement>('.header-calendar-page');
+    const pageElement = (e.target as HTMLElement).closest<HTMLElement>(
+      '.header-calendar-page',
+    );
     if (!pageElement) {
       return;
     }
@@ -75,7 +77,10 @@ export default class PublicPages extends Component {
                 class="header-calendar-page
                   {{if (eq this.day this.today) '' 'run-animation'}}"
               >
-                <sub class="calendar-page-number">{{formatDate this.day "D"}}</sub>
+                <sub class="calendar-page-number">{{formatDate
+                    this.day
+                    "D"
+                  }}</sub>
                 Calendar
               </div>
               <div class="header-calendar-ring left"></div>
diff --git a/docs/app/templates/public-pages/cookbook.gts b/docs/app/templates/public-pages/cookbook.gts
index 2234cbff..63a09ef2 100644
--- a/docs/app/templates/public-pages/cookbook.gts
+++ b/docs/app/templates/public-pages/cookbook.gts
@@ -11,7 +11,10 @@ const groupedSections = [
     options: [
       { route: 'public-pages.cookbook.index', text: 'Datepicker' },
       { route: 'public-pages.cookbook.nav-select', text: 'Nav with select' },
-      { route: 'public-pages.cookbook.multiple-months', text: 'Multiple months' },
+      {
+        route: 'public-pages.cookbook.multiple-months',
+        text: 'Multiple months',
+      },
       // { route: 'public-pages.cookbook.material-theme',        text: 'Material theme' },
       // { route: 'public-pages.cookbook.css-animations',        text: 'CSS animations' },
       // { route: 'public-pages.cookbook.debounce-searches',     text: 'Debounce searches' },
@@ -47,10 +50,7 @@ export default class extends Component {
   }
 
   @action
-  visit(section: {
-    route: string;
-    text: string;
-  }) {
+  visit(section: { route: string; text: string }) {
     this.router.transitionTo(section.route);
   }
 
@@ -62,8 +62,10 @@ export default class extends Component {
           @route="public-pages.cookbook.index"
           class="side-nav-link"
         >Datepicker</LinkTo>
-        <LinkTo @route="public-pages.cookbook.nav-select" class="side-nav-link">Nav
-          with select</LinkTo>
+        <LinkTo
+          @route="public-pages.cookbook.nav-select"
+          class="side-nav-link"
+        >Nav with select</LinkTo>
         <LinkTo
           @route="public-pages.cookbook.multiple-months"
           class="side-nav-link"
diff --git a/docs/app/templates/public-pages/cookbook/index.gts b/docs/app/templates/public-pages/cookbook/index.gts
index adab6e78..0716e602 100644
--- a/docs/app/templates/public-pages/cookbook/index.gts
+++ b/docs/app/templates/public-pages/cookbook/index.gts
@@ -8,14 +8,14 @@ import { LinkTo } from '@ember/routing';
   <p>
     One very common use case of calendars is as part of another datepicker
     component. That is, a calendar associated with an input field, in which when
-    the input is clicked, the calendar appears in a floating box to ease choosing
-    a date.
+    the input is clicked, the calendar appears in a floating box to ease
+    choosing a date.
   </p>
 
   <p>
     It might seem that this would take a lot of code, but the Ember ecosystem is
-    amazing, and there are already some components that act as building blocks for
-    other components that we can leverage.
+    amazing, and there are already some components that act as building blocks
+    for other components that we can leverage.
   </p>
 
   <p>
@@ -39,10 +39,10 @@ import { LinkTo } from '@ember/routing';
   </p>
 
   <p>
-    You can style it in any way you want, add wrapper divs like the ones required
-    by some CSS frameworks (I'm looking at you, Bootstrap), format the text of the
-    input using some helper. You could also modify it to use a textarea or to
-    format ranges in a breeze.
+    You can style it in any way you want, add wrapper divs like the ones
+    required by some CSS frameworks (I'm looking at you, Bootstrap), format the
+    text of the input using some helper. You could also modify it to use a
+    textarea or to format ranges in a breeze.
   </p>
 
   <p>
@@ -50,9 +50,9 @@ import { LinkTo } from '@ember/routing';
   </p>
   <p>
     For example, you could want to close the dropdown when a day is selected or
-    allow the users to type on the input and parse the date as they type, but this
-    gives a starting point for anyone to create - and publish ;) - their own
-    datepicker component.
+    allow the users to type on the input and parse the date as they type, but
+    this gives a starting point for anyone to create - and publish ;) - their
+    own datepicker component.
   </p>
 
   <div class="doc-page-nav">
diff --git a/docs/app/templates/public-pages/cookbook/multiple-months.gts b/docs/app/templates/public-pages/cookbook/multiple-months.gts
index 0a60b074..20a4202e 100644
--- a/docs/app/templates/public-pages/cookbook/multiple-months.gts
+++ b/docs/app/templates/public-pages/cookbook/multiple-months.gts
@@ -7,9 +7,9 @@ import { LinkTo } from '@ember/routing';
   <h1 class="doc-page-title">Display Multiple Months</h1>
 
   <p>
-    You might want to display multiple months simultaneously. Displaying multiple
-    months is a nice especially when you might want people to select dates across
-    month boundaries.
+    You might want to display multiple months simultaneously. Displaying
+    multiple months is a nice especially when you might want people to select
+    dates across month boundaries.
   </p>
 
   <p>
@@ -25,8 +25,8 @@ import { LinkTo } from '@ember/routing';
   </CodeExample>
 
   <p>
-    How? Well. In versions of ember-power-calendar greater than 0.11.0 we can pass
-    a
+    How? Well. In versions of ember-power-calendar greater than 0.11.0 we can
+    pass a
     <code>center</code>
     property to the
     <code>calendar.Days</code>
@@ -39,8 +39,8 @@ import { LinkTo } from '@ember/routing';
   </p>
 
   <p>
-    Another nice pattern for mobile is to render all 12 months vertically and let
-    the user scroll them.
+    Another nice pattern for mobile is to render all 12 months vertically and
+    let the user scroll them.
   </p>
 
   <CodeExample
diff --git a/docs/app/templates/public-pages/cookbook/nav-select.gts b/docs/app/templates/public-pages/cookbook/nav-select.gts
index 1c6b372e..4e926c6d 100644
--- a/docs/app/templates/public-pages/cookbook/nav-select.gts
+++ b/docs/app/templates/public-pages/cookbook/nav-select.gts
@@ -8,8 +8,8 @@ import { LinkTo } from '@ember/routing';
   <h1 class="doc-page-title">Nav with select</h1>
 
   <p>
-    A couple people asked me if I was considering adding a feature present in the
-    well known
+    A couple people asked me if I was considering adding a feature present in
+    the well known
     <a href="http://dbushell.github.io/Pikaday/">Pickaday</a>
     library where you can click in the month or year to quicky navigate to far
     away dates.
@@ -25,10 +25,7 @@ import { LinkTo } from '@ember/routing';
     Let's build it in a few lines of code.
   </p>
 
-  <CodeExample
-    @glimmerTs="nav-select-1.gts"
-    @css="nav-select-1-css.css"
-  >
+  <CodeExample @glimmerTs="nav-select-1.gts" @css="nav-select-1-css.css">
     {{NavSelect1}}
   </CodeExample>
 
@@ -40,9 +37,9 @@ import { LinkTo } from '@ember/routing';
     We pass a block to the
     <code>calendar.Nav</code>
     component to replace the default markup with the name of the component with
-    our own markup. In that markup we add two invisible select on top of the text
-    of the month and year that when interacted call an action that builds a new
-    date and pass it to
+    our own markup. In that markup we add two invisible select on top of the
+    text of the month and year that when interacted call an action that builds a
+    new date and pass it to
     <code>calendar.actions.changeCenter</code>
     public action to center the calendar on that action.
   </p>
@@ -58,8 +55,8 @@ import { LinkTo } from '@ember/routing';
   </p>
 
   <p>
-    What if you prefer to use Ember Power Select with the years grouped by decade
-    and some fancy animations instead of a native select?
+    What if you prefer to use Ember Power Select with the years grouped by
+    decade and some fancy animations instead of a native select?
   </p>
 
   <CodeExample @glimmerTs="nav-select-2.gts">
diff --git a/docs/app/templates/public-pages/docs.gts b/docs/app/templates/public-pages/docs.gts
index 0ff26ffd..80302e15 100644
--- a/docs/app/templates/public-pages/docs.gts
+++ b/docs/app/templates/public-pages/docs.gts
@@ -60,10 +60,7 @@ export default class PublicPagesDocs extends Component {
   }
 
   @action
-  visit(section: {
-    route: string;
-    text: string;
-  }) {
+  visit(section: { route: string; text: string }) {
     this.router.transitionTo(section.route);
   }
 
@@ -80,8 +77,10 @@ export default class PublicPagesDocs extends Component {
           @route="public-pages.docs.installation"
           class="side-nav-link"
         >Installation &amp; setup</LinkTo>
-        <LinkTo @route="public-pages.docs.how-to-use-it" class="side-nav-link">How
-          to use it</LinkTo>
+        <LinkTo
+          @route="public-pages.docs.how-to-use-it"
+          class="side-nav-link"
+        >How to use it</LinkTo>
         <LinkTo
           @route="public-pages.docs.action-handling"
           class="side-nav-link"
@@ -95,14 +94,22 @@ export default class PublicPagesDocs extends Component {
           class="side-nav-link"
         >Multiple selection</LinkTo>
         <header class="side-nav-header">Basic customization</header>
-        <LinkTo @route="public-pages.docs.i18n" class="side-nav-link">I18n</LinkTo>
+        <LinkTo
+          @route="public-pages.docs.i18n"
+          class="side-nav-link"
+        >I18n</LinkTo>
         <LinkTo @route="public-pages.docs.the-nav" class="side-nav-link">The nav</LinkTo>
-        <LinkTo @route="public-pages.docs.the-days" class="side-nav-link">The days</LinkTo>
+        <LinkTo @route="public-pages.docs.the-days" class="side-nav-link">The
+          days</LinkTo>
         <header class="side-nav-header">Other</header>
-        <LinkTo @route="public-pages.docs.test-helpers" class="side-nav-link">Test
-          helpers</LinkTo>
-        <LinkTo @route="public-pages.docs.api-reference" class="side-nav-link">API
-          reference</LinkTo>
+        <LinkTo
+          @route="public-pages.docs.test-helpers"
+          class="side-nav-link"
+        >Test helpers</LinkTo>
+        <LinkTo
+          @route="public-pages.docs.api-reference"
+          class="side-nav-link"
+        >API reference</LinkTo>
       </nav>
       <section class="doc-page">
         <PowerSelect
diff --git a/docs/app/templates/public-pages/docs/action-handling.gts b/docs/app/templates/public-pages/docs/action-handling.gts
index 3af14ca6..c4ee696b 100644
--- a/docs/app/templates/public-pages/docs/action-handling.gts
+++ b/docs/app/templates/public-pages/docs/action-handling.gts
@@ -8,15 +8,15 @@ import { LinkTo } from '@ember/routing';
   <h1 class="doc-page-title">Action handling</h1>
 
   <p>
-    Ember Power Calendar aims to be very customizable and because of that it also
-    has to be very explicit about its behaviour, even if that makes it slightly
-    verbose.
+    Ember Power Calendar aims to be very customizable and because of that it
+    also has to be very explicit about its behaviour, even if that makes it
+    slightly verbose.
   </p>
 
   <p>
-    The data flow from the app to the addon is strictly unidirectional. Data comes
-    into the component, and actions are fired from the inside. The user must
-    handle those actions in order for
+    The data flow from the app to the addon is strictly unidirectional. Data
+    comes into the component, and actions are fired from the inside. The user
+    must handle those actions in order for
     <strong>anything</strong>
     to happen.
   </p>
@@ -36,13 +36,14 @@ import { LinkTo } from '@ember/routing';
   </p>
 
   <p>
-    However, it would be inconvenient to force everyone to do that, so if you pass
+    However, it would be inconvenient to force everyone to do that, so if you
+    pass
     <code>onCenterChange</code>
     action to the component, the
     <code>calendar.Nav</code>
     component gets some built-in controls to navigate to the previous and next
-    month. Use that action to update the displayed month and you have a navigable
-    calendar!
+    month. Use that action to update the displayed month and you have a
+    navigable calendar!
   </p>
 
   <CodeExample @glimmerTs="action-handling-1.gts">
@@ -56,12 +57,12 @@ import { LinkTo } from '@ember/routing';
   </p>
 
   <p>
-    For example, imagine that changing to a different month needs to make an ajax
-    call to the server to gather all the events that are going to happen that
-    month (we haven't seen how to display events on the calendar, but use your
-    imagination) before showing the next month. While those events are loaded, we
-    want to hold changing the month and show a loading state with an animated
-    spinner.
+    For example, imagine that changing to a different month needs to make an
+    ajax call to the server to gather all the events that are going to happen
+    that month (we haven't seen how to display events on the calendar, but use
+    your imagination) before showing the next month. While those events are
+    loaded, we want to hold changing the month and show a loading state with an
+    animated spinner.
   </p>
 
   <p>It doesn't seem like the kind of thing you'd dare to attempt with
@@ -79,8 +80,9 @@ import { LinkTo } from '@ember/routing';
   </p>
 
   <p>
-    No black magic. Just the way you usually manage sync actions in your own code.
-    Ember Power Calendar is promise-aware and task-aware, all the way down.
+    No black magic. Just the way you usually manage sync actions in your own
+    code. Ember Power Calendar is promise-aware and task-aware, all the way
+    down.
   </p>
 
   <h3><code>onSelect</code></h3>
@@ -96,8 +98,8 @@ import { LinkTo } from '@ember/routing';
     That action is fired with a
     <code>day</code>
     object as first argument. This object built by Ember Power Calendar contains
-    many useful information that we will explore in detail, but for now we'll hold
-    to the idea that it has a
+    many useful information that we will explore in detail, but for now we'll
+    hold to the idea that it has a
     <code>date</code>
     property that contains a native
     <code>Date</code>
@@ -127,8 +129,8 @@ import { LinkTo } from '@ember/routing';
   </p>
 
   <p>
-    To begin with, the days of the calendar highlight when you hover them. This is
-    because the presence of an
+    To begin with, the days of the calendar highlight when you hover them. This
+    is because the presence of an
     <code>onSelect</code>
     action makes the component enter an interactive mode, which adds a class to
     it.
@@ -137,10 +139,10 @@ import { LinkTo } from '@ember/routing';
   <p>
     Also, if you inspect the html, you'll see that the days are now
     <code>&lt;button&gt;</code>s instead of
-    <code>&lt;div&gt;</code>s. This, besides of making them clickable to select a
-    day, makes them focusable, which is important to make the component
-    accessible. The currently focused day is shown with a blue underline, and once
-    one day is focused you can use the arrows,
+    <code>&lt;div&gt;</code>s. This, besides of making them clickable to select
+    a day, makes them focusable, which is important to make the component
+    accessible. The currently focused day is shown with a blue underline, and
+    once one day is focused you can use the arrows,
     <kbd>TAB</kbd>,
     <kbd>ENTER</kbd>
     and
@@ -150,8 +152,8 @@ import { LinkTo } from '@ember/routing';
 
   <p>
     This action is fired when the selection changes, but the selection doesn't
-    need to be a single date. It can be a range or a set of sparse dates! The next
-    page is all about this topic.
+    need to be a single date. It can be a range or a set of sparse dates! The
+    next page is all about this topic.
   </p>
 
   <div class="doc-page-nav">
diff --git a/docs/app/templates/public-pages/docs/api-reference.gts b/docs/app/templates/public-pages/docs/api-reference.gts
index 4d0f70af..fb147c03 100644
--- a/docs/app/templates/public-pages/docs/api-reference.gts
+++ b/docs/app/templates/public-pages/docs/api-reference.gts
@@ -3,8 +3,8 @@
 
   <p>
     Ember Power Calendar aims to allow users to create the ideal calendar they
-    need using only the properties and actions defined in its public API, so it is
-    important to have a comprehensive list of all the available options.
+    need using only the properties and actions defined in its public API, so it
+    is important to have a comprehensive list of all the available options.
   </p>
 
   <h3>The <code>day</code> object</h3>
@@ -65,8 +65,8 @@
       <tr>
         <td>isCurrentMonth</td>
         <td><code>Boolean</code></td>
-        <td>It is true for those days in the current day, and false for those days
-          for the previous/next months shown around.</td>
+        <td>It is true for those days in the current day, and false for those
+          days for the previous/next months shown around.</td>
       </tr>
       <tr>
         <td>isToday</td>
@@ -77,8 +77,8 @@
         <td>isSelected</td>
         <td><code>Boolean</code></td>
         <td>It is true if the date of this day is the selected one. In multiple
-          select it is true if the date of this day is among the selected ones. In
-          range selects, it is true if the date if this day is in the range,
+          select it is true if the date of this day is among the selected ones.
+          In range selects, it is true if the date if this day is in the range,
           including both ends.</td>
       </tr>
       <tr>
@@ -90,8 +90,8 @@
       <tr>
         <td>isRangeEnd</td>
         <td><code>Boolean</code></td>
-        <td>It is true if this day is the end of a range. It is false in non-range
-          calendars</td>
+        <td>It is true if this day is the end of a range. It is false in
+          non-range calendars</td>
       </tr>
     </tbody>
   </table>
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
index 018ed023..5fb838ff 100644
--- a/docs/app/templates/public-pages/docs/how-to-use-it.gts
+++ b/docs/app/templates/public-pages/docs/how-to-use-it.gts
@@ -1,4 +1,3 @@
-
 import CodeExample from 'docs/components/code-example';
 import HowToUseIt1 from '../../../components/snippets/how-to-use-it-1';
 import HowToUseIt2 from '../../../components/snippets/how-to-use-it-2';
@@ -51,9 +50,9 @@ import { LinkTo } from '@ember/routing';
     It is important to note that
     <code>center</code>
     is a date in which we center our attention but not necessarily the center of
-    the time window we display. In the month view (the default) it doesn't matter
-    if that date is the 1st day or the 31st, the rendered month will be the same.
-    Let's render October of 2013.
+    the time window we display. In the month view (the default) it doesn't
+    matter if that date is the 1st day or the 31st, the rendered month will be
+    the same. Let's render October of 2013.
   </p>
 
   <CodeExample @glimmerTs="how-to-use-it-2.gts">
@@ -64,8 +63,8 @@ import { LinkTo } from '@ember/routing';
     The month above is November of 2013, but that's hard to know if there is
     nothing else telling us. The second component that the calendar has and that
     you will find yourself using often is
-    <code>calendar.Nav</code>. This component displays the name of the month and,
-    optionally, some actions to navigate to the previous/next month.
+    <code>calendar.Nav</code>. This component displays the name of the month
+    and, optionally, some actions to navigate to the previous/next month.
   </p>
 
   <CodeExample @glimmerTs="how-to-use-it-3.gts">
@@ -116,10 +115,10 @@ import { LinkTo } from '@ember/routing';
     You can see that the calendar shows the selected date in blue. You may have
     also noticed that despite only passing a
     <code>selected</code>
-    option, the month is not the current one. That is because in the absence of a
-    specific
-    <code>center</code>, the calendar will show the month of the selected date. If
-    both options are provided,
+    option, the month is not the current one. That is because in the absence of
+    a specific
+    <code>center</code>, the calendar will show the month of the selected date.
+    If both options are provided,
     <code>center</code>
     <strong>always</strong>
     prevails.
@@ -128,8 +127,8 @@ import { LinkTo } from '@ember/routing';
   <p>
     Enough of static calendars. If you just wanted to display a static grid of
     days you probably wouldn't be using an ember-addon for that. You want to
-    navigate months, you want to select days and ranges. Let's see how to do these
-    things in the next chapter.
+    navigate months, you want to select days and ranges. Let's see how to do
+    these things in the next chapter.
   </p>
 
   <div class="doc-page-nav">
diff --git a/docs/app/templates/public-pages/docs/i18n.gts b/docs/app/templates/public-pages/docs/i18n.gts
index cd3dfa4f..34d72337 100644
--- a/docs/app/templates/public-pages/docs/i18n.gts
+++ b/docs/app/templates/public-pages/docs/i18n.gts
@@ -25,8 +25,8 @@ import { LinkTo } from '@ember/routing';
 
   <p>
     Also, you can override the global locale on a per-instance basis passing
-    <code>locale="some-locale"</code>. The next calendar is going to be in russian
-    no matter what the global locale is.
+    <code>locale="some-locale"</code>. The next calendar is going to be in
+    russian no matter what the global locale is.
   </p>
 
   <CodeExample @glimmerTs="i18n-2.gts">
@@ -34,8 +34,8 @@ import { LinkTo } from '@ember/routing';
   </CodeExample>
 
   <p>
-    In the next sections you are going to see how to customize the sub-components
-    of the calendar.
+    In the next sections you are going to see how to customize the
+    sub-components of the calendar.
   </p>
 
   <div class="doc-page-nav">
@@ -43,7 +43,9 @@ import { LinkTo } from '@ember/routing';
       @route="public-pages.docs.multiple-selection"
       class="doc-page-nav-link-prev"
     >&lt; Multiple selection</LinkTo>
-    <LinkTo @route="public-pages.docs.the-nav" class="doc-page-nav-link-next">The
-      nav &gt;</LinkTo>
+    <LinkTo
+      @route="public-pages.docs.the-nav"
+      class="doc-page-nav-link-next"
+    >The nav &gt;</LinkTo>
   </div>
 </template>
diff --git a/docs/app/templates/public-pages/docs/index.gts b/docs/app/templates/public-pages/docs/index.gts
index 1e694674..c1112a87 100644
--- a/docs/app/templates/public-pages/docs/index.gts
+++ b/docs/app/templates/public-pages/docs/index.gts
@@ -1,4 +1,4 @@
-import { LinkTo } from "@ember/routing";
+import { LinkTo } from '@ember/routing';
 
 <template>
   <h1 class="doc-page-title">Overview</h1>
@@ -15,11 +15,11 @@ import { LinkTo } from "@ember/routing";
   </p>
 
   <p>
-    There are some addons out there that wrap jQuery libraries which claim to make
-    your life easier. And they do at first. Having a basic calendar rendered with
-    the default styles takes minutes and you feel very productive. However, there
-    is always something else that makes you push your calendar a little bit beyond
-    the basic usage, and this is where things get
+    There are some addons out there that wrap jQuery libraries which claim to
+    make your life easier. And they do at first. Having a basic calendar
+    rendered with the default styles takes minutes and you feel very productive.
+    However, there is always something else that makes you push your calendar a
+    little bit beyond the basic usage, and this is where things get
     <em>unpleasant</em>.
   </p>
 
@@ -33,15 +33,15 @@ import { LinkTo } from "@ember/routing";
 
   <p>
     Most jQuery libraries for calendars act as blackboxes where you don't get to
-    choose how they render or how they work. You just have a public javascript API
-    with options that allow you to tweak here and there. That is understandable
-    because they were designed to be used in an imperative environment, so I'm not
-    critisizing those libraries either.
+    choose how they render or how they work. You just have a public javascript
+    API with options that allow you to tweak here and there. That is
+    understandable because they were designed to be used in an imperative
+    environment, so I'm not critisizing those libraries either.
   </p>
 
   <p>
-    The problem is that those APIs are imperative and wrapping them in a way that
-    can be used from a declarative language like
+    The problem is that those APIs are imperative and wrapping them in a way
+    that can be used from a declarative language like
     <em>Handlebars</em>
     is not simple, and even if you get it right you are naturally limited by the
     public API that they wrap.
@@ -50,24 +50,25 @@ import { LinkTo } from "@ember/routing";
   <p>
     Generally speaking I think wrapping an imperative library is a convenient
     solution for simple use cases, but it doesn't scale well beyond a certain
-    complexity level. It also has inherent problems playing nicely with Ember: no
-    fastboot rendering, manual bookkeeping of event handlers and data bindings,
-    inability to use your own templates and difficulty to interact with it in
-    tests, to identify a few.
+    complexity level. It also has inherent problems playing nicely with Ember:
+    no fastboot rendering, manual bookkeeping of event handlers and data
+    bindings, inability to use your own templates and difficulty to interact
+    with it in tests, to identify a few.
   </p>
 
   <p>
     <strong>Ember Power Calendar</strong>
     aims to solve the calendar problem
-    <em>The Ember Way</em>: Providing sensible defaults but allowing users to hook
-    into what is going on and how things look, just the way they do with their own
-    components: Handling actions, passing data, providing their own blocks to
-    replace the parts that don't fit their needs.
+    <em>The Ember Way</em>: Providing sensible defaults but allowing users to
+    hook into what is going on and how things look, just the way they do with
+    their own components: Handling actions, passing data, providing their own
+    blocks to replace the parts that don't fit their needs.
   </p>
 
   <p>
     While achieving this flexibility, it also attempts to make the simple case
-    simple by bringing some conventions, defaults and good patterns to the table.
+    simple by bringing some conventions, defaults and good patterns to the
+    table.
   </p>
 
   <p>Just the Ember philosophy, but with days, weeks and stuff like that.</p>
diff --git a/docs/app/templates/public-pages/docs/installation.gts b/docs/app/templates/public-pages/docs/installation.gts
index 5644a3f1..65931a8a 100644
--- a/docs/app/templates/public-pages/docs/installation.gts
+++ b/docs/app/templates/public-pages/docs/installation.gts
@@ -1,5 +1,5 @@
-import { LinkTo } from "@ember/routing";
-import CodeExample from "docs/components/code-example";
+import { LinkTo } from '@ember/routing';
+import CodeExample from 'docs/components/code-example';
 
 <template>
   <h1 class="doc-page-title">Installation &amp; setup</h1>
@@ -11,8 +11,8 @@ import CodeExample from "docs/components/code-example";
       target="_blank"
       rel="noopener noreferrer"
     >Ember-cli</a>
-    addon, so the major part of installation will be done by following command on
-    your ember project
+    addon, so the major part of installation will be done by following command
+    on your ember project
   </p>
 
   <div class="highlight">
@@ -27,8 +27,8 @@ import CodeExample from "docs/components/code-example";
   <p>
     Date manipulation is
     <em>hard</em>. Date internationalization is even harder. That's why this
-    component needs help from a third party date library to display and manipulate
-    dates.
+    component needs help from a third party date library to display and
+    manipulate dates.
   </p>
 
   <p>
@@ -63,9 +63,10 @@ import CodeExample from "docs/components/code-example";
   </p>
 
   <p>
-    Choose the one you prefer and just install it as any other addon, for instance
-    <code>ember install ember-power-calendar-luxon</code>, and your calendar will
-    work, but will look ugly.
+    Choose the one you prefer and just install it as any other addon, for
+    instance
+    <code>ember install ember-power-calendar-luxon</code>, and your calendar
+    will work, but will look ugly.
   </p>
 
   <p>
@@ -73,11 +74,7 @@ import CodeExample from "docs/components/code-example";
     <code>ember-power-calendar</code>. For
     <code>ember-power-calendar-moment</code>
     you need to add this lines.
-    <CodeExample
-      @js="installation.ts"
-      @showResult={{false}}
-      @activeTab="js"
-    />
+    <CodeExample @js="installation.ts" @showResult={{false}} @activeTab="js" />
 
     If you are using any other date library please check the ReadMe of the
     package.
@@ -113,8 +110,8 @@ import CodeExample from "docs/components/code-example";
   />
 
   <p>
-    However, if you are using SASS or LESS you need to add an import statement to
-    your styles.
+    However, if you are using SASS or LESS you need to add an import statement
+    to your styles.
   </p>
 
   <CodeExample
@@ -124,8 +121,8 @@ import CodeExample from "docs/components/code-example";
   />
 
   <p>
-    Doing that will bring in all of the styles except those related to the size of
-    the calendar. For defining the size of the calendar there is a mixin that
+    Doing that will bring in all of the styles except those related to the size
+    of the calendar. For defining the size of the calendar there is a mixin that
     takes the size of the cell you want your calendar to be. By example:
   </p>
 
diff --git a/docs/app/templates/public-pages/docs/multiple-selection.gts b/docs/app/templates/public-pages/docs/multiple-selection.gts
index ff31012c..b4dc3a17 100644
--- a/docs/app/templates/public-pages/docs/multiple-selection.gts
+++ b/docs/app/templates/public-pages/docs/multiple-selection.gts
@@ -14,8 +14,8 @@ import { LinkTo } from '@ember/routing';
     <code>power-calendar-multiple</code>.
   </p>
 
-  <p>There is no much need of explanation, so lets see it in action. Play with it,
-    click around and use the keyboard.</p>
+  <p>There is no much need of explanation, so lets see it in action. Play with
+    it, click around and use the keyboard.</p>
 
   <CodeExample @glimmerTs="multiple-selection-1.gts">
     {{MultipleSelection1}}
@@ -42,14 +42,15 @@ import { LinkTo } from '@ember/routing';
   </p>
 
   <p>
-    It's worth noticing that clicking on a selected day unselects it and that the
-    days are passed in the order they are clicked.
+    It's worth noticing that clicking on a selected day unselects it and that
+    the days are passed in the order they are clicked.
   </p>
 
   <p>
     Since what the
     <code>onSelect</code>
-    action does is up to you, you can implement any logic you want, no matter how
+    action does is up to you, you can implement any logic you want, no matter
+    how
     <del>absurd</del>
     complex it is.
   </p>
diff --git a/docs/app/templates/public-pages/docs/range-selection.gts b/docs/app/templates/public-pages/docs/range-selection.gts
index 591438cb..e0ae0f42 100644
--- a/docs/app/templates/public-pages/docs/range-selection.gts
+++ b/docs/app/templates/public-pages/docs/range-selection.gts
@@ -17,15 +17,16 @@ import { LinkTo } from '@ember/routing';
   </p>
 
   <p>
-    The only differences in the API between a calendar for selecting a single day
-    and a calendar for selecting a range are that the name of the component is now
+    The only differences in the API between a calendar for selecting a single
+    day and a calendar for selecting a range are that the name of the component
+    is now
     <code>power-calendar-range</code>
     and that the
     <code>selected</code>
     option has to implement the
     <code>Range</code>
-    interface. It might sound scary, but it only means that it has to be an object
-    with
+    interface. It might sound scary, but it only means that it has to be an
+    object with
     <code>start</code>
     and
     <code>end</code>
@@ -35,15 +36,15 @@ import { LinkTo } from '@ember/routing';
   <p>
     The same
     <code>onSelect</code>
-    action used in the previous chapter to select one date, is now used to select
-    a range. The object that this action receives has a
+    action used in the previous chapter to select one date, is now used to
+    select a range. The object that this action receives has a
     <code>date</code>
     and either
     <code>moment</code>
     or
     <code>datetime</code>
-    properties, each one containing a range with the dates in native Date objects
-    or in momentJS/Luxon.DateTime objects.
+    properties, each one containing a range with the dates in native Date
+    objects or in momentJS/Luxon.DateTime objects.
   </p>
 
   <p>
@@ -93,8 +94,8 @@ import { LinkTo } from '@ember/routing';
     different date from where it begins and there is no maximum range.
   </p>
 
-  <p>If you want to force the user to pick a range of at least 3 days you can just
-    pass a number:</p>
+  <p>If you want to force the user to pick a range of at least 3 days you can
+    just pass a number:</p>
 
   <CodeExample @glimmerTs="range-selection-3.gts">
     {{RangeSelection3}}
@@ -106,8 +107,9 @@ import { LinkTo } from '@ember/routing';
   </p>
 
   <p>
-    This property accepts humanized durations which makes it very nice to use with
-    different units other than days. Let's make the range be of at most one week.
+    This property accepts humanized durations which makes it very nice to use
+    with different units other than days. Let's make the range be of at most one
+    week.
   </p>
 
   <CodeExample @glimmerTs="range-selection-4.gts">
@@ -142,8 +144,8 @@ import { LinkTo } from '@ember/routing';
     This option changes the behaviour of date selection after a choosing a start
     and an end date. The default behaviour on the third click will select a new
     start date of a brand new range. With this flag enabled, once you have a
-    range, clicking a third time will move the closest of the extremes, narrowing
-    or extending the range.
+    range, clicking a third time will move the closest of the extremes,
+    narrowing or extending the range.
   </p>
 
   <CodeExample @glimmerTs="range-selection-7.gts">
diff --git a/docs/app/templates/public-pages/docs/test-helpers.gts b/docs/app/templates/public-pages/docs/test-helpers.gts
index 20769887..f9100cee 100644
--- a/docs/app/templates/public-pages/docs/test-helpers.gts
+++ b/docs/app/templates/public-pages/docs/test-helpers.gts
@@ -1,5 +1,5 @@
-import { LinkTo } from "@ember/routing";
-import CodeExample from "docs/components/code-example";
+import { LinkTo } from '@ember/routing';
+import CodeExample from 'docs/components/code-example';
 
 <template>
   <h1 class="doc-page-title">Test helpers</h1>
@@ -11,8 +11,8 @@ import CodeExample from "docs/components/code-example";
     Ember Power Calendar provides two acceptance helpers (<code
     >calendarCenter</code>
     and
-    <code>calendarSelect</code>) that make it nicer to interact with the component
-    during tests.
+    <code>calendarSelect</code>) that make it nicer to interact with the
+    component during tests.
   </p>
 
   <h3><code>calendarCenter(cssSelector, date)</code></h3>
@@ -35,8 +35,8 @@ import CodeExample from "docs/components/code-example";
   <h3><code>calendarSelect(cssSelector, date)</code></h3>
 
   <p>
-    Use this helper to select a day of the calendar like if you clicked on it. If
-    to do so the calendar has to display a different month, it will do that
+    Use this helper to select a day of the calendar like if you clicked on it.
+    If to do so the calendar has to display a different month, it will do that
     automatically.
   </p>
 
@@ -47,8 +47,8 @@ import CodeExample from "docs/components/code-example";
   />
 
   <p>
-    If you are dealing with a multiple or range calendar you can just call it more
-    than once.
+    If you are dealing with a multiple or range calendar you can just call it
+    more than once.
   </p>
 
   <h2>Integration Tests</h2>
diff --git a/docs/app/templates/public-pages/docs/the-days.gts b/docs/app/templates/public-pages/docs/the-days.gts
index 996258aa..48cf53fd 100644
--- a/docs/app/templates/public-pages/docs/the-days.gts
+++ b/docs/app/templates/public-pages/docs/the-days.gts
@@ -31,8 +31,8 @@ import { LinkTo } from '@ember/routing';
   <p>
     This on itself is not amazing, but if instead of a string
     <code>dayClass</code>
-    is a function, it will be invoked for every day, receiving the day object and
-    the calendar. You can then implement any custom logic to add classes to
+    is a function, it will be invoked for every day, receiving the day object
+    and the calendar. You can then implement any custom logic to add classes to
     buttons.
   </p>
 
@@ -50,22 +50,22 @@ import { LinkTo } from '@ember/routing';
   <h3>Passing a block</h3>
 
   <p>
-    There are many ways of doing it, but the simplest one is passing a block that
-    will be the content of each cell of the grid. It's not the most versatile, but
-    it can be used for simple customizations.
+    There are many ways of doing it, but the simplest one is passing a block
+    that will be the content of each cell of the grid. It's not the most
+    versatile, but it can be used for simple customizations.
   </p>
 
   <p>
-    The block receives two arguments. The first one is a useful day object and the
-    second is the public API of the component. You can check the API of both
+    The block receives two arguments. The first one is a useful day object and
+    the second is the public API of the component. You can check the API of both
     objects
     <a href="/docs/api-reference">API reference</a>
     section.
   </p>
 
   <p>
-    Let's start by making the number of the days of the weeked be strong and pink,
-    because we like weekends.
+    Let's start by making the number of the days of the weeked be strong and
+    pink, because we like weekends.
   </p>
 
   <CodeExample @glimmerTs="the-days-1.gts">
@@ -99,8 +99,8 @@ import { LinkTo } from '@ember/routing';
 
   <p>
     Just like with the nav component, you can encapsulate this weird grid with 5
-    days week into a component to reuse it all over the place. Maybe if you use it
-    often enough the boss end up thinking weeks have 3 working days.
+    days week into a component to reuse it all over the place. Maybe if you use
+    it often enough the boss end up thinking weeks have 3 working days.
   </p>
 
   <CodeExample @glimmerTs="the-days-3.gts">
@@ -151,8 +151,8 @@ import { LinkTo } from '@ember/routing';
   <h3><code>minDate</code> and <code>maxDate</code></h3>
 
   <p>
-    If you want to prevent some days before a particular date from being selected,
-    pass
+    If you want to prevent some days before a particular date from being
+    selected, pass
     <code>minDate=someDate</code>
     and/or
     <code>maxDate=someOtherDate</code>. Dates before/after those values can be
@@ -170,8 +170,8 @@ import { LinkTo } from '@ember/routing';
   <h3><code>disabledDates</code></h3>
 
   <p>
-    Sometimes you don't want to disabled dates before or after some marks but some
-    specific list of dates, like holidays or birthdays. The
+    Sometimes you don't want to disabled dates before or after some marks but
+    some specific list of dates, like holidays or birthdays. The
     <code>disabledDates</code>
     is what you want. Pass a collection of Date or Moment objects and those days
     will be disabled.
@@ -201,8 +201,10 @@ import { LinkTo } from '@ember/routing';
   </CodeExample>
 
   <div class="doc-page-nav">
-    <LinkTo @route="public-pages.docs.the-nav" class="doc-page-nav-link-prev">&lt;
-      The nav</LinkTo>
+    <LinkTo
+      @route="public-pages.docs.the-nav"
+      class="doc-page-nav-link-prev"
+    >&lt; The nav</LinkTo>
     <LinkTo
       @route="public-pages.docs.test-helpers"
       class="doc-page-nav-link-next"
diff --git a/docs/app/templates/public-pages/docs/the-nav.gts b/docs/app/templates/public-pages/docs/the-nav.gts
index 2a4f09d0..dcf92053 100644
--- a/docs/app/templates/public-pages/docs/the-nav.gts
+++ b/docs/app/templates/public-pages/docs/the-nav.gts
@@ -18,8 +18,8 @@ import { LinkTo } from '@ember/routing';
   <p>
     The contextual components are
     <em>mostly</em>
-    presentationals and you can customize how they look without much knowledge of
-    how the calendar works. The
+    presentationals and you can customize how they look without much knowledge
+    of how the calendar works. The
     <code>calendar.Nav</code>
     component is the simplest one.
   </p>
@@ -33,9 +33,9 @@ import { LinkTo } from '@ember/routing';
   <h3>Passing a block</h3>
 
   <p>
-    If you pass a block to this component, that block will replace the month/year
-    text. It can be used by example if you want to display the month in a
-    different format, maybe a more compact one for very small calendars.
+    If you pass a block to this component, that block will replace the
+    month/year text. It can be used by example if you want to display the month
+    in a different format, maybe a more compact one for very small calendars.
   </p>
 
   <CodeExample @glimmerTs="the-nav-1.gts">
@@ -46,8 +46,9 @@ import { LinkTo } from '@ember/routing';
 
   <p>
     If the thing you want is beyond what you can do with the block, Ember Power
-    Calendar doesn't try to provide a miriad of option to configure the component.
-    Instead it gives you the tools to build it yourself using the yielded
+    Calendar doesn't try to provide a miriad of option to configure the
+    component. Instead it gives you the tools to build it yourself using the
+    yielded
     <code>calendar</code>. It's easy!
   </p>
 
@@ -65,13 +66,14 @@ import { LinkTo } from '@ember/routing';
 
   <p>
     The example above is simple and works if you only have one calendar, but if
-    you have several calendars it becomes repetitive. The last way of customizing
-    your calendar is replacing the
+    you have several calendars it becomes repetitive. The last way of
+    customizing your calendar is replacing the
     <code>nav</code>
     component with your own component.
   </p>
 
-  <p>Let's encapsulate the same logic above into a component and use that instead</p>
+  <p>Let's encapsulate the same logic above into a component and use that
+    instead</p>
 
   <CodeExample @glimmerTs="the-nav-3.gts">
     {{TheNav3}}
@@ -80,8 +82,8 @@ import { LinkTo } from '@ember/routing';
   <p>
     Now you have the same logic but to use it the only thing you have to do is
     tell the calenda to use your component with
-    <code>navComponent="name-of-my-component"</code>. Much easier to reuse across
-    your app.
+    <code>navComponent="name-of-my-component"</code>. Much easier to reuse
+    across your app.
   </p>
 
   <p>
@@ -91,7 +93,9 @@ import { LinkTo } from '@ember/routing';
   <div class="doc-page-nav">
     <LinkTo @route="public-pages.docs.i18n" class="doc-page-nav-link-prev">&lt;
       I18n</LinkTo>
-    <LinkTo @route="public-pages.docs.the-days" class="doc-page-nav-link-next">The
-      days &gt;</LinkTo>
+    <LinkTo
+      @route="public-pages.docs.the-days"
+      class="doc-page-nav-link-next"
+    >The days &gt;</LinkTo>
   </div>
 </template>
diff --git a/docs/app/templates/public-pages/index.gts b/docs/app/templates/public-pages/index.gts
index 746ca491..4df91d04 100644
--- a/docs/app/templates/public-pages/index.gts
+++ b/docs/app/templates/public-pages/index.gts
@@ -1,5 +1,5 @@
-import { LinkTo } from "@ember/routing";
-import { formatDate } from "ember-power-calendar/utils";
+import { LinkTo } from '@ember/routing';
+import { formatDate } from 'ember-power-calendar/utils';
 
 const today = new Date();
 
@@ -39,8 +39,8 @@ const today = new Date();
       </div>
       <div class="selling-point-text">
         <h2>With Ember for Ember</h2>
-        Built in Ember for Ember apps, it works like you expect it to so it blends
-        naturally into your usual worlflow like it you built it yourself.
+        Built in Ember for Ember apps, it works like you expect it to so it
+        blends naturally into your usual worlflow like it you built it yourself.
       </div>
     </article>
 
diff --git a/docs/ember-cli-build.js b/docs/ember-cli-build.js
index e734393a..09a8416b 100644
--- a/docs/ember-cli-build.js
+++ b/docs/ember-cli-build.js
@@ -1,14 +1,10 @@
-'use strict';;
+'use strict';
 const EmberApp = require('ember-cli/lib/broccoli/ember-app');
 
-const {
-  compatBuild
-} = require("@embroider/compat");
+const { compatBuild } = require('@embroider/compat');
 
-module.exports = async function(defaults) {
-  const {
-    buildOnce
-  } = await import("@embroider/vite");
+module.exports = async function (defaults) {
+  const { buildOnce } = await import('@embroider/vite');
 
   let app = new EmberApp(defaults, {
     autoImport: {
diff --git a/docs/package.json b/docs/package.json
index d7540c4e..75fb320d 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -114,4 +114,4 @@
     "./tests/*": "./tests/*",
     "./*": "./app/*"
   }
-}
\ No newline at end of file
+}
diff --git a/docs/testem.js b/docs/testem.js
index 051b27f7..b49d598e 100644
--- a/docs/testem.js
+++ b/docs/testem.js
@@ -1,5 +1,5 @@
-'use strict';;
-if (typeof module !== "undefined") {
+'use strict';
+if (typeof module !== 'undefined') {
   module.exports = {
     test_page: 'tests/index.html?hidepassed',
     disable_watching: true,
diff --git a/docs/tsconfig.json b/docs/tsconfig.json
index 5a86e296..8b688340 100644
--- a/docs/tsconfig.json
+++ b/docs/tsconfig.json
@@ -14,10 +14,6 @@
       "docs/*": ["app/*"],
       "*": ["types/*"]
     },
-    "types": [
-      "ember-source/types",
-      "@embroider/core/virtual",
-      "vite/client"
-    ]
+    "types": ["ember-source/types", "@embroider/core/virtual", "vite/client"]
   }
 }

From 61bfc93153f82be20d1cec6498937417a646d9ce Mon Sep 17 00:00:00 2001
From: Markus Sanin <markus.sanin@zeppelin-group.com>
Date: Sun, 15 Feb 2026 18:53:07 +0100
Subject: [PATCH 5/5] Remove tests

---
 .../integration/components/code-block-test.ts | 19 -------------------
 .../components/code-inline-test.ts            | 19 -------------------
 2 files changed, 38 deletions(-)
 delete mode 100644 docs/tests/integration/components/code-block-test.ts
 delete mode 100644 docs/tests/integration/components/code-inline-test.ts

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');");
-  });
-});