Staging (#4798)

fixes #[issue number] 
<!-- Link to relevant issue (for ex: "fixes #1234") which will
automatically close the issue once the PR is merged -->

## PR Type
<!-- Please uncomment one ore more that apply to this PR -->

<!-- - Bugfix -->
<!-- - Feature -->
<!-- - Code style update (formatting) -->
<!-- - Refactoring (no functional changes, no api changes) -->
<!-- - Build or CI related changes -->
<!-- - Documentation content changes -->
<!-- - Sample app changes -->
<!-- - Other... Please describe: -->


## Describe the current behavior?
<!-- Please describe the current behavior that is being modified or link
to a relevant issue. -->


## Describe the new behavior?


## PR Checklist

- [ ] Test: run `npm run test` and ensure that all tests pass
- [ ] Target main branch (or an appropriate release branch if
appropriate for a bug fix)
- [ ] 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.


## Additional Information

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: Beth Pan <xupa@microsoft.com>
Co-authored-by: Gleb Khmyznikov <gleb.khmyznikov@gmail.com>
Co-authored-by: Jaylyn Barbee <jaylyn.1b@gmail.com>
Co-authored-by: Jaylyn Barbee <51131738+Jaylyn-Barbee@users.noreply.github.com>
Co-authored-by: Nikola Metulev <nmetulev@users.noreply.github.com>
Co-authored-by: Mara'ah Lee <maraahlee@gmail.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Adolf Daniel <10156724+adolfdaniel@users.noreply.github.com>
Co-authored-by: Justin Willis (HE / HIM) <juwillis@microsoft.com>
Co-authored-by: Zach Teutsch <88554871+zateutsch@users.noreply.github.com>
Co-authored-by: vipul-bhojwani <67650372+vipul-bhojwani@users.noreply.github.com>
Co-authored-by: Amrutha Srinivasan <amrutha.srinivasan95@gmail.com>
Co-authored-by: Federico Navarrete <darklord.navarrete@gmail.com>
Co-authored-by: Toby Liu <ybot1122@gmail.com>
Co-authored-by: microsoft-github-policy-service[bot] <77245923+microsoft-github-policy-service[bot]@users.noreply.github.com>
Co-authored-by: Amrutha Srinivasan <amsrin@microsoft.com>
Co-authored-by: Jonas Thelemann <e-mail@jonas-thelemann.de>
Co-authored-by: Siraj Chokshi <19193347+SirajChokshi@users.noreply.github.com>
Co-authored-by: Thomas Peißl <7underlines@gmail.com>
Co-authored-by: Migush <Migushthe2nd@users.noreply.github.com>
Co-authored-by: Abdullhakim Sami Alshanqity <132011567+abdullhakim-sami@users.noreply.github.com>
Co-authored-by: mecmep <69386369+mecmep@users.noreply.github.com>
Co-authored-by: Joel Limberg <me@joellimberg.com>
Co-authored-by: Pratik-k <prakar57@gmail.com>
Co-authored-by: Maicon Carraro <maicon315@gmail.com>

apps/pwabuilder/src/script/components/app-file-input.ts

@@ -50,13 +50,12 @@ export class FileInput extends LitElement implements FileInputElement {
   render() {
     return html`
       <div>
-        <fast-button
-          class="file-button"
-          appearance="lightweight"
+        <sl-button
+          variant="secondary"
           @click=${this.clickModalInput}
         >
           ${this.buttonText}
-        </fast-button>
+        </sl-button>
         <input
           id="${ifDefined(this.inputId)}"
           class="file-input hidden"

apps/pwabuilder/src/script/pages/app-home.ts

@@ -164,6 +164,9 @@ export class AppHome extends LitElement {
           display: flex;
           flex-direction: column;
         }
+        #input-box::part(input) {
+          -webkit-text-fill-color: var(--sl-input-color);
+        }
         #start-button {
           grid-area: 1 / 5 / auto / auto;
           width: 100%;

apps/pwabuilder/src/script/pages/image-generator.ts

@@ -86,11 +86,6 @@ export class ImageGenerator extends LitElement {
           font-size: 10px;
         }
 
-
-        app-file-input:hover {
-          cursor: pointer;
-        }
-
         sl-button {
           height: 24px;
           padding: 8px 0;
@@ -109,6 +104,11 @@ export class ImageGenerator extends LitElement {
           margin-top: 8px;
         }
 
+        #submit sl-button::part(base) {
+          background-color: var(--primary-color);
+          border-color: var(--primary-color);
+        }
+
         .background {
           background-color: var(--primary-color);
           color: var(--font-color);
@@ -229,7 +229,7 @@ export class ImageGenerator extends LitElement {
                 </div>
               </section>
               <section id="submit" class="form-bottom">
-                <sl-button id="generateButton" class="primary" ?disabled=${!this.generateEnabled || this.generating}
+                <sl-button id="generateButton" variant="primary" ?disabled=${!this.generateEnabled || this.generating}
                   @click=${this.generateZip}
                   ?loading=${this.generating}>
                   ${localeStrings.button.generate}

docs/index.html

@@ -3,7 +3,7 @@
 
 <head>
     <meta charset="UTF-8">
-    <title>PWABuilder Suite Documentation</title>
+    <title>PWABuilder Suite Documentation - test</title>
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
     <meta name="description" content="Documentation for building great progressive web apps with the PWABuilder tooling suite.">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
@@ -15,8 +15,8 @@
     <link rel="icon" href="/assets/icons/icon_24.png" type="image/png" />
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple.css">
 
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.75/dist/themes/light.css" />
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.75/dist/shoelace.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.16.0/dist/themes/light.css" />
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.16.0/cdn/shoelace-autoloader.js"></script>
 
     <link rel="stylesheet" href="styles/global.css"/>
     <link rel="stylesheet" href="styles/vs-prism.css" />

docs/package.json

@@ -12,6 +12,7 @@
   "devDependencies": {
     "@types/node": "^20.4.2",
     "cpx": "^1.5.0",
-    "docsify-cli": "^4.4.4"
+    "docsify-cli": "^4.4.4",
+    "typescript": "^5.5.4"
   }
 }

docs/styles/global.css

@@ -118,13 +118,13 @@ sl-menu-item[checked]::part(base) {
     border:#ada6b4 1px solid;
 }
 
-sl-menu::part(base) {
+sl-menu {
     width: 100%;
     border-radius: 10px;
     background: linear-gradient(to right, #f9f4ff, #e7f6fa);
 }
 
-sl-menu-item::part(base):hover {
+sl-menu-item:hover::part(base), sl-menu-item:focus-within::part(base) {
     background: #4F3FB6;
     color: white;
     border: 1px solid white;
@@ -160,4 +160,18 @@ sl-alert::part(base) {
 
 sl-alert::part(icon) {
     color: #491576;
-}
+}
+
+/* Search Input */
+
+.sidebar .search input[type=search]::placeholder {
+    color: rgba(0, 0, 0, 0.886);
+}
+
+.sidebar .search .clear-button svg {
+    background: #4d4d4d;
+    border-radius: 50%;
+}
+
+/* sl-menu-item */
+