Migrates PWABuilder from Shoelace to WebAwesome (#6080)

Migrates PWABuilder frontend from Shoelace to WebAwesome, the newest
iteration of Shoelace.

## PR Type
Feature
Refactoring

## Describe the current behavior?
We're using Shoelace 2, which is no longer maintained.

## Describe the new behavior?
We're using WebAwesome, the newest version of Shoelace.

## PR Checklist

- [X] Test: run `npm run test` and ensure that all tests pass
- [X] Target main branch (or an appropriate release branch if
appropriate for a bug fix)
- [X] Ensure that your contribution follows [standard accessibility
guidelines](https://docs.microsoft.com/en-us/microsoft-edge/accessibility/design).
Use tools like https://webhint.io/ to validate your changes.

---------

Co-authored-by: Judah Himango <juhimang@microsoft.com>

Author: JudahGabriel

.github/copilot-instructions.md

@@ -1,28 +1,31 @@
 ---
-description: 'Guidelines for building C# and TypeScript applications'
-applyTo: '**/*.cs, **/*.ts, **/*.js, **/*.css'
+description: "Guidelines for building C# and TypeScript applications"
+applyTo: "**/*.cs, **/*.ts, **/*.js, **/*.css"
 ---
 
 # Project Context
+
 - This repository contains PWABuilder, a website for software developers that helps web devs create progressive web apps (PWAs) and publish them to app stores.
-- The main repository is for PWABuilder.com, the web app. Its code is located in `apps/pwabuilder`. It is a C# web app using ASP.NET Core. It serves a SPA frontend, located in `apps/pwabuilder/Frontend`, which is built with TypeScript, Lit, and Shoelace. The frontend uses the Vite build system. It communicates with the backend via a REST API.
+- The main repository is for PWABuilder.com, the web app. Its code is located in `apps/pwabuilder`. It is a C# web app using ASP.NET Core. It serves a SPA frontend, located in `apps/pwabuilder/Frontend`, which is built with TypeScript, Lit, and WebAwesome. The frontend uses the Vite build system. It communicates with the backend via a REST API.
 - The repository also contains some PWABuilder-related tooling. For example, `/apps/cli` contains the PWABuilder command line app, `/apps/pwabuilder-vscode` contains VSCode tooling for PWABuilder, `/docs` contains the documentation web site (docs.pwabuilder.com) for PWABuilder.
 - Frontend is built with Typescript for type safety
 - Frontend uses Lit web components for custom elements and SPA pages.
-- Frontend uses the extrnal Shoelace library for prebuilt, styled components.
+- Frontend uses the extrnal [WebAwesome library](https://webawesome.com/docs) for prebuilt, styled components.
 
 ## Typescript Development
+
 - Enable strict mode in tsconfig.json for maximum type safety
 - Define types for method returns
 - Implement generic components and composables where applicable
 - New web components should inherit from LitElement
-- Where possible, prefer to use existing web components from the Shoelace library
+- Where possible, prefer to use existing web components from the [WebAwesome library](https://webawesome.com/docs/components)
 - Adhere to the single responsibility principle for components
 - For TypeScript files, use kebab-case for file names.
 - For custom web components built with Lit, keep them small and focused on one concern.
 - All TypeScript classes should be PascalCase.
 
 ## C# Development
+
 - When writing C#, always use the latest version C#, currently C# 13 features.
 - Write clear and concise comments for each function.
 - Use file-scoped namespaces and single-line using directives.
@@ -42,10 +45,11 @@ applyTo: '**/*.cs, **/*.ts, **/*.js, **/*.css'
 - Do not use LINQ query syntax (e.g. `from x in y select x`). Always prefer LINQ method syntax (`.Select()`, `.Where()`, ...) for consistency and clarity.
 - Do not insert more than one consecutive empty line, keep whitespace intentional and minimal.
 - Avoid excessive comments. Only add comments when the logic is non-obvious or complex — clean code should explain itself.
-- All constructors, methods, events and properties must include XML documentation to support maintainability and developer tooling.  
+- All constructors, methods, events and properties must include XML documentation to support maintainability and developer tooling.
   - When the XML documentation is already defined in an interface or base class, use only `/// <inheritdoc/>` to inherit the documentation instead of duplicating it.
 
 ## General Instructions
+
 - Make only high confidence suggestions when reviewing code changes.
 - Write code with good maintainability practices, including comments on why certain design decisions were made.
 - Handle edge cases and write clear exception handling.
@@ -70,4 +74,4 @@ applyTo: '**/*.cs, **/*.ts, **/*.js, **/*.css'
 - Explain integration testing approaches for API endpoints.
 - Demonstrate how to mock dependencies for effective testing.
 - Show how to test authentication and authorization logic.
-- Explain test-driven development principles as applied to API development.
+- Explain test-driven development principles as applied to API development.

.github/workflows/deploy-pwabuilder-to-preview.yml

@@ -1,8 +1,9 @@
 name: Deploy PWABuilder web app to staging
 
 on:
-  push:
+  pull_request:
     branches: [main]
+    types: [opened, synchronize, reopened]
     paths:
       - "apps/pwabuilder/**"
       - "Dockerfile.production"

.gitignore

@@ -388,3 +388,4 @@ test-results/
 
 # Ingore service worker in wwwroot, as it's generated by the build. The real service worker is in /apps/pwabuilder/frontend/public/service-worker.js.
 apps/pwabuilder/wwwroot/service-worker.js
+.spiderloop/

apps/blog/src/docs/windows/finding-publisher-info/finding-your-windows-publisher-info.md

@@ -24,7 +24,7 @@ In order to publish your PWA in the Microsoft Store, you'll need 3 things:
 2. `Publisher ID`
 3. `Publisher display name`
 
-To get this information, go to [Windows Partner Center](https://partner.microsoft.com/dashboard) and click on your app. (Don't have an app yet? [Create one](/docs/publish-a-new-app-to-the-microsoft-store/).)
+To get this information, go to [Microsoft Partner Center](https://partner.microsoft.com/dashboard) and click on your app. (Don't have an app yet? [Create one](/docs/publish-a-new-app-to-the-microsoft-store/).)
 
 Choose `Product Management` -> `Product Identity`:
 

apps/blog/src/docs/windows/image-recommendations/image-recommendations-for-windows.md

@@ -238,7 +238,7 @@ Shown in the start menu when the user sets your app's tile to large size.
 ### Store logo
 <img loading="lazy" alt="The store logo icon" src="/docs/windows/image-recommendations/windows-image-store-logo.png" />
 
-Shown in app installer, Windows Partner Center, the "Report an app" option in the Store, and the "Write a review" option in the Store. 
+Shown in app installer, Microsoft Partner Center, the "Report an app" option in the Store, and the "Write a review" option in the Store. 
 
 - 50x50
 - 63x63 (1.25x scale)

apps/blog/src/docs/windows/next-steps/next-steps.md

@@ -46,9 +46,10 @@ Your zip file [contains 2 app packages](/docs/what-is-a-classic-package/):
 - `{app name}.msixbundle` - the main app package
 - `{app name}.classic.appxbundle` - app package that allows users on older versions of Windows (below 10.0.19041, May 2020 Update) to run your app. See our [classic app package explainer](/docs/what-is-a-classic-package/) for details.
 
-Both packages can be submitted directly to the Microsoft Store through the [Windows Partner Center](https://partner.microsoft.com/dashboard)
+Both packages can be submitted directly to the Microsoft Store through the [Microsoft Partner Center](https://partner.microsoft.com/dashboard)
 
 When you're ready to publish to the Store, you can either
+
 - [Publish a new app in the Store](/docs/publish-a-new-app-to-the-microsoft-store/) 
 - [Update an existing app in the Store](/docs/update-an-existing-app-in-the-microsoft-store/)
 

apps/blog/src/docs/windows/publish-new-windows-app/publish-new-windows-app.md

@@ -22,7 +22,7 @@ This guide shows how to publish your PWA as a new app in the Store. If you alrea
 
 ## Enroll in Windows developer program
 
-Login to [Windows Partner Center](https://partner.microsoft.com/dashboard) with your Microsoft account.
+Login to [Microsoft Partner Center](https://partner.microsoft.com/dashboard) with your Microsoft account.
 
 Then, go to your [dashboard](https://partner.microsoft.com/en-us/dashboard/home) to see your enrolled programs. If `Windows & Xbox` is listed, great, you're already enrolled. If not, choose `Add program`: <br> <img loading="lazy" alt="A screenshot that shows where the add program button is" src="/docs/windows/publish-new-windows-app/add-program.png" width="350px" />
 

apps/blog/src/docs/windows/update-existing-app/update-an-existing-app.md

@@ -22,7 +22,7 @@ This guide shows how to publish your PWA as an update to an existing app in the
 
 ## Choose the app you want to update
 
-Login to [Windows Partner Center](https://partner.microsoft.com/dashboard), then go to `Windows & Xbox` -> `Overview`. Your existing apps will be listed:
+Login to [Microsoft Partner Center](https://partner.microsoft.com/dashboard), then go to `Windows & Xbox` -> `Overview`. Your existing apps will be listed:
 
 <img loading="lazy" alt="A screenshot that shows your existing apps list" src="/docs/windows/update-existing-app/existing-apps.png" width="350px" />
 

apps/blog/src/docs/windows/windows-store-documentation/windows-store-documentation.md

@@ -26,7 +26,7 @@ Both the Microsoft Store and Windows itself natively supports PWAs as first-clas
 
 Follow these steps to get your PWA listed in the Microsoft Store:
 
-1. Reserve an app name in the [Windows Partner Center](https://partner.microsoft.com/dashboard) as explained in this documentation [Publish your Progressive Web App to the Microsoft Store](https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/how-to/microsoft-store)
+1. Reserve an app name in the [Microsoft Partner Center](https://partner.microsoft.com/dashboard) as explained in this documentation [Publish your Progressive Web App to the Microsoft Store](https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/how-to/microsoft-store)
 2. Create your Microsoft Store app package on [PWA Builder](https://www.pwabuilder.com) 
 3. Follow [the Next steps for getting your PWA into the Microsoft Store](/docs/next-steps-for-getting-your-pwa-into-the-microsoft-store/)