ember-freestyle 0.19.0 → 0.21.0

package/CHANGELOG.md

@@ -4,6 +4,37 @@ All notable changes to this project will be documented in this file.
 
 
 
+
+
+## v0.21.0 (2024-09-27)
+
+#### :boom: Breaking Change
+* [#995](https://github.com/chrislopresto/ember-freestyle/pull/995) Provide an extendable template registry ([@bertdeblock](https://github.com/bertdeblock))
+* [#996](https://github.com/chrislopresto/ember-freestyle/pull/996) Drop support for Node versions below v18 ([@bertdeblock](https://github.com/bertdeblock))
+
+#### :rocket: Enhancement
+* [#999](https://github.com/chrislopresto/ember-freestyle/pull/999) Update AST transform to replace curly braces ([@lukemelia](https://github.com/lukemelia))
+* [#995](https://github.com/chrislopresto/ember-freestyle/pull/995) Provide an extendable template registry ([@bertdeblock](https://github.com/bertdeblock))
+
+#### :bug: Bug Fix
+* [#998](https://github.com/chrislopresto/ember-freestyle/pull/998) Fix import path for `SafeString` type ([@bertdeblock](https://github.com/bertdeblock))
+
+#### :house: Internal
+* [#1005](https://github.com/chrislopresto/ember-freestyle/pull/1005) Type fixes ([@lukemelia](https://github.com/lukemelia))
+
+#### Committers: 3
+- Bert De Block ([@bertdeblock](https://github.com/bertdeblock))
+- Luke Melia ([@lukemelia](https://github.com/lukemelia))
+- [@tintinthong](https://github.com/tintinthong)
+
+## v0.20.0 (2023-10-07)
+
+#### :rocket: Enhancement
+* [#973](https://github.com/chrislopresto/ember-freestyle/pull/973) Eliminate uppercase'ing of menu items and update menu item hover state ([@lukemelia](https://github.com/lukemelia))
+
+#### Committers: 1
+- Luke Melia ([@lukemelia](https://github.com/lukemelia))
+
 ## v0.19.0 (2023-09-28)
 
 #### :boom: Breaking Change

package/README.md

@@ -25,10 +25,10 @@ To see Ember Freestyle in action, visit [https://chrislopresto.github.io/ember-f
 
 * Ember.js v3.24 or above
 * Ember CLI v3.24 or above
-* Node.js v14 or above
+* Node.js v18 or above
 * Ember Auto Import v2 or above
 
-ember-freestyle includes Typescript types and provides `addon/glint.ts` for Glint usage
+ember-freestyle includes TypeScript types, and provides a template registry that can be imported from `ember-freestyle/template-registry` for Glint usage.
 
 ## Installation
 
@@ -113,6 +113,31 @@ You should include `ember-freestyle` in your `devDependencies` so that apps
 using your addon will not include Ember Freestyle CSS and JavaScript in their
 production builds.
 
+### In V2 addons
+
+You will need to configure babel to run ember-freestyle's AST Transform in order to capture
+source code from Freestyle::Usage example blocks. For example:
+
+```js
+// babel.config.mjs
+import FreestyleTransform from 'ember-freestyle/lib/ast-transform.js';
+
+export default {
+  plugins: [
+    // ...
+    [
+      'babel-plugin-ember-template-compilation',
+      {
+        targetFormat: 'hbs',
+        transforms: [FreestyleTransform],
+      },
+    ],
+    // ...
+  ],
+};
+
+```
+
 ## Contributing
 
 See the [Contributing](CONTRIBUTING.md) guide for details.

package/RELEASE.md

@@ -31,7 +31,7 @@ Once the prep work is completed, the actual release is straight forward:
 * First, ensure that you have installed your projects dependencies:
 
 ```sh
-yarn install
+pnpn install
 ```
 
 * Second, ensure that you have obtained a
@@ -50,7 +50,7 @@ yarn install
 * And last (but not least 😁) do your release.
 
 ```sh
-npx release-it
+pnpm release
 ```
 
 [release-it](https://github.com/release-it/release-it/) manages the actual

package/addon/components/freestyle/usage/index.hbs

@@ -84,7 +84,7 @@
     {{/if}}
 
     {{#if this.showSource}}
-      <div class="FreestyleUsage-sourceContainer" {{did-insert this.highlightSource}}>
+      <div class="FreestyleUsage-sourceContainer" {{ensure-freestyle-theme @highlightJsTheme}}>
         <FreestyleSource @source={{@source}} />
       </div>
     {{/if}}

package/addon/components/freestyle/usage/index.ts

@@ -71,14 +71,6 @@ export default class extends Component<Signature> {
     return this.args.slug || this.args.name;
   }
 
-  get computedTheme(): string {
-    return this.args.highlightJsTheme || this.emberFreestyle.defaultTheme;
-  }
-
-  @action highlightSource(): void {
-    this.emberFreestyle.ensureHljsTheme(this.computedTheme);
-  }
-
   @action setFocus(): void {
     this.emberFreestyle.focus = this.effectiveSlug ?? null;
   }

package/addon/components/freestyle-palette-item/index.ts

@@ -1,6 +1,6 @@
 import Component from '@glimmer/component';
 import { htmlSafe } from '@ember/template';
-import { SafeString } from '@ember/template/-private/handlebars';
+import { type SafeString } from '@ember/template';
 import { PaletteItem } from '../freestyle-palette';
 
 interface Signature {

package/addon/components/freestyle-section/index.hbs

@@ -1,6 +1,5 @@
 <div
   class="FreestyleSection {{if this.show 'FreestyleSection--showing' 'FreestyleSection--hidden'}}"
-  {{did-insert (fn this.emberFreestyle.registerSection @name null)}}
   ...attributes
 >
   {{#if this.show}}

package/addon/components/freestyle-section/index.ts

@@ -1,9 +1,9 @@
 import Component from '@glimmer/component';
 import type EmberFreestyleService from '../../services/ember-freestyle';
 import type { WithBoundArgs } from '@glint/template';
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { inject as service } from '@ember/service';
 import FreestyleSubsection from '../freestyle-subsection';
+import Owner from '@ember/owner';
 
 interface Signature {
   Element: HTMLDivElement;
@@ -20,6 +20,11 @@ interface Signature {
 export default class FreestyleSection extends Component<Signature> {
   @service('ember-freestyle') declare emberFreestyle: EmberFreestyleService;
 
+  constructor(owner: Owner, args: Signature['Args']) {
+    super(owner, args);
+    this.emberFreestyle.registerSection(this.args.name);
+  }
+
   get show(): boolean {
     return this.emberFreestyle.shouldShowSection(this.args.name);
   }

package/addon/components/freestyle-source/index.hbs

@@ -2,5 +2,5 @@
   <div class="FreestyleSource-title">
     Source
   </div>
-  <pre class="handlebars" tabindex="0" {{did-insert this.highlight}}>{{this.renderableSource}}</pre>
+  <pre class="handlebars" tabindex="0" {{this.highlight}}>{{this.renderableSource}}</pre>
 {{/if}}

package/addon/components/freestyle-source/index.ts

@@ -1,11 +1,9 @@
 import Component from '@glimmer/component';
 import EmberFreestyleService from '../../services/ember-freestyle';
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import { inject as service } from '@ember/service';
-import { tracked } from '@glimmer/tracking';
 import { reads } from 'macro-decorators';
-import { action, get } from '@ember/object';
-/* eslint-enable @typescript-eslint/no-unused-vars */
+import { get } from '@ember/object';
+import { modifier } from 'ember-modifier';
 
 interface Signature {
   Args: {
@@ -22,7 +20,7 @@ export default class FreestyleSource extends Component<Signature> {
     string,
     unknown
   >;
-  @tracked initialHighlightComplete = false;
+  initialHighlightComplete = false;
   preElement: HTMLElement | undefined;
 
   private dynamafy(sourceCode: string) {
@@ -61,7 +59,11 @@ export default class FreestyleSource extends Component<Signature> {
     if (!this.args.source) {
       return '';
     }
-    let result = this.args.source.replace(/^(\s*\n)*/, '').replace(/\s*$/, '');
+    let result = this.args.source
+      .replace(/^(\s*\n)*/, '')
+      .replace(/\s*$/, '')
+      .replace(/&#123;/g, '{')
+      .replace(/&#125;/g, '}');
 
     if (this.args.isDynamic) {
       result = this.dynamafy(result);
@@ -78,12 +80,11 @@ export default class FreestyleSource extends Component<Signature> {
     return result;
   }
 
-  @action
-  highlight(preElement: HTMLElement): void {
+  highlight = modifier((preElement: HTMLElement) => {
     this.preElement = preElement;
     if (preElement && this.renderableSource) {
       this.emberFreestyle.highlight(preElement);
     }
     this.initialHighlightComplete = true;
-  }
+  });
 }

package/addon/components/freestyle-subsection/index.hbs

@@ -1,5 +1,4 @@
 <div class="FreestyleSubsection {{if this.show 'is-showing' 'is-hidden'}}"
-  {{did-insert (fn this.emberFreestyle.registerSection @section @name)}}
   ...attributes
 >
   {{#if this.show}}

package/addon/components/freestyle-subsection/index.ts

@@ -1,7 +1,7 @@
 import Component from '@glimmer/component';
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { inject as service } from '@ember/service';
 import EmberFreestyleService from '../../services/ember-freestyle';
+import Owner from '@ember/owner';
 
 interface Signature {
   Element: HTMLDivElement;
@@ -15,6 +15,12 @@ interface Signature {
 }
 export default class FreestyleSubsection extends Component<Signature> {
   @service('ember-freestyle') declare emberFreestyle: EmberFreestyleService;
+
+  constructor(owner: Owner, args: Signature['Args']) {
+    super(owner, args);
+    this.emberFreestyle.registerSection(this.args.section, this.args.name);
+  }
+
   get show(): boolean {
     return this.emberFreestyle.shouldShowSubsection(
       this.args.section,

package/addon/components/freestyle-usage/index.hbs

@@ -1,6 +1,6 @@
 <div
   class="FreestyleUsage {{if @inline 'FreestyleUsage--inline'}}"
-  {{did-insert this.ensureTheme}}
+  {{ensure-freestyle-theme}}
   ...attributes
 >
   {{#if this.show}}

package/addon/components/freestyle-usage-controls/index.hbs

@@ -1,4 +1,4 @@
-<div class="FreestyleUsageControls" {{did-insert this.setup}}>
+<div class="FreestyleUsageControls" {{this.setup}}>
   {{#if this.showHeader}}
     <div class="FreestyleUsageControls-header">
       Settings
@@ -7,7 +7,7 @@
   <div class="FreestyleUsageControls-item">
     <div class="FreestyleUsageControls-itemControl">
       <label class="FreestyleUsageControls-itemLabel">
-        <Input @type="checkbox" @checked={{this.showLabels}} />
+        <input type="checkbox" checked={{this.showLabels}} {{on 'click' (this.toggle 'showLabels')}} />
         Show Labels
       </label>
     </div>
@@ -15,7 +15,7 @@
   <div class="FreestyleUsageControls-item">
     <div class="FreestyleUsageControls-itemControl">
       <label class="FreestyleUsageControls-itemLabel">
-        <Input @type="checkbox" @checked={{this.showNotes}} />
+        <input type="checkbox" checked={{this.showNotes}} {{on 'click' (this.toggle 'showNotes')}} />
         Show Notes
       </label>
     </div>
@@ -23,7 +23,7 @@
   <div class="FreestyleUsageControls-item">
     <div class="FreestyleUsageControls-itemControl">
       <label class="FreestyleUsageControls-itemLabel">
-        <Input @type="checkbox" @checked={{this.showCode}} />
+        <input type="checkbox" checked={{this.showCode}} {{on 'click' (this.toggle 'showCode')}} />
         Show Code
       </label>
     </div>
@@ -31,7 +31,7 @@
   <div class="FreestyleUsageControls-item">
     <div class="FreestyleUsageControls-itemControl">
       <label class="FreestyleUsageControls-itemLabel">
-        <Input @type="checkbox" @checked={{this.showApi}} />
+        <input type="checkbox" checked={{this.showApi}} {{on 'click' (this.toggle 'showApi')}} />
         Show API
       </label>
     </div>
@@ -39,9 +39,8 @@
   {{#if this.showFocus}}
     <div class="FreestyleUsageControls-item FreestyleUsageControls-item--focus">
       <div class="FreestyleUsageControls-itemControl">
-        <label class="FreestyleUsageControls-label--focus">Focus a section
-          <Input class="FreestyleUsageControls-input--focus" @value={{this.focus}} @enter={{this.setFocus}} />
-        </label>
+        {{!-- template-lint-disable require-input-label --}}
+        <input type="text" class="FreestyleUsageControls-input--focus" value={{this.focus}} {{on 'input' this.updateFocus}} {{on 'keydown' this.setFocusOnEnterKey}} />
         <button class="FreestyleUsageControls-button" {{on 'click' this.setFocus}} type="button">Focus</button>
       </div>
     </div>

package/addon/components/freestyle-usage-controls/index.ts

@@ -2,11 +2,11 @@ import Component from '@glimmer/component';
 import { schedule } from '@ember/runloop';
 import { capitalize } from '@ember/string';
 import type EmberFreestyleService from '../../services/ember-freestyle';
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import { inject as service } from '@ember/service';
 import { action, get, set } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
-/* eslint-enable @typescript-eslint/no-unused-vars */
+import { modifier } from 'ember-modifier';
+import { helper } from '@ember/component/helper';
 
 export default class FreestyleUsageControls extends Component {
   @service('ember-freestyle') declare emberFreestyle: EmberFreestyleService;
@@ -40,11 +40,29 @@ export default class FreestyleUsageControls extends Component {
   showFocus = true;
   @tracked focus: string | null = null;
 
-  @action setup(): void {
+  setup = modifier(() => {
     schedule('afterRender', () => {
       this.focus = this.emberFreestyle.focus;
     });
-  }
+  });
+
+  toggle = helper(
+    ([prop]: ['showNotes' | 'showLabels' | 'showCode' | 'showApi']) => {
+      // eslint-disable-next-line @typescript-eslint/no-this-alias
+      const component = this;
+      return () => {
+        const currentValue = get(component, prop) as boolean;
+        const newValue = !currentValue;
+        set(component, prop, newValue);
+      };
+    },
+  );
+
+  setFocusOnEnterKey = (ev: KeyboardEvent) => {
+    if (ev.key === 'Enter') {
+      this.setFocus();
+    }
+  };
 
   @action
   toggleUsage(usageType: 'labels' | 'notes' | 'code' | 'api'): void {
@@ -58,6 +76,10 @@ export default class FreestyleUsageControls extends Component {
 
   @action
   setFocus(): void {
-    this.emberFreestyle.set('focus', this.focus);
+    this.emberFreestyle.focus = this.focus;
   }
+
+  updateFocus = (ev: Event) => {
+    this.focus = (ev.target as HTMLInputElement).value;
+  };
 }

package/addon/modifiers/ensure-freestyle-theme.ts

@@ -0,0 +1,22 @@
+import Modifier from 'ember-modifier';
+import { inject as service } from '@ember/service';
+import type EmberFreestyleService from '../services/ember-freestyle';
+
+interface Signature {
+  Element: HTMLElement;
+  Args: {
+    Positional: [highlightJsTheme?: string];
+  };
+}
+
+export default class EnsureFreestyleTheme extends Modifier<Signature> {
+  @service declare emberFreestyle: EmberFreestyleService;
+
+  modify(
+    _element: HTMLElement,
+    positional: Signature['Args']['Positional'],
+  ): void {
+    const computedTheme = positional?.[0] || this.emberFreestyle.defaultTheme;
+    this.emberFreestyle.ensureHljsTheme(computedTheme);
+  }
+}

package/addon/services/ember-freestyle.ts

@@ -1,15 +1,13 @@
 import Service from '@ember/service';
 import { isBlank, isPresent } from '@ember/utils';
-import { TrackedArray } from 'tracked-built-ins';
 import { Promise } from 'rsvp';
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
-/* eslint-enable @typescript-eslint/no-unused-vars */
+import { scheduleOnce } from '@ember/runloop';
 
 export interface Section {
   name: string;
-  subsections: TrackedArray<Subsection>;
+  subsections: Subsection[];
 }
 
 interface Subsection {
@@ -22,7 +20,7 @@ export default class EmberFreestyleService extends Service {
   @tracked showCode = true;
   @tracked showApi = true;
 
-  @tracked menu: TrackedArray<Section> | null = null;
+  @tracked menu: Section[] = [];
   @tracked showMenu = true;
   @tracked allowRenderingAllSections = true;
 
@@ -125,16 +123,15 @@ export default class EmberFreestyleService extends Service {
 
   @action
   registerSection(sectionName: string, subsectionName = ''): void {
-    const menu: TrackedArray<Section> =
-      this.menu || new TrackedArray<Section>();
-    if (!menu.find((s) => s.name === sectionName)) {
-      menu.push({
+    this.menu;
+    if (!this.menu.find((s) => s.name === sectionName)) {
+      this.menu.push({
         name: sectionName,
-        subsections: new TrackedArray<Subsection>(),
+        subsections: [],
       });
     }
     if (isPresent(subsectionName)) {
-      const section = menu.find((s) => s.name === sectionName);
+      const section = this.menu.find((s) => s.name === sectionName);
       if (
         section &&
         !section.subsections.find((s) => s.name === subsectionName)
@@ -142,10 +139,16 @@ export default class EmberFreestyleService extends Service {
         section.subsections.push({
           name: subsectionName,
         });
+        section.subsections = [...section.subsections];
       }
     }
-    this.menu = menu;
+    scheduleOnce('afterRender', this, this.notifyMenuChanged);
   }
+
+  notifyMenuChanged = () => {
+    // eslint-disable-next-line no-self-assign
+    this.menu = this.menu;
+  };
 }
 
 // DO NOT DELETE: this is how TypeScript knows how to look up your services.

package/addon/template-registry.ts

@@ -0,0 +1,109 @@
+// components
+import type FreestyleAnnotation from 'ember-freestyle/components/freestyle-annotation';
+import type FreestyleCollection from 'ember-freestyle/components/freestyle-collection';
+import type FreestyleDynamicInputSelectOption from 'ember-freestyle/components/freestyle-dynamic-input-select-option';
+import type FreestyleDynamicInput from 'ember-freestyle/components/freestyle-dynamic-input';
+import type FreestyleDynamic from 'ember-freestyle/components/freestyle-dynamic';
+import type FreestyleFocusButton from 'ember-freestyle/components/freestyle-focus-button';
+import type FreestyleGuide from 'ember-freestyle/components/freestyle-guide';
+import type FreestyleMenu from 'ember-freestyle/components/freestyle-menu';
+import type FreestylePaletteItem from 'ember-freestyle/components/freestyle-palette-item';
+import type FreestylePalette from 'ember-freestyle/components/freestyle-palette';
+import type FreestyleSection from 'ember-freestyle/components/freestyle-section';
+import type FreestyleSource from 'ember-freestyle/components/freestyle-source';
+import type FreestyleSubsection from 'ember-freestyle/components/freestyle-subsection';
+import type FreestyleTypeface from 'ember-freestyle/components/freestyle-typeface';
+import type FreestyleUsageControls from 'ember-freestyle/components/freestyle-usage-controls';
+import type FreestyleUsageLegacy from 'ember-freestyle/components/freestyle-usage';
+import type FreestyleVariantList from 'ember-freestyle/components/freestyle-variant-list';
+import type FreestyleVariant from 'ember-freestyle/components/freestyle-variant';
+import type FreestyleUsageArgument from 'ember-freestyle/components/freestyle/usage/argument';
+import type FreestyleUsageArray from 'ember-freestyle/components/freestyle/usage/array';
+import type FreestyleUsageBasicCssVariable from 'ember-freestyle/components/freestyle/usage/basic-css-variable';
+import type FreestyleUsageBoolControl from 'ember-freestyle/components/freestyle/usage/bool/control';
+import type FreestyleUsageBool from 'ember-freestyle/components/freestyle/usage/bool';
+import type FreestyleUsageComponentLikeControl from 'ember-freestyle/components/freestyle/usage/component-like/control';
+import type FreestyleUsageComponentLike from 'ember-freestyle/components/freestyle/usage/component-like';
+import type FreestyleUsage from 'ember-freestyle/components/freestyle/usage';
+import type FreestyleUsageNumberControl from 'ember-freestyle/components/freestyle/usage/number/control';
+import type FreestyleUsageNumber from 'ember-freestyle/components/freestyle/usage/number';
+import type FreestyleUsageObjectControl from 'ember-freestyle/components/freestyle/usage/object/control';
+import type FreestyleUsageObject from 'ember-freestyle/components/freestyle/usage/object';
+import type FreestyleUsageStringControl from 'ember-freestyle/components/freestyle/usage/string/control';
+import type FreestyleUsageString from 'ember-freestyle/components/freestyle/usage/string';
+
+// modifiers
+import type FreestyleHighlight from 'ember-freestyle/modifiers/freestyle-highlight';
+import EnsureFreestyleTheme from './modifiers/ensure-freestyle-theme';
+
+export default interface EmberFreestyleRegistry {
+  // components
+  'freestyle-annotation': typeof FreestyleAnnotation;
+  FreestyleAnnotation: typeof FreestyleAnnotation;
+  'freestyle-collection': typeof FreestyleCollection;
+  FreestyleCollection: typeof FreestyleCollection;
+  'freestyle-dynamic-input-select-option': typeof FreestyleDynamicInputSelectOption;
+  FreestyleDynamicInputSelectOption: typeof FreestyleDynamicInputSelectOption;
+  'freestyle-dynamic-input': typeof FreestyleDynamicInput;
+  FreestyleDynamicInput: typeof FreestyleDynamicInput;
+  'freestyle-dynamic': typeof FreestyleDynamic;
+  FreestyleDynamic: typeof FreestyleDynamic;
+  'freestyle-focus-button': typeof FreestyleFocusButton;
+  FreestyleFocusButton: typeof FreestyleFocusButton;
+  'freestyle-guide': typeof FreestyleGuide;
+  FreestyleGuide: typeof FreestyleGuide;
+  'freestyle-menu': typeof FreestyleMenu;
+  FreestyleMenu: typeof FreestyleMenu;
+  'freestyle-palette-item': typeof FreestylePaletteItem;
+  FreestylePaletteItem: typeof FreestylePaletteItem;
+  'freestyle-palette': typeof FreestylePalette;
+  FreestylePalette: typeof FreestylePalette;
+  'freestyle-section': typeof FreestyleSection;
+  FreestyleSection: typeof FreestyleSection;
+  'freestyle-source': typeof FreestyleSource;
+  FreestyleSource: typeof FreestyleSource;
+  'freestyle-subsection': typeof FreestyleSubsection;
+  FreestyleSubsection: typeof FreestyleSubsection;
+  'freestyle-typeface': typeof FreestyleTypeface;
+  FreestyleTypeface: typeof FreestyleTypeface;
+  'freestyle-usage-controls': typeof FreestyleUsageControls;
+  FreestyleUsageControls: typeof FreestyleUsageControls;
+  'freestyle-usage': typeof FreestyleUsageLegacy;
+  FreestyleUsage: typeof FreestyleUsageLegacy;
+  'freestyle-variant-list': typeof FreestyleVariantList;
+  FreestyleVariantList: typeof FreestyleVariantList;
+  'freestyle-variant': typeof FreestyleVariant;
+  FreestyleVariant: typeof FreestyleVariant;
+  'freestyle/usage/argument': typeof FreestyleUsageArgument;
+  'Freestyle::Usage::Argument': typeof FreestyleUsageArgument;
+  'freestyle/usage/array': typeof FreestyleUsageArray;
+  'Freestyle::Usage::Array': typeof FreestyleUsageArray;
+  'freestyle/usage/basic-css-variable': typeof FreestyleUsageBasicCssVariable;
+  'Freestyle::Usage::BasicCssVariable': typeof FreestyleUsageBasicCssVariable;
+  'freestyle/usage/bool/control': typeof FreestyleUsageBoolControl;
+  'Freestyle::Usage::Bool::Control': typeof FreestyleUsageBoolControl;
+  'freestyle/usage/bool': typeof FreestyleUsageBool;
+  'Freestyle::Usage::Bool': typeof FreestyleUsageBool;
+  'freestyle/usage/component-like/control': typeof FreestyleUsageComponentLikeControl;
+  'Freestyle::Usage::ComponentLike::Control': typeof FreestyleUsageComponentLikeControl;
+  'freestyle/usage/component-like': typeof FreestyleUsageComponentLike;
+  'Freestyle::Usage::ComponentLike': typeof FreestyleUsageComponentLike;
+  'freestyle/usage': typeof FreestyleUsage;
+  'Freestyle::Usage': typeof FreestyleUsage;
+  'freestyle/usage/number/control': typeof FreestyleUsageNumberControl;
+  'Freestyle::Usage::Number::Control': typeof FreestyleUsageNumberControl;
+  'freestyle/usage/number': typeof FreestyleUsageNumber;
+  'Freestyle::Usage::Number': typeof FreestyleUsageNumber;
+  'freestyle/usage/object/control': typeof FreestyleUsageObjectControl;
+  'Freestyle::Usage::Object::Control': typeof FreestyleUsageObjectControl;
+  'freestyle/usage/object': typeof FreestyleUsageObject;
+  'Freestyle::Usage::Object': typeof FreestyleUsageObject;
+  'freestyle/usage/string/control': typeof FreestyleUsageStringControl;
+  'Freestyle::Usage::String::Control': typeof FreestyleUsageStringControl;
+  'freestyle/usage/string': typeof FreestyleUsageString;
+  'Freestyle::Usage::String': typeof FreestyleUsageString;
+
+  // modifiers
+  'freestyle-highlight': typeof FreestyleHighlight;
+  'ensure-freestyle-theme': typeof EnsureFreestyleTheme;
+}

package/app/modifiers/ensure-freestyle-theme.js

@@ -0,0 +1 @@
+export { default } from 'ember-freestyle/modifiers/ensure-freestyle-theme';

package/app/styles/components/freestyle-menu.scss

@@ -5,22 +5,27 @@
 
   &-item,
   &-submenuItem {
-    padding-top: 0.6rem;
-    text-transform: uppercase;
+    padding-top: 0.1rem;
   }
 
   &-itemLink,
   &-submenuItemLink {
+    border-radius: 6px;
     color: $FreestyleGuide-color--foreground;
+    display: block;
+    padding: 0.3rem 0.3rem 0.3rem 0.5rem;
     text-decoration: none;
 
     &.active {
-      color: $FreestyleGuide-color--primary;
+      background-color: $FreestyleGuide-color--primary;
+      color: white;
       text-decoration: none;
+      font-weight: bold;
     }
 
     &:hover {
-      color: $FreestyleGuide-color--accent;
+      background-color: $FreestyleGuide-color--primary;
+      color: white;
       text-decoration: none;
     }
   }

package/app/styles/components/freestyle-section.scss

@@ -9,7 +9,6 @@ $FreestyleSection-borderColor: #ccc !default;
     margin: 0 1rem;
     max-width: calc(1200px - 1rem);
     padding: 1rem 0 0.4rem;
-    text-transform: uppercase;
   }
 
   &--hidden {

package/app/styles/components/freestyle-subsection.scss

@@ -7,6 +7,5 @@
     font-size: 1.3rem;
     margin: 0 1rem;
     padding: 0.8rem 0 0.4rem;
-    text-transform: uppercase;
   }
 }

package/components/freestyle/usage/index.d.ts

@@ -40,8 +40,6 @@ export default class extends Component<Signature> {
     get showApi(): boolean;
     get show(): boolean;
     get effectiveSlug(): string | undefined;
-    get computedTheme(): string;
-    highlightSource(): void;
     setFocus(): void;
 }
 export {};

package/components/freestyle-palette-item/index.d.ts

@@ -1,5 +1,5 @@
 import Component from '@glimmer/component';
-import { SafeString } from '@ember/template/-private/handlebars';
+import { type SafeString } from '@ember/template';
 import { PaletteItem } from '../freestyle-palette';
 interface Signature {
     Element: HTMLDivElement;

package/components/freestyle-section/index.d.ts

@@ -2,6 +2,7 @@ import Component from '@glimmer/component';
 import type EmberFreestyleService from '../../services/ember-freestyle';
 import type { WithBoundArgs } from '@glint/template';
 import FreestyleSubsection from '../freestyle-subsection';
+import Owner from '@ember/owner';
 interface Signature {
     Element: HTMLDivElement;
     Args: {
@@ -17,6 +18,7 @@ interface Signature {
 }
 export default class FreestyleSection extends Component<Signature> {
     emberFreestyle: EmberFreestyleService;
+    constructor(owner: Owner, args: Signature['Args']);
     get show(): boolean;
 }
 export {};

package/components/freestyle-source/index.d.ts

@@ -15,6 +15,12 @@ export default class FreestyleSource extends Component<Signature> {
     preElement: HTMLElement | undefined;
     private dynamafy;
     get renderableSource(): string;
-    highlight(preElement: HTMLElement): void;
+    highlight: import("ember-modifier").FunctionBasedModifier<{
+        Args: {
+            Positional: unknown[];
+            Named: import("ember-modifier/-private/signature").EmptyObject;
+        };
+        Element: HTMLElement;
+    }>;
 }
 export {};

package/components/freestyle-subsection/index.d.ts

@@ -1,5 +1,6 @@
 import Component from '@glimmer/component';
 import EmberFreestyleService from '../../services/ember-freestyle';
+import Owner from '@ember/owner';
 interface Signature {
     Element: HTMLDivElement;
     Args: {
@@ -12,6 +13,7 @@ interface Signature {
 }
 export default class FreestyleSubsection extends Component<Signature> {
     emberFreestyle: EmberFreestyleService;
+    constructor(owner: Owner, args: Signature['Args']);
     get show(): boolean;
 }
 export {};

package/components/freestyle-usage-controls/index.d.ts

@@ -13,7 +13,22 @@ export default class FreestyleUsageControls extends Component {
     showHeader: boolean;
     showFocus: boolean;
     focus: string | null;
-    setup(): void;
+    setup: import("ember-modifier").FunctionBasedModifier<{
+        Args: {
+            Positional: unknown[];
+            Named: import("ember-modifier/-private/signature").EmptyObject;
+        };
+        Element: Element;
+    }>;
+    toggle: import("@ember/component/helper").FunctionBasedHelper<{
+        Args: {
+            Positional: ["showLabels" | "showNotes" | "showCode" | "showApi"];
+            Named: import("@ember/component/helper").EmptyObject;
+        };
+        Return: () => void;
+    }>;
+    setFocusOnEnterKey: (ev: KeyboardEvent) => void;
     toggleUsage(usageType: 'labels' | 'notes' | 'code' | 'api'): void;
     setFocus(): void;
+    updateFocus: (ev: Event) => void;
 }

package/lib/ast-transform.js

@@ -48,6 +48,10 @@ function cleanupNamedBlocksPolyfillSyntax(sourceString) {
   return sourceString;
 }
 
+function escapeCurlyBraces(s) {
+  return s.replace(/\{/g, '{').replace(/\}/g, '}');
+}
+
 function extractSource(nodes, contents) {
   // nodes should be a contiguous collection of ast nodes
   let startNode = nodes[0];
@@ -57,7 +61,7 @@ function extractSource(nodes, contents) {
   let lines = contents.split('\n').slice(start.line - 1, end.line);
   lines[0] = new Array(start.column).join(' ') + lines[0].slice(start.column);
   lines[lines.length - 1] = lines[lines.length - 1].slice(0, end.column);
-  return stripIndent(lines.join('\n'));
+  return escapeCurlyBraces(stripIndent(lines.join('\n')));
 }
 
 module.exports = function ({ contents, syntax }) {

package/modifiers/ensure-freestyle-theme.d.ts

@@ -0,0 +1,13 @@
+import Modifier from 'ember-modifier';
+import type EmberFreestyleService from '../services/ember-freestyle';
+interface Signature {
+    Element: HTMLElement;
+    Args: {
+        Positional: [highlightJsTheme?: string];
+    };
+}
+export default class EnsureFreestyleTheme extends Modifier<Signature> {
+    emberFreestyle: EmberFreestyleService;
+    modify(_element: HTMLElement, positional: Signature['Args']['Positional']): void;
+}
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-freestyle",
-  "version": "0.19.0",
+  "version": "0.21.0",
   "description": "Create a living styleguide for your Ember app.",
   "keywords": [
     "ember-addon"
@@ -36,17 +36,16 @@
     "postpack": "ember ts:clean"
   },
   "dependencies": {
-    "@ember/render-modifiers": "^2.0.4",
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
     "ember-auto-import": "^2.4.3",
-    "ember-cli-babel": "^7.26.11",
-    "ember-cli-htmlbars": "^6.1.1",
+    "ember-cli-babel": "^8.2.0",
+    "ember-cli-htmlbars": "^6.3.0",
     "ember-cli-typescript": "^5.1.1",
     "ember-focus-trap": "^1.0.1",
     "ember-modifier": "^3.2.7 || ^4.0.0",
     "ember-named-blocks-polyfill": "^0.2.5",
-    "ember-truth-helpers": "^3.1.1",
+    "ember-truth-helpers": "^4.0.3",
     "json-formatter-js": "^2.3.4",
     "macro-decorators": "^0.1.2",
     "strip-indent": "^3.0.0",
@@ -57,31 +56,31 @@
     "@ember/string": "^3.1.1",
     "@ember/test-helpers": "^3.2.0",
     "@embroider/test-setup": "^3.0.1",
-    "@glint/core": "^1.2.0",
-    "@glint/template": "^1.2.0",
-    "@glint/environment-ember-loose": "^1.2.0",
+    "@glint/core": "^1.4.0",
+    "@glint/environment-ember-loose": "^1.4.0",
+    "@glint/template": "^1.4.0",
     "@release-it-plugins/lerna-changelog": "^5.0.0",
-    "@tsconfig/ember": "^1.0.1",
-    "@types/ember": "^4.0.1",
+    "@tsconfig/ember": "^3.0.1",
+    "@types/ember": "^4.0.6",
     "@types/ember-resolver": "^5.0.11",
     "@types/ember__application": "^4.0.2",
     "@types/ember__array": "^4.0.2",
-    "@types/ember__component": "^4.0.10",
+    "@types/ember__component": "^4.0.18",
     "@types/ember__controller": "^4.0.4",
     "@types/ember__debug": "^4.0.1",
     "@types/ember__engine": "^4.0.4",
     "@types/ember__error": "^4.0.3",
     "@types/ember__helper": "^4.0.0",
-    "@types/ember__modifier": "^4.0.2",
     "@types/ember__object": "^4.0.4",
+    "@types/ember__owner": "^4.0.9",
     "@types/ember__polyfills": "^4.0.0",
     "@types/ember__routing": "^4.0.10",
     "@types/ember__runloop": "^4.0.1",
     "@types/ember__service": "^4.0.0",
     "@types/ember__string": "^3.0.9",
-    "@types/ember__template": "^4.0.0",
+    "@types/ember__template": "^4.0.7",
     "@types/ember__test": "^4.0.0",
-    "@types/ember__utils": "^4.0.1",
+    "@types/ember__utils": "^4.0.4",
     "@types/qunit": "^2.19.3",
     "@types/remarkable": "^2.0.3",
     "@types/rsvp": "^4.0.4",
@@ -109,8 +108,8 @@
     "ember-source": "~4.12.3",
     "ember-source-channel-url": "^3.0.0",
     "ember-style-modifier": "^0.8.0",
-    "ember-template-imports": "^3.3.1",
-    "ember-template-lint": "^5.11.2",
+    "ember-template-imports": "^4.1.2",
+    "ember-template-lint": "^6.0.0",
     "ember-try": "^2.0.0",
     "eslint": "^8.35.0",
     "eslint-config-ember": "0.3.0",
@@ -128,24 +127,24 @@
     "qunit-dom": "^2.0.0",
     "release-it": "^14.10.0",
     "remarkable": "^2.0.1",
-    "sass": "^1.55.0",
-    "stylelint": "^15.10.1",
+    "sass": "^1.68.0",
+    "stylelint": "^15.10.3",
     "stylelint-config-prettier": "^9.0.5",
     "stylelint-config-recommended-scss": "^13.0.0",
     "stylelint-prettier": "^4.0.2",
     "stylelint-scss": "^4.3.0",
-    "typescript": "^4.9.5",
+    "typescript": "^5.5.0",
     "webpack": "^5.76.0"
   },
   "peerDependencies": {
     "@ember/string": "^3.1.1"
   },
   "engines": {
-    "node": "14.* || >= 16"
+    "node": ">= 18"
   },
   "volta": {
-    "node": "16.20.1",
-    "yarn": "1.22.19"
+    "node": "20.14.0",
+    "pnpm": "9.2.0"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"

package/services/ember-freestyle.d.ts

@@ -1,9 +1,8 @@
 import Service from '@ember/service';
-import { TrackedArray } from 'tracked-built-ins';
 import { Promise } from 'rsvp';
 export interface Section {
     name: string;
-    subsections: TrackedArray<Subsection>;
+    subsections: Subsection[];
 }
 interface Subsection {
     name: string;
@@ -13,7 +12,7 @@ export default class EmberFreestyleService extends Service {
     showNotes: boolean;
     showCode: boolean;
     showApi: boolean;
-    menu: TrackedArray<Section> | null;
+    menu: Section[];
     showMenu: boolean;
     allowRenderingAllSections: boolean;
     defaultTheme: string;
@@ -34,6 +33,7 @@ export default class EmberFreestyleService extends Service {
     ensureHljsTheme(theme: string): void;
     ensureHljsLanguage(language: string): Promise<void>;
     registerSection(sectionName: string, subsectionName?: string): void;
+    notifyMenuChanged: () => void;
 }
 declare module '@ember/service' {
     interface Registry {

package/{addon/glint.ts → template-registry.d.ts}

@@ -1,82 +1,102 @@
-import type FreestyleUsage from 'ember-freestyle/components/freestyle/usage';
-import type FreestyleUsageArgument from 'ember-freestyle/components/freestyle/usage/argument';
-import type FreestyleUsageArray from 'ember-freestyle/components/freestyle/usage/array';
-import type FreestyleUsageBasicCssVariable from 'ember-freestyle/components/freestyle/usage/basic-css-variable';
-import type FreestyleUsageBool from 'ember-freestyle/components/freestyle/usage/bool';
-import type FreestyleUsageBoolControl from 'ember-freestyle/components/freestyle/usage/bool/control';
-import type FreestyleUsageNumber from 'ember-freestyle/components/freestyle/usage/number';
-import type FreestyleUsageNumberControl from 'ember-freestyle/components/freestyle/usage/number/control';
-import type FreestyleUsageObject from 'ember-freestyle/components/freestyle/usage/object';
-import type FreestyleUsageObjectControl from 'ember-freestyle/components/freestyle/usage/object/control';
-import type FreestyleUsageString from 'ember-freestyle/components/freestyle/usage/string';
-import type FreestyleUsageStringControl from 'ember-freestyle/components/freestyle/usage/string/control';
-import type FreestyleUsageComponentLike from 'ember-freestyle/components/freestyle/usage/component-like';
-import type FreestyleUsageComponentLikeControl from 'ember-freestyle/components/freestyle/usage/component-like/control';
 import type FreestyleAnnotation from 'ember-freestyle/components/freestyle-annotation';
 import type FreestyleCollection from 'ember-freestyle/components/freestyle-collection';
-import type FreestyleDynamic from 'ember-freestyle/components/freestyle-dynamic';
-import type FreestyleDynamicInput from 'ember-freestyle/components/freestyle-dynamic-input';
 import type FreestyleDynamicInputSelectOption from 'ember-freestyle/components/freestyle-dynamic-input-select-option';
+import type FreestyleDynamicInput from 'ember-freestyle/components/freestyle-dynamic-input';
+import type FreestyleDynamic from 'ember-freestyle/components/freestyle-dynamic';
 import type FreestyleFocusButton from 'ember-freestyle/components/freestyle-focus-button';
 import type FreestyleGuide from 'ember-freestyle/components/freestyle-guide';
 import type FreestyleMenu from 'ember-freestyle/components/freestyle-menu';
-import type FreestylePalette from 'ember-freestyle/components/freestyle-palette';
 import type FreestylePaletteItem from 'ember-freestyle/components/freestyle-palette-item';
+import type FreestylePalette from 'ember-freestyle/components/freestyle-palette';
 import type FreestyleSection from 'ember-freestyle/components/freestyle-section';
 import type FreestyleSource from 'ember-freestyle/components/freestyle-source';
 import type FreestyleSubsection from 'ember-freestyle/components/freestyle-subsection';
 import type FreestyleTypeface from 'ember-freestyle/components/freestyle-typeface';
-import type OldFreestyleUsage from 'ember-freestyle/components/freestyle-usage';
 import type FreestyleUsageControls from 'ember-freestyle/components/freestyle-usage-controls';
-import type FreestyleVariant from 'ember-freestyle/components/freestyle-variant';
+import type FreestyleUsageLegacy from 'ember-freestyle/components/freestyle-usage';
 import type FreestyleVariantList from 'ember-freestyle/components/freestyle-variant-list';
-import FreestyleHighlight from './modifiers/freestyle-highlight';
-
-declare module '@glint/environment-ember-loose/registry' {
-  export default interface Registry {
-    'Freestyle::Usage': typeof FreestyleUsage;
-    'Freestyle::Usage::Argument': typeof FreestyleUsageArgument;
-    'freestyle/usage/argument': typeof FreestyleUsageArgument;
-    'Freestyle::Usage::Array': typeof FreestyleUsageArray;
-    'freestyle/usage/array': typeof FreestyleUsageArray;
-    'Freestyle::Usage::Bool': typeof FreestyleUsageBool;
-    'freestyle/usage/bool': typeof FreestyleUsageBool;
-    'Freestyle::Usage::Bool::Control': typeof FreestyleUsageBoolControl;
-    'Freestyle::Usage::Number': typeof FreestyleUsageNumber;
-    'Freestyle::Usage::BasicCssVariable': typeof FreestyleUsageBasicCssVariable;
-    'freestyle/usage/basic-css-variable': typeof FreestyleUsageBasicCssVariable;
-    'freestyle/usage/number': typeof FreestyleUsageNumber;
-    'Freestyle::Usage::Number::Control': typeof FreestyleUsageNumberControl;
-    'Freestyle::Usage::Object': typeof FreestyleUsageObject;
-    'Freestyle::Usage::Object::Control': typeof FreestyleUsageObjectControl;
-    'freestyle/usage/object': typeof FreestyleUsageObject;
-    'Freestyle::Usage::String': typeof FreestyleUsageString;
-    'freestyle/usage/string': typeof FreestyleUsageString;
-    'Freestyle::Usage::String::Control': typeof FreestyleUsageStringControl;
-    'Freestyle::Usage::ComponentLike': typeof FreestyleUsageComponentLike;
-    'freestyle/usage/component-like': typeof FreestyleUsageComponentLike;
-    'Freestyle::Usage::ComponentLike::Control': typeof FreestyleUsageComponentLikeControl;
+import type FreestyleVariant from 'ember-freestyle/components/freestyle-variant';
+import type FreestyleUsageArgument from 'ember-freestyle/components/freestyle/usage/argument';
+import type FreestyleUsageArray from 'ember-freestyle/components/freestyle/usage/array';
+import type FreestyleUsageBasicCssVariable from 'ember-freestyle/components/freestyle/usage/basic-css-variable';
+import type FreestyleUsageBoolControl from 'ember-freestyle/components/freestyle/usage/bool/control';
+import type FreestyleUsageBool from 'ember-freestyle/components/freestyle/usage/bool';
+import type FreestyleUsageComponentLikeControl from 'ember-freestyle/components/freestyle/usage/component-like/control';
+import type FreestyleUsageComponentLike from 'ember-freestyle/components/freestyle/usage/component-like';
+import type FreestyleUsage from 'ember-freestyle/components/freestyle/usage';
+import type FreestyleUsageNumberControl from 'ember-freestyle/components/freestyle/usage/number/control';
+import type FreestyleUsageNumber from 'ember-freestyle/components/freestyle/usage/number';
+import type FreestyleUsageObjectControl from 'ember-freestyle/components/freestyle/usage/object/control';
+import type FreestyleUsageObject from 'ember-freestyle/components/freestyle/usage/object';
+import type FreestyleUsageStringControl from 'ember-freestyle/components/freestyle/usage/string/control';
+import type FreestyleUsageString from 'ember-freestyle/components/freestyle/usage/string';
+import type FreestyleHighlight from 'ember-freestyle/modifiers/freestyle-highlight';
+import EnsureFreestyleTheme from './modifiers/ensure-freestyle-theme';
+export default interface EmberFreestyleRegistry {
+    'freestyle-annotation': typeof FreestyleAnnotation;
     FreestyleAnnotation: typeof FreestyleAnnotation;
+    'freestyle-collection': typeof FreestyleCollection;
     FreestyleCollection: typeof FreestyleCollection;
-    FreestyleDynamic: typeof FreestyleDynamic;
-    FreestyleDynamicInput: typeof FreestyleDynamicInput;
+    'freestyle-dynamic-input-select-option': typeof FreestyleDynamicInputSelectOption;
     FreestyleDynamicInputSelectOption: typeof FreestyleDynamicInputSelectOption;
+    'freestyle-dynamic-input': typeof FreestyleDynamicInput;
+    FreestyleDynamicInput: typeof FreestyleDynamicInput;
+    'freestyle-dynamic': typeof FreestyleDynamic;
+    FreestyleDynamic: typeof FreestyleDynamic;
+    'freestyle-focus-button': typeof FreestyleFocusButton;
     FreestyleFocusButton: typeof FreestyleFocusButton;
+    'freestyle-guide': typeof FreestyleGuide;
     FreestyleGuide: typeof FreestyleGuide;
+    'freestyle-menu': typeof FreestyleMenu;
     FreestyleMenu: typeof FreestyleMenu;
-    FreestylePalette: typeof FreestylePalette;
+    'freestyle-palette-item': typeof FreestylePaletteItem;
     FreestylePaletteItem: typeof FreestylePaletteItem;
+    'freestyle-palette': typeof FreestylePalette;
+    FreestylePalette: typeof FreestylePalette;
+    'freestyle-section': typeof FreestyleSection;
     FreestyleSection: typeof FreestyleSection;
+    'freestyle-source': typeof FreestyleSource;
     FreestyleSource: typeof FreestyleSource;
-    FreestyleSubsection: typeof FreestyleSubsection;
     'freestyle-subsection': typeof FreestyleSubsection;
+    FreestyleSubsection: typeof FreestyleSubsection;
+    'freestyle-typeface': typeof FreestyleTypeface;
     FreestyleTypeface: typeof FreestyleTypeface;
-    FreestyleUsage: typeof OldFreestyleUsage;
+    'freestyle-usage-controls': typeof FreestyleUsageControls;
     FreestyleUsageControls: typeof FreestyleUsageControls;
-    FreestyleVariant: typeof FreestyleVariant;
-    'freestyle-variant': typeof FreestyleVariant;
-    FreestyleVariantList: typeof FreestyleVariantList;
+    'freestyle-usage': typeof FreestyleUsageLegacy;
+    FreestyleUsage: typeof FreestyleUsageLegacy;
     'freestyle-variant-list': typeof FreestyleVariantList;
+    FreestyleVariantList: typeof FreestyleVariantList;
+    'freestyle-variant': typeof FreestyleVariant;
+    FreestyleVariant: typeof FreestyleVariant;
+    'freestyle/usage/argument': typeof FreestyleUsageArgument;
+    'Freestyle::Usage::Argument': typeof FreestyleUsageArgument;
+    'freestyle/usage/array': typeof FreestyleUsageArray;
+    'Freestyle::Usage::Array': typeof FreestyleUsageArray;
+    'freestyle/usage/basic-css-variable': typeof FreestyleUsageBasicCssVariable;
+    'Freestyle::Usage::BasicCssVariable': typeof FreestyleUsageBasicCssVariable;
+    'freestyle/usage/bool/control': typeof FreestyleUsageBoolControl;
+    'Freestyle::Usage::Bool::Control': typeof FreestyleUsageBoolControl;
+    'freestyle/usage/bool': typeof FreestyleUsageBool;
+    'Freestyle::Usage::Bool': typeof FreestyleUsageBool;
+    'freestyle/usage/component-like/control': typeof FreestyleUsageComponentLikeControl;
+    'Freestyle::Usage::ComponentLike::Control': typeof FreestyleUsageComponentLikeControl;
+    'freestyle/usage/component-like': typeof FreestyleUsageComponentLike;
+    'Freestyle::Usage::ComponentLike': typeof FreestyleUsageComponentLike;
+    'freestyle/usage': typeof FreestyleUsage;
+    'Freestyle::Usage': typeof FreestyleUsage;
+    'freestyle/usage/number/control': typeof FreestyleUsageNumberControl;
+    'Freestyle::Usage::Number::Control': typeof FreestyleUsageNumberControl;
+    'freestyle/usage/number': typeof FreestyleUsageNumber;
+    'Freestyle::Usage::Number': typeof FreestyleUsageNumber;
+    'freestyle/usage/object/control': typeof FreestyleUsageObjectControl;
+    'Freestyle::Usage::Object::Control': typeof FreestyleUsageObjectControl;
+    'freestyle/usage/object': typeof FreestyleUsageObject;
+    'Freestyle::Usage::Object': typeof FreestyleUsageObject;
+    'freestyle/usage/string/control': typeof FreestyleUsageStringControl;
+    'Freestyle::Usage::String::Control': typeof FreestyleUsageStringControl;
+    'freestyle/usage/string': typeof FreestyleUsageString;
+    'Freestyle::Usage::String': typeof FreestyleUsageString;
     'freestyle-highlight': typeof FreestyleHighlight;
-  }
+    'ensure-freestyle-theme': typeof EnsureFreestyleTheme;
 }

package/types/ember-truth-helpers/helpers/and.d.ts

@@ -7,11 +7,8 @@ import { Falsy, UnsetValue } from './-private/shared';
 // and objects with an `isTruthy` method. In these cases, we just won't
 // narrow as much as we potentially could.
 
-type AndPair<A, B> = Falsy<A> extends true
-  ? A
-  : B extends UnsetValue
-  ? A
-  : A | B;
+type AndPair<A, B> =
+  Falsy<A> extends true ? A : B extends UnsetValue ? A : A | B;
 
 interface AndHelperSignature<A, B, C, D, E> {
   Args: { Positional: [A, B?, C?, D?, E?] };

package/types/ember-truth-helpers/helpers/or.d.ts

@@ -10,10 +10,10 @@ import { Falsy, Maybe, UnsetValue } from './-private/shared';
 type OrPair<A, B> = B extends UnsetValue
   ? A
   : Maybe<A> extends true
-  ? NonNullable<A> | B
-  : Falsy<A> extends true
-  ? B
-  : A | B;
+    ? NonNullable<A> | B
+    : Falsy<A> extends true
+      ? B
+      : A | B;
 
 interface OrHelperSignature<A, B, C, D, E> {
   Args: { Positional: [A, B?, C?, D?, E?] };

package/types/global.d.ts

@@ -1,13 +1,15 @@
 import '@glint/environment-ember-loose';
 
+import type FreestyleRegistry from 'ember-freestyle/template-registry';
+
 import AndHelper from 'ember-truth-helpers/helpers/and';
 import EqHelper from 'ember-truth-helpers/helpers/eq';
 import NotHelper from 'ember-truth-helpers/helpers/not';
 import { HelperLike, ModifierLike } from '@glint/template';
-import { SafeString } from '@ember/template/-private/handlebars';
+import { type SafeString } from '@ember/template';
 
 declare module '@glint/environment-ember-loose/registry' {
-  export default interface Registry {
+  export default interface Registry extends FreestyleRegistry {
     and: typeof AndHelper;
     eq: typeof EqHelper;
     not: typeof NotHelper;

package/vendor/ember-freestyle.css

@@ -307,7 +307,6 @@ END-FREESTYLE-USAGE */
   margin: 0 1rem;
   max-width: calc(1200px - 1rem);
   padding: 1rem 0 0.4rem;
-  text-transform: uppercase;
 }
 .FreestyleSection--hidden {
   display: none;
@@ -320,7 +319,6 @@ END-FREESTYLE-USAGE */
   font-size: 1.3rem;
   margin: 0 1rem;
   padding: 0.8rem 0 0.4rem;
-  text-transform: uppercase;
 }
 
 .FreestyleMenu {
@@ -329,19 +327,24 @@ END-FREESTYLE-USAGE */
   padding-left: 1rem;
 }
 .FreestyleMenu-item, .FreestyleMenu-submenuItem {
-  padding-top: 0.6rem;
-  text-transform: uppercase;
+  padding-top: 0.1rem;
 }
 .FreestyleMenu-itemLink, .FreestyleMenu-submenuItemLink {
+  border-radius: 6px;
   color: #212121;
+  display: block;
+  padding: 0.3rem 0.3rem 0.3rem 0.5rem;
   text-decoration: none;
 }
 .FreestyleMenu-itemLink.active, .FreestyleMenu-submenuItemLink.active {
-  color: #00bcd4;
+  background-color: #00bcd4;
+  color: white;
   text-decoration: none;
+  font-weight: bold;
 }
 .FreestyleMenu-itemLink:hover, .FreestyleMenu-submenuItemLink:hover {
-  color: #ffc107;
+  background-color: #00bcd4;
+  color: white;
   text-decoration: none;
 }
 .FreestyleMenu-submenu {

package/glint.d.ts

@@ -1,81 +0,0 @@
-import type FreestyleUsage from 'ember-freestyle/components/freestyle/usage';
-import type FreestyleUsageArgument from 'ember-freestyle/components/freestyle/usage/argument';
-import type FreestyleUsageArray from 'ember-freestyle/components/freestyle/usage/array';
-import type FreestyleUsageBasicCssVariable from 'ember-freestyle/components/freestyle/usage/basic-css-variable';
-import type FreestyleUsageBool from 'ember-freestyle/components/freestyle/usage/bool';
-import type FreestyleUsageBoolControl from 'ember-freestyle/components/freestyle/usage/bool/control';
-import type FreestyleUsageNumber from 'ember-freestyle/components/freestyle/usage/number';
-import type FreestyleUsageNumberControl from 'ember-freestyle/components/freestyle/usage/number/control';
-import type FreestyleUsageObject from 'ember-freestyle/components/freestyle/usage/object';
-import type FreestyleUsageObjectControl from 'ember-freestyle/components/freestyle/usage/object/control';
-import type FreestyleUsageString from 'ember-freestyle/components/freestyle/usage/string';
-import type FreestyleUsageStringControl from 'ember-freestyle/components/freestyle/usage/string/control';
-import type FreestyleUsageComponentLike from 'ember-freestyle/components/freestyle/usage/component-like';
-import type FreestyleUsageComponentLikeControl from 'ember-freestyle/components/freestyle/usage/component-like/control';
-import type FreestyleAnnotation from 'ember-freestyle/components/freestyle-annotation';
-import type FreestyleCollection from 'ember-freestyle/components/freestyle-collection';
-import type FreestyleDynamic from 'ember-freestyle/components/freestyle-dynamic';
-import type FreestyleDynamicInput from 'ember-freestyle/components/freestyle-dynamic-input';
-import type FreestyleDynamicInputSelectOption from 'ember-freestyle/components/freestyle-dynamic-input-select-option';
-import type FreestyleFocusButton from 'ember-freestyle/components/freestyle-focus-button';
-import type FreestyleGuide from 'ember-freestyle/components/freestyle-guide';
-import type FreestyleMenu from 'ember-freestyle/components/freestyle-menu';
-import type FreestylePalette from 'ember-freestyle/components/freestyle-palette';
-import type FreestylePaletteItem from 'ember-freestyle/components/freestyle-palette-item';
-import type FreestyleSection from 'ember-freestyle/components/freestyle-section';
-import type FreestyleSource from 'ember-freestyle/components/freestyle-source';
-import type FreestyleSubsection from 'ember-freestyle/components/freestyle-subsection';
-import type FreestyleTypeface from 'ember-freestyle/components/freestyle-typeface';
-import type OldFreestyleUsage from 'ember-freestyle/components/freestyle-usage';
-import type FreestyleUsageControls from 'ember-freestyle/components/freestyle-usage-controls';
-import type FreestyleVariant from 'ember-freestyle/components/freestyle-variant';
-import type FreestyleVariantList from 'ember-freestyle/components/freestyle-variant-list';
-import FreestyleHighlight from './modifiers/freestyle-highlight';
-declare module '@glint/environment-ember-loose/registry' {
-    export default interface Registry {
-        'Freestyle::Usage': typeof FreestyleUsage;
-        'Freestyle::Usage::Argument': typeof FreestyleUsageArgument;
-        'freestyle/usage/argument': typeof FreestyleUsageArgument;
-        'Freestyle::Usage::Array': typeof FreestyleUsageArray;
-        'freestyle/usage/array': typeof FreestyleUsageArray;
-        'Freestyle::Usage::Bool': typeof FreestyleUsageBool;
-        'freestyle/usage/bool': typeof FreestyleUsageBool;
-        'Freestyle::Usage::Bool::Control': typeof FreestyleUsageBoolControl;
-        'Freestyle::Usage::Number': typeof FreestyleUsageNumber;
-        'Freestyle::Usage::BasicCssVariable': typeof FreestyleUsageBasicCssVariable;
-        'freestyle/usage/basic-css-variable': typeof FreestyleUsageBasicCssVariable;
-        'freestyle/usage/number': typeof FreestyleUsageNumber;
-        'Freestyle::Usage::Number::Control': typeof FreestyleUsageNumberControl;
-        'Freestyle::Usage::Object': typeof FreestyleUsageObject;
-        'Freestyle::Usage::Object::Control': typeof FreestyleUsageObjectControl;
-        'freestyle/usage/object': typeof FreestyleUsageObject;
-        'Freestyle::Usage::String': typeof FreestyleUsageString;
-        'freestyle/usage/string': typeof FreestyleUsageString;
-        'Freestyle::Usage::String::Control': typeof FreestyleUsageStringControl;
-        'Freestyle::Usage::ComponentLike': typeof FreestyleUsageComponentLike;
-        'freestyle/usage/component-like': typeof FreestyleUsageComponentLike;
-        'Freestyle::Usage::ComponentLike::Control': typeof FreestyleUsageComponentLikeControl;
-        FreestyleAnnotation: typeof FreestyleAnnotation;
-        FreestyleCollection: typeof FreestyleCollection;
-        FreestyleDynamic: typeof FreestyleDynamic;
-        FreestyleDynamicInput: typeof FreestyleDynamicInput;
-        FreestyleDynamicInputSelectOption: typeof FreestyleDynamicInputSelectOption;
-        FreestyleFocusButton: typeof FreestyleFocusButton;
-        FreestyleGuide: typeof FreestyleGuide;
-        FreestyleMenu: typeof FreestyleMenu;
-        FreestylePalette: typeof FreestylePalette;
-        FreestylePaletteItem: typeof FreestylePaletteItem;
-        FreestyleSection: typeof FreestyleSection;
-        FreestyleSource: typeof FreestyleSource;
-        FreestyleSubsection: typeof FreestyleSubsection;
-        'freestyle-subsection': typeof FreestyleSubsection;
-        FreestyleTypeface: typeof FreestyleTypeface;
-        FreestyleUsage: typeof OldFreestyleUsage;
-        FreestyleUsageControls: typeof FreestyleUsageControls;
-        FreestyleVariant: typeof FreestyleVariant;
-        'freestyle-variant': typeof FreestyleVariant;
-        FreestyleVariantList: typeof FreestyleVariantList;
-        'freestyle-variant-list': typeof FreestyleVariantList;
-        'freestyle-highlight': typeof FreestyleHighlight;
-    }
-}