ember-freestyle 0.18.0 → 0.20.0

package/CHANGELOG.md

@@ -3,6 +3,31 @@
 All notable changes to this project will be documented in this file.
 
 
+
+
+## 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
+* [#957](https://github.com/chrislopresto/ember-freestyle/pull/957) Add `@ember/string` as a peer dependency ([@bertdeblock](https://github.com/bertdeblock))
+
+#### :rocket: Enhancement
+* [#963](https://github.com/chrislopresto/ember-freestyle/pull/963) Add an Api type to Freestyle::Usage for when you expect a component as argument ([@lukemelia](https://github.com/lukemelia))
+
+#### :bug: Bug Fix
+* [#957](https://github.com/chrislopresto/ember-freestyle/pull/957) Add `@ember/string` as a peer dependency ([@bertdeblock](https://github.com/bertdeblock))
+
+#### Committers: 2
+- Bert De Block ([@bertdeblock](https://github.com/bertdeblock))
+- Luke Melia ([@lukemelia](https://github.com/lukemelia))
+
 ## v0.18.0 (2023-07-18)
 
 #### :rocket: Enhancement

package/addon/components/freestyle/usage/component-like/control/index.hbs

@@ -0,0 +1,12 @@
+{{! template-lint-disable require-input-label }}
+
+{{#if @options}}
+  <select {{on 'change' this.callOnChange}}>
+    {{#each @options as |componentLike|}}
+      <option
+        value={{componentLike.name}}
+        selected={{eq componentLike.name @value.name}}
+      >{{componentLike.name}}</option>
+    {{/each}}
+  </select>
+{{/if}}

package/addon/components/freestyle/usage/component-like/control/index.ts

@@ -0,0 +1,21 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import type { ComponentLike } from '@glint/template';
+
+interface Signature {
+  Args: {
+    value?: ComponentLike;
+    onChange: (c: ComponentLike | undefined) => void;
+    options?: ComponentLike[];
+  };
+}
+export default class FreestyleUsageComponentLikeControlComponent extends Component<Signature> {
+  @action
+  callOnChange(event: InputEvent): void {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const eventTarget = event.target as any;
+    const componentName = eventTarget?.value;
+    const value = this.args.options?.find((c) => c.name === componentName);
+    this.args.onChange(value);
+  }
+}

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

@@ -0,0 +1,14 @@
+<Freestyle::Usage::Argument
+  @type="ComponentLike"
+  @name={{@name}}
+  @description={{@description}}
+  @required={{@required}}
+  @defaultValue={{@defaultValue}}
+  @hideControls={{@hideControls}}
+>
+  <Freestyle::Usage::ComponentLike::Control
+    @options={{@options}}
+    @value={{@value}}
+    @onChange={{@onChange}}
+  />
+</Freestyle::Usage::Argument>

package/addon/components/freestyle/usage/component-like/index.ts

@@ -0,0 +1,17 @@
+import templateOnlyComponent from '@ember/component/template-only';
+import type { ComponentLike } from '@glint/template';
+
+interface Signature {
+  Args: {
+    name?: string;
+    description?: string;
+    required?: boolean;
+    defaultValue?: ComponentLike;
+    hideControls?: boolean;
+    value?: ComponentLike;
+    options?: ComponentLike[];
+    onChange: (val: ComponentLike | null | undefined) => void;
+  };
+}
+const FreestyleUsageComponentLikeComponent = templateOnlyComponent<Signature>();
+export default FreestyleUsageComponentLikeComponent;

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

@@ -46,6 +46,7 @@
                   Number=(component 'freestyle/usage/number')
                   Object=(component 'freestyle/usage/object')
                   String=(component 'freestyle/usage/string')
+                  Component=(component 'freestyle/usage/component-like')
                   Action=(component 'freestyle/usage/argument' type="Action")
                   Yield=(component 'freestyle/usage/argument' type="Yield")
                 )

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

@@ -20,20 +20,21 @@ interface Signature {
     example: [];
     api: [
       {
+        Action: any;
         Array: any;
         Base: any;
         Bool: any;
+        Component: any;
         Number: any;
         Object: any;
         String: any;
-        Action: any;
         Yield: any;
-      }
+      },
     ];
     cssVars: [
       {
         Basic: any;
-      }
+      },
     ];
   };
 }

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

@@ -20,7 +20,7 @@ interface Signature {
   };
   Blocks: {
     default: [
-      { variant: WithBoundArgs<typeof FreestyleVariant, 'collection'> }
+      { variant: WithBoundArgs<typeof FreestyleVariant, 'collection'> },
     ];
   };
 }

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

@@ -46,7 +46,7 @@ export default class FreestyleDynamic extends Component<Signature> {
     if (this.args.dynamicProperties) {
       assert(
         `dynamicProperties passed into freestyle-dynamic must be an object.  You passed: ${this.args.dynamicProperties}`,
-        typeof this.args.dynamicProperties === 'object'
+        typeof this.args.dynamicProperties === 'object',
       );
       this._dynamicProperties = this.args.dynamicProperties;
     }
@@ -63,7 +63,7 @@ export default class FreestyleDynamic extends Component<Signature> {
     Object.keys(dynamicProperties).forEach((propertyName) => {
       dynamicPropertyValues[propertyName] = get(
         dynamicProperties,
-        `${propertyName}.value`
+        `${propertyName}.value`,
       ) as SupportedValue;
     });
     return dynamicPropertyValues;

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

@@ -36,7 +36,7 @@ export default class FreestylePalette extends Component<Signature> {
     return A(
       Object.keys(colorPalette).map((k) => {
         return colorPalette[k];
-      })
+      }),
     );
   }
 }

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

@@ -12,7 +12,7 @@ interface Signature {
   };
   Blocks: {
     default: [
-      { subsection: WithBoundArgs<typeof FreestyleSubsection, 'section'> }
+      { subsection: WithBoundArgs<typeof FreestyleSubsection, 'section'> },
     ];
   };
 }

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

@@ -42,15 +42,15 @@ export default class FreestyleSource extends Component<Signature> {
       // First, replace in-block dynamic properties
       sourceCode = sourceCode.replace(
         `={{dynamic.${property}}}`,
-        `=${angleAssignmentVal}`
+        `=${angleAssignmentVal}`,
       );
       sourceCode = sourceCode.replace(
         `=dynamic.${property}`,
-        `=${curlyAssignmentVal}`
+        `=${curlyAssignmentVal}`,
       );
       sourceCode = sourceCode.replace(
         `{{dynamic.${property}}}`,
-        expressionVal as string
+        expressionVal as string,
       );
     });
 

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

@@ -18,7 +18,7 @@ export default class FreestyleSubsection extends Component<Signature> {
   get show(): boolean {
     return this.emberFreestyle.shouldShowSubsection(
       this.args.section,
-      this.args.name
+      this.args.name,
     );
   }
 }

package/addon/decorators/css-variable.ts

@@ -37,7 +37,7 @@ export function cssVariable(target: TargetInstance, key: string): any;
 export function cssVariable(options: Partial<CSSVariableDecoratorOptions>): any;
 export function cssVariable(
   targetOrOptions: TargetInstance | CSSVariableDecoratorOptions,
-  key?: string
+  key?: string,
 ): any {
   if (typeof key === 'string') {
     return {
@@ -77,7 +77,7 @@ export class CSSVariableInfo {
 
     let computed: string | undefined = cssVarComputedValue(
       variableName,
-      cssClassName
+      cssClassName,
     );
     computed = computed?.trim() ?? undefined;
     computed = computed === '' ? undefined : computed;
@@ -114,7 +114,7 @@ interface CSSVariableDecoratorOptions {
 function getCssVariableInfoMemoized(
   target: TargetInstance,
   key: string,
-  options: CSSVariableDecoratorOptions
+  options: CSSVariableDecoratorOptions,
 ): CSSVariableInfo {
   if (!memoizationMap.get(target)) {
     memoizationMap.set(target, new Map());
@@ -130,21 +130,21 @@ function getCssVariableInfoMemoized(
     return result;
   } else {
     throw new Error(
-      'Unexpected missing key in cssVariable decorator implementation'
+      'Unexpected missing key in cssVariable decorator implementation',
     );
   }
 }
 
 function prepareOptions(
   targetInstance: TargetInstance,
-  userSpecifiedOptions: Partial<CSSVariableDecoratorOptions>
+  userSpecifiedOptions: Partial<CSSVariableDecoratorOptions>,
 ): CSSVariableDecoratorOptions {
   let options = userSpecifiedOptions;
   if (!options.cssClassName) {
     const cssClassName = targetInstance['cssClassName'];
     if (!cssClassName) {
       throw new Error(
-        'Must specify `cssClassName` as an option to @cssVariable decorator or define `cssClassName` on the class owning the decorated property'
+        'Must specify `cssClassName` as an option to @cssVariable decorator or define `cssClassName` on the class owning the decorated property',
       );
     }
     options = Object.assign({}, options, { cssClassName });
@@ -154,6 +154,6 @@ function prepareOptions(
       toVariableName: dasherize,
     },
     options as Pick<CSSVariableDecoratorOptions, 'cssClassName'> &
-      Partial<CSSVariableDecoratorOptions>
+      Partial<CSSVariableDecoratorOptions>,
   );
 }

package/addon/glint.ts

@@ -10,6 +10,8 @@ import type FreestyleUsageObject from 'ember-freestyle/components/freestyle/usag
 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';
@@ -51,6 +53,9 @@ declare module '@glint/environment-ember-loose/registry' {
     '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;

package/addon/utils/css-rules.ts

@@ -26,7 +26,7 @@ function getStyleDeclarations(selector: string): CSSStyleDeclaration[] {
 
 export function getCssVariableDefinition(
   variableName: string,
-  selector: string
+  selector: string,
 ): string {
   // find the last declaration of the selector that contains a value
   // for the CSS variable we're interested in
@@ -40,7 +40,7 @@ export function getCssVariableDefinition(
 
 export function getComputedValueForCssVariable(
   variableName: string,
-  cssClassName: string
+  cssClassName: string,
 ): string {
   let element = document.querySelector('.' + cssClassName);
   let tempElement;
@@ -54,7 +54,7 @@ export function getComputedValueForCssVariable(
     element = tempElement;
   }
   const result = getComputedStyle(element).getPropertyValue(
-    `--${variableName}`
+    `--${variableName}`,
   );
   tempElement?.remove();
   return result;

package/app/components/freestyle/usage/component-like/control.js

@@ -0,0 +1 @@
+export { default } from 'ember-freestyle/components/freestyle/usage/component-like/control';

package/app/components/freestyle/usage/component-like.js

@@ -0,0 +1 @@
+export { default } from 'ember-freestyle/components/freestyle/usage/component-like';

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

@@ -1,7 +1,8 @@
 $FreestyleCollection-maxWidth: $FreestyleGuide-maxWidth !default;
 $FreestyleCollection-shadow1: rgba(0, 0, 0, 0.16);
 $FreestyleCollection-shadow2: rgba(0, 0, 0, 0.12);
-$FreestyleCollection-boxShadow: 0 2px 5px 0 $FreestyleCollection-shadow1,
+$FreestyleCollection-boxShadow:
+  0 2px 5px 0 $FreestyleCollection-shadow1,
   0 2px 10px 0 $FreestyleCollection-shadow2;
 
 .FreestyleCollection {

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

@@ -8,7 +8,8 @@ $FreestyleGuide-maxWidth: 1200px !default;
 $FreestyleGuide-asideBackgroundColor: #fff !default;
 $FreestyleGuide-shadow1: rgba(0, 0, 0, 0.16);
 $FreestyleGuide-shadow2: rgba(0, 0, 0, 0.12);
-$FreestyleGuide-boxShadow: 0 2px 5px 0 $FreestyleGuide-shadow1,
+$FreestyleGuide-boxShadow:
+  0 2px 5px 0 $FreestyleGuide-shadow1,
   0 2px 10px 0 $FreestyleGuide-shadow2;
 
 .FreestyleGuide {

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/app/styles/components/freestyle-usage-controls.scss

@@ -1,7 +1,8 @@
 $FreestyleUsageControls-backgroundColor: #fff !default;
 $FreestyleUsageControls-shadow1: rgba(0, 0, 0, 0.16);
 $FreestyleUsageControls-shadow2: rgba(0, 0, 0, 0.12);
-$FreestyleUsageControls-boxShadow: 0 2px 5px 0 $FreestyleUsageControls-shadow1,
+$FreestyleUsageControls-boxShadow:
+  0 2px 5px 0 $FreestyleUsageControls-shadow1,
   0 2px 10px 0 $FreestyleUsageControls-shadow2;
 
 .FreestyleUsageControls {

package/components/freestyle/usage/component-like/control/index.d.ts

@@ -0,0 +1,13 @@
+import Component from '@glimmer/component';
+import type { ComponentLike } from '@glint/template';
+interface Signature {
+    Args: {
+        value?: ComponentLike;
+        onChange: (c: ComponentLike | undefined) => void;
+        options?: ComponentLike[];
+    };
+}
+export default class FreestyleUsageComponentLikeControlComponent extends Component<Signature> {
+    callOnChange(event: InputEvent): void;
+}
+export {};

package/components/freestyle/usage/component-like/index.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentLike } from '@glint/template';
+interface Signature {
+    Args: {
+        name?: string;
+        description?: string;
+        required?: boolean;
+        defaultValue?: ComponentLike;
+        hideControls?: boolean;
+        value?: ComponentLike;
+        options?: ComponentLike[];
+        onChange: (val: ComponentLike | null | undefined) => void;
+    };
+}
+declare const FreestyleUsageComponentLikeComponent: import("@ember/component/template-only").TemplateOnlyComponent<Signature>;
+export default FreestyleUsageComponentLikeComponent;

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

@@ -14,13 +14,14 @@ interface Signature {
         example: [];
         api: [
             {
+                Action: any;
                 Array: any;
                 Base: any;
                 Bool: any;
+                Component: any;
                 Number: any;
                 Object: any;
                 String: any;
-                Action: any;
                 Yield: any;
             }
         ];

package/glint.d.ts

@@ -10,6 +10,8 @@ import type FreestyleUsageObject from 'ember-freestyle/components/freestyle/usag
 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';
@@ -50,6 +52,9 @@ declare module '@glint/environment-ember-loose/registry' {
         '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;

package/lib/ast-transform.js

@@ -30,11 +30,11 @@ function cleanupNamedBlocksPolyfillSyntax(sourceString) {
   sourceString = sourceString.trim();
   sourceString = sourceString.replace(
     /({{#if \(-is-named-block-invocation __arg0 "(.+?)"\)}})(\s*)(.*?)(\s*){{\/if}}/gs,
-    '\n  <:$2>$3$4$5</:$2>\n'
+    '\n  <:$2>$3$4$5</:$2>\n',
   );
   sourceString = sourceString.replace(
     / @namedBlocksInfo={{hash .+?=0}} as \|__arg0\|/,
-    ''
+    '',
   );
   sourceString = sourceString.replace(/(\s\s+)/g, '\n$1');
   sourceString = sourceString.replace(/ @(\w+)=/g, '\n  @$1=');
@@ -95,11 +95,11 @@ module.exports = function ({ contents, syntax }) {
       BlockStatement(node) {
         if (
           ['freestyle-usage', 'freestyle-dynamic'].includes(
-            node.path.original
+            node.path.original,
           ) &&
           (!node.loc.source ||
             !node.loc.source.includes(
-              'templates/components/freestyle-dynamic.hbs'
+              'templates/components/freestyle-dynamic.hbs',
             ))
         ) {
           const sourceString = extractSource(node.program.body, contents);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-freestyle",
-  "version": "0.18.0",
+  "version": "0.20.0",
   "description": "Create a living styleguide for your Ember app.",
   "keywords": [
     "ember-addon"
@@ -23,6 +23,7 @@
     "lint:hbs:fix": "ember-template-lint . --fix",
     "lint:js": "eslint . --cache",
     "lint:js:fix": "eslint . --fix",
+    "lint:glint": "glint",
     "prepare": "husky install",
     "start": "ember serve",
     "test": "npm-run-all lint test:*",
@@ -45,7 +46,7 @@
     "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",
@@ -55,16 +56,17 @@
     "@ember/optional-features": "^2.0.0",
     "@ember/string": "^3.1.1",
     "@ember/test-helpers": "^3.2.0",
-    "@embroider/test-setup": "^1.8.3",
-    "@glint/core": "^0.9.4",
-    "@glint/environment-ember-loose": "^0.9.7",
+    "@embroider/test-setup": "^3.0.1",
+    "@glint/core": "^1.2.0",
+    "@glint/template": "^1.2.0",
+    "@glint/environment-ember-loose": "^1.2.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",
@@ -79,7 +81,7 @@
     "@types/ember__string": "^3.0.9",
     "@types/ember__template": "^4.0.0",
     "@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",
@@ -91,7 +93,7 @@
     "ember-cli-autoprefixer": "^2.0.0",
     "ember-cli-dependency-checker": "^3.3.1",
     "ember-cli-deploy": "^1.0.2",
-    "ember-cli-deploy-build": "^2.0.0",
+    "ember-cli-deploy-build": "^3.0.0",
     "ember-cli-deploy-git": "^1.3.4",
     "ember-cli-inject-live-reload": "^2.1.0",
     "ember-cli-sass": "^11.0.1",
@@ -108,33 +110,36 @@
     "ember-source-channel-url": "^3.0.0",
     "ember-style-modifier": "^0.8.0",
     "ember-template-imports": "^3.3.1",
-    "ember-template-lint": "^4.14.0",
+    "ember-template-lint": "^5.11.2",
     "ember-try": "^2.0.0",
     "eslint": "^8.35.0",
     "eslint-config-ember": "0.3.0",
-    "eslint-config-prettier": "^8.5.0",
+    "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-ember": "^11.10.0",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-qunit": "^7.3.1",
     "husky": "^8.0.1",
     "loader.js": "^4.7.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.7.1",
-    "prettier-plugin-ember-template-tag": "^0.3.2",
+    "prettier": "^3.0.3",
+    "prettier-plugin-ember-template-tag": "^1.1.0",
     "qunit": "^2.19.3",
     "qunit-dom": "^2.0.0",
     "release-it": "^14.10.0",
     "remarkable": "^2.0.1",
-    "sass": "^1.55.0",
-    "stylelint": "^15.10.1",
-    "stylelint-config-prettier": "^9.0.3",
-    "stylelint-config-recommended-scss": "^7.0.0",
-    "stylelint-prettier": "^2.0.0",
+    "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",
     "webpack": "^5.76.0"
   },
+  "peerDependencies": {
+    "@ember/string": "^3.1.1"
+  },
   "engines": {
     "node": "14.* || >= 16"
   },

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

@@ -23,5 +23,5 @@ export default class AndHelper<
   B = UnsetValue,
   C = UnsetValue,
   D = UnsetValue,
-  E = UnsetValue
+  E = UnsetValue,
 > extends Helper<AndHelperSignature<A, B, C, D, E>> {}

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

@@ -25,5 +25,5 @@ export default class OrHelper<
   B = UnsetValue,
   C = UnsetValue,
   D = UnsetValue,
-  E = UnsetValue
+  E = UnsetValue,
 > extends Helper<OrHelperSignature<A, B, C, D, E>> {}

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 {