fix comment

* update plop templates

* fix plop template

* don't break react

packages/webawesome/docs/.eleventy.js

@@ -125,7 +125,7 @@ export default async function (eleventyConfig) {
   eleventyConfig.addPlugin(currentLink());
 
   // Add code examples for `<code class="example">` blocks
-  eleventyConfig.addPlugin(codeExamplesPlugin);
+  eleventyConfig.addPlugin(codeExamplesPlugin());
 
   // Highlight code blocks with Prism
   eleventyConfig.addPlugin(highlightCodePlugin());
@@ -136,6 +136,10 @@ export default async function (eleventyConfig) {
   // Various text replacements
   eleventyConfig.addPlugin(
     replaceTextPlugin([
+      {
+        replace: /\[version\]/gs,
+        replaceWith: packageData.version,
+      },
       // Replace [issue:1234] with a link to the issue on GitHub
       {
         replace: /\[pr:([0-9]+)\]/gs,

packages/webawesome/docs/assets/scripts/scroll.js

@@ -1,3 +1,19 @@
+import { allDefined } from '/dist/webawesome.js';
+
+/**
+ * Determines how the page was loaded. Possible return values include "reload", "navigate", "back_forward", "prerender",
+ * and "unknown".
+ */
+function getNavigationType() {
+  if (performance.getEntriesByType) {
+    const navEntries = performance.getEntriesByType('navigation');
+    if (navEntries.length > 0) {
+      return navEntries[0].type;
+    }
+  }
+  return 'unknown';
+}
+
 // Smooth links
 document.addEventListener('click', event => {
   const link = event.target.closest('a');
@@ -31,3 +47,26 @@ function updateScrollClass() {
 window.addEventListener('scroll', updateScrollClass);
 window.addEventListener('turbo:render', updateScrollClass);
 updateScrollClass();
+
+// Restore scroll position after components are defined
+allDefined().then(() => {
+  const navigationType = getNavigationType();
+  const key = `wa-scroll-y-[${location.pathname}]`;
+  const scrollY = sessionStorage.getItem(key);
+
+  // Only restore when reloading, otherwise clear it
+  if (navigationType === 'reload' && scrollY) {
+    window.scrollTo(0, scrollY);
+  } else {
+    sessionStorage.removeItem(key);
+  }
+
+  // After restoring, keep tabs on the page's scroll position for next reload
+  window.addEventListener(
+    'scroll',
+    () => {
+      sessionStorage.setItem(key, window.scrollY);
+    },
+    { passive: true },
+  );
+});

packages/webawesome/scripts/plop/plopfile.js

@@ -37,7 +37,7 @@ export default function (plop) {
       },
       {
         type: 'add',
-        path: '../../src/components/{{ tagWithoutPrefix tag }}/{{ tagWithoutPrefix tag }}.styles.ts',
+        path: '../../src/components/{{ tagWithoutPrefix tag }}/{{ tagWithoutPrefix tag }}.css',
         templateFile: 'templates/component/styles.hbs',
       },
       {

packages/webawesome/scripts/plop/templates/component/component.hbs

@@ -1,11 +1,9 @@
-import { customElement, property } from 'lit/decorators.js';
 import { html } from 'lit';
-import { LocalizeController } from '../../utilities/localize.js';
+import { customElement, property } from 'lit/decorators.js';
 import { watch } from '../../internal/watch.js';
-import componentStyles from '../../styles/component.styles.js';
-import styles from './test-element.styles.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
-import type { CSSResultGroup } from 'lit';
+import componentStyles from '../../styles/component/host.css';
+import styles from './{{ tagWithoutPrefix tag }}.css';
 
 /**
  * @summary Short summary of the component's intended use.
@@ -15,8 +13,6 @@ import type { CSSResultGroup } from 'lit';
  *
  * @dependency wa-example
  *
- * @event wa-event-name - Emitted as an example.
- *
  * @slot - The default slot.
  * @slot example - An example slot.
  *
@@ -26,9 +22,7 @@ import type { CSSResultGroup } from 'lit';
  */
  @customElement("{{ tag }}")
 export default class {{ properCase tag }} extends WebAwesomeElement {
-  static styles: CSSResultGroup = [componentStyles, styles];
-
-  private readonly localize = new LocalizeController(this);
+  static shadowStyle = [componentStyles, styles];
 
   /** An example attribute. */
   @property() attr = 'example';

packages/webawesome/scripts/plop/templates/component/styles.hbs

@@ -1,7 +1,3 @@
-import { css } from 'lit';
-
-export default css`
-  :host {
-    display: block;
-  }
-`;
+:host {
+  display: block;
+}

packages/webawesome/scripts/plop/templates/component/tests.hbs

@@ -1,4 +1,3 @@
-import '../../../dist/webawesome.js';
 import { expect, fixture, html } from '@open-wc/testing';
 
 describe('<{{ tag }}>', () => {