Update dependency @types/node to v22.9.3

Update dependency @types/node to v22.9.2
Update dependency @types/node to v22.9.1
2024-11-23 05:00:57 +00:00 · 2024-11-23 01:01:10 +00:00 · 2024-11-19 18:01:01 +00:00 · 2024-11-18 19:01:03 +00:00 · 2024-11-18 18:01:09 +00:00 · 2024-11-13 16:00:58 +00:00
20 changed files with 3786 additions and 2969 deletions
--- a/.eslintrc.json
+++ b/.eslintrc.json
@ -1,41 +0,0 @@
 {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "overrides": [
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint"
    ],
    "rules": {
        "indent": [
            "error",
            2,
            {
              "SwitchCase": 1
            }
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
 }
--- a/.forgejo/workflows/docker-image.yml
+++ b/.forgejo/workflows/docker-image.yml
@ -1,23 +1,21 @@
 name: Publish Docker image
 on:
  push:
-    branches: main
+     branches:
-    tags:
+       - main
        - '*'
 jobs:
  push_to_registry:
    name: Push Docker image to GitHub Packages
    runs-on: ubuntu-latest
    steps:
      - name: Check out the repo
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
      - name: Docker meta
        id: meta
-        uses: docker/metadata-action@v4
+        uses: docker/metadata-action@v5
        with:
          images: |
-            ghcr.io/wbrawner/trainterval
+            git.wbrawner.com/wbrawner/interval-timer
          tags: |
            type=schedule
            type=ref,event=branch
@ -26,18 +24,20 @@ jobs:
            type=semver,pattern={{major}}.{{minor}}
            type=semver,pattern={{major}}
            type=sha
-      - name: Set up QEMU
+      - name: Set up Docker context
-        uses: docker/setup-qemu-action@v2
+        run: docker context create builders
      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2
+        uses: docker/setup-buildx-action@v3
      - name: Login to GitHub Container Registry
        uses: docker/login-action@v2
        with:
-          registry: ghcr.io
+          endpoint: builders
      - name: Login to GitHub Container Registry
        uses: docker/login-action@v3
        with:
          registry: git.wbrawner.com
          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
+          password: ${{ secrets.FORGEJO_TOKEN }}
      - name: Build and push
-        uses: docker/build-push-action@v3
+        uses: docker/build-push-action@v6
        with:
          context: .
          platforms: linux/amd64,linux/arm64
--- a/.forgejo/workflows/test.yml
+++ b/.forgejo/workflows/test.yml
@ -0,0 +1,20 @@
 name: Build and Test
 on: pull_request
 jobs:
  build-and-test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: 'lts/*'
      - name: Install Dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Lint
        run: npm run lint
      - name: Test
        run: npm run test
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@ -1,11 +0,0 @@
 # To get started with Dependabot version updates, you'll need to specify which
 # package ecosystems to update and where the package manifests are located.
 # Please see the documentation for all configuration options:
 # https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
 version: 2
 updates:
  - package-ecosystem: "npm" # See documentation for possible values
    directory: "/" # Location of package manifests
    schedule:
      interval: "weekly"
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@ -1,33 +0,0 @@
 name: Deploy to Azure Static Web Apps
 on:
  push:
    branches: main
    tags:
        - '*'
 jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: 'lts/*'
      - name: Install Dependencies
        run: npm install
      - name: Test
        run: npm run test
      - name: Deploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          action: 'upload'
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          output_location: dist
          skip_api_build: true
--- a/.github/workflows/pull-request.yml
+++ b/.github/workflows/pull-request.yml
@ -1,42 +0,0 @@
 name: Pull request workflow
 on: pull_request
 permissions:
  contents: write
  pull-requests: write
 jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: 'lts/*'
      - name: Install Dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Test
        run: npm run test
  dependabot:
    runs-on: ubuntu-latest
    if: ${{ github.actor == 'dependabot[bot]' }}
    steps:
      - name: Dependabot metadata
        id: metadata
        uses: dependabot/fetch-metadata@v1
        with:
          github-token: "${{ secrets.GITHUB_TOKEN }}"
      - name: Approve a PR
        run: gh pr review --approve "$PR_URL"
        env:
          PR_URL: ${{github.event.pull_request.html_url}}
          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
      - name: Enable auto-merge for Dependabot PRs
        run: gh pr merge --auto --rebase "$PR_URL"
        env:
          PR_URL: ${{github.event.pull_request.html_url}}
          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
--- a/141
+++ b/141
@ -1,5 +1,5 @@
-                    GNU GENERAL PUBLIC LICENSE
+                    GNU AFFERO GENERAL PUBLIC LICENSE
-                       Version 3, 29 June 2007
+                       Version 3, 19 November 2007
 Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
 Everyone is permitted to copy and distribute verbatim copies
@ -7,17 +7,15 @@
                            Preamble
-  The GNU General Public License is a free, copyleft license for
+  The GNU Affero General Public License is a free, copyleft license for
-software and other kinds of works.
+software and other kinds of works, specifically designed to ensure
 cooperation with the community in the case of network server software.
  The licenses for most software and other practical works are designed
 to take away your freedom to share and change the works.  By contrast,
-the GNU General Public License is intended to guarantee your freedom to
+our General Public Licenses are intended to guarantee your freedom to
 share and change all versions of a program--to make sure it remains free
-software for all its users.  We, the Free Software Foundation, use the
+software for all its users.
 GNU General Public License for most of our software; it applies also to
 any other work released this way by its authors.  You can apply it to
 your programs, too.
  When we speak of free software, we are referring to freedom, not
 price.  Our General Public Licenses are designed to make sure that you
@ -26,44 +24,34 @@ them if you wish), that you receive source code or can get it if you
 want it, that you can change the software or use pieces of it in new
 free programs, and that you know you can do these things.
-  To protect your rights, we need to prevent others from denying you
+  Developers that use our General Public Licenses protect your rights
-these rights or asking you to surrender the rights.  Therefore, you have
+with two steps: (1) assert copyright on the software, and (2) offer
-certain responsibilities if you distribute copies of the software, or if
+you this License which gives you legal permission to copy, distribute
-you modify it: responsibilities to respect the freedom of others.
+and/or modify the software.
-  For example, if you distribute copies of such a program, whether
+  A secondary benefit of defending all users' freedom is that
-gratis or for a fee, you must pass on to the recipients the same
+improvements made in alternate versions of the program, if they
-freedoms that you received.  You must make sure that they, too, receive
+receive widespread use, become available for other developers to
-or can get the source code.  And you must show them these terms so they
+incorporate.  Many developers of free software are heartened and
-know their rights.
+encouraged by the resulting cooperation.  However, in the case of
 software used on network servers, this result may fail to come about.
 The GNU General Public License permits making a modified version and
 letting the public access it on a server without ever releasing its
 source code to the public.
-  Developers that use the GNU GPL protect your rights with two steps:
+  The GNU Affero General Public License is designed specifically to
-(1) assert copyright on the software, and (2) offer you this License
+ensure that, in such cases, the modified source code becomes available
-giving you legal permission to copy, distribute and/or modify it.
+to the community.  It requires the operator of a network server to
 provide the source code of the modified version running there to the
 users of that server.  Therefore, public use of a modified version, on
 a publicly accessible server, gives the public access to the source
 code of the modified version.
-  For the developers' and authors' protection, the GPL clearly explains
+  An older license, called the Affero General Public License and
-that there is no warranty for this free software.  For both users' and
+published by Affero, was designed to accomplish similar goals.  This is
-authors' sake, the GPL requires that modified versions be marked as
+a different license, not a version of the Affero GPL, but Affero has
-changed, so that their problems will not be attributed erroneously to
+released a new version of the Affero GPL which permits relicensing under
-authors of previous versions.
+this license.
  Some devices are designed to deny users access to install or run
 modified versions of the software inside them, although the manufacturer
 can do so.  This is fundamentally incompatible with the aim of
 protecting users' freedom to change the software.  The systematic
 pattern of such abuse occurs in the area of products for individuals to
 use, which is precisely where it is most unacceptable.  Therefore, we
 have designed this version of the GPL to prohibit the practice for those
 products.  If such problems arise substantially in other domains, we
 stand ready to extend this provision to those domains in future versions
 of the GPL, as needed to protect the freedom of users.
  Finally, every program is threatened constantly by software patents.
 States should not allow patents to restrict development and use of
 software on general-purpose computers, but in those that do, we wish to
 avoid the special danger that patents applied to a free program could
 make it effectively proprietary.  To prevent this, the GPL assures that
 patents cannot be used to render the program non-free.
  The precise terms and conditions for copying, distribution and
 modification follow.
@ -72,7 +60,7 @@ modification follow.
  0. Definitions.
-  "This License" refers to version 3 of the GNU General Public License.
+  "This License" refers to version 3 of the GNU Affero General Public License.
  "Copyright" also means copyright-like laws that apply to other kinds of
 works, such as semiconductor masks.
@ -549,35 +537,45 @@ to collect a royalty for further conveying from those to whom you convey
 the Program, the only way you could satisfy both those terms and this
 License would be to refrain entirely from conveying the Program.
-  13. Use with the GNU Affero General Public License.
+  13. Remote Network Interaction; Use with the GNU General Public License.
  Notwithstanding any other provision of this License, if you modify the
 Program, your modified version must prominently offer all users
 interacting with it remotely through a computer network (if your version
 supports such interaction) an opportunity to receive the Corresponding
 Source of your version by providing access to the Corresponding Source
 from a network server at no charge, through some standard or customary
 means of facilitating copying of software.  This Corresponding Source
 shall include the Corresponding Source for any work covered by version 3
 of the GNU General Public License that is incorporated pursuant to the
 following paragraph.
  Notwithstanding any other provision of this License, you have
 permission to link or combine any covered work with a work licensed
-under version 3 of the GNU Affero General Public License into a single
+under version 3 of the GNU General Public License into a single
 combined work, and to convey the resulting work.  The terms of this
 License will continue to apply to the part which is the covered work,
-but the special requirements of the GNU Affero General Public License,
+but the work with which it is combined will remain governed by version
-section 13, concerning interaction through a network will apply to the
+3 of the GNU General Public License.
 combination as such.
  14. Revised Versions of this License.
  The Free Software Foundation may publish revised and/or new versions of
-the GNU General Public License from time to time.  Such new versions will
+the GNU Affero General Public License from time to time.  Such new versions
-be similar in spirit to the present version, but may differ in detail to
+will be similar in spirit to the present version, but may differ in detail to
 address new problems or concerns.
  Each version is given a distinguishing version number.  If the
-Program specifies that a certain numbered version of the GNU General
+Program specifies that a certain numbered version of the GNU Affero General
 Public License "or any later version" applies to it, you have the
 option of following the terms and conditions either of that numbered
 version or of any later version published by the Free Software
 Foundation.  If the Program does not specify a version number of the
-GNU General Public License, you may choose any version ever published
+GNU Affero General Public License, you may choose any version ever published
 by the Free Software Foundation.
  If the Program specifies that a proxy can decide which future
-versions of the GNU General Public License can be used, that proxy's
+versions of the GNU Affero General Public License can be used, that proxy's
 public statement of acceptance of a version permanently authorizes you
 to choose that version for the Program.
@ -635,40 +633,29 @@ the "copyright" line and a pointer to where the full notice is found.
    Copyright (C) <year>  <name of author>
    This program is free software: you can redistribute it and/or modify
-    it under the terms of the GNU General Public License as published by
+    it under the terms of the GNU Affero General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.
    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-    GNU General Public License for more details.
+    GNU Affero General Public License for more details.
-    You should have received a copy of the GNU General Public License
+    You should have received a copy of the GNU Affero General Public License
    along with this program.  If not, see <https://www.gnu.org/licenses/>.
 Also add information on how to contact you by electronic and paper mail.
-  If the program does terminal interaction, make it output a short
+  If your software can interact with users remotely through a computer
-notice like this when it starts in an interactive mode:
+network, you should also make sure that it provides a way for users to
-
+get its source.  For example, if your program is a web application, its
-    <program>  Copyright (C) <year>  <name of author>
+interface could display a "Source" link that leads users to an archive
-    This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
+of the code.  There are many ways you could offer source, and different
-    This is free software, and you are welcome to redistribute it
+solutions will be better for different programs; see section 13 for the
-    under certain conditions; type `show c' for details.
+specific requirements.
 The hypothetical commands `show w' and `show c' should show the appropriate
 parts of the General Public License.  Of course, your program's commands
 might be different; for a GUI interface, you would use an "about box".
  You should also get your employer (if you work as a programmer) or school,
 if any, to sign a "copyright disclaimer" for the program, if necessary.
-For more information on this, and how to apply and follow the GNU GPL, see
+For more information on this, and how to apply and follow the GNU AGPL, see
 <https://www.gnu.org/licenses/>.
  The GNU General Public License does not permit incorporating your program
 into proprietary programs.  If your program is a subroutine library, you
 may consider it more useful to permit linking proprietary applications with
 the library.  If this is what you want to do, use the GNU Lesser General
 Public License instead of this License.  But first, please read
 <https://www.gnu.org/licenses/why-not-lgpl.html>.
--- a/README.md
+++ b/README.md
@ -12,5 +12,5 @@ npm run build
 ### Local Development
 ```bash
-npm run dev-server
+npm run dev
 ```
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@ -0,0 +1,44 @@
 import typescriptEslint from "@typescript-eslint/eslint-plugin";
 import globals from "globals";
 import tsParser from "@typescript-eslint/parser";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
 import js from "@eslint/js";
 import { FlatCompat } from "@eslint/eslintrc";
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 const compat = new FlatCompat({
    baseDirectory: __dirname,
    recommendedConfig: js.configs.recommended,
    allConfig: js.configs.all
 });
 export default [
    ...compat.extends("eslint:recommended", "plugin:@typescript-eslint/recommended"),
    {
        plugins: {
            "@typescript-eslint": typescriptEslint,
        },
        languageOptions: {
            globals: {
                ...globals.browser,
            },
            parser: tsParser,
            ecmaVersion: "latest",
            sourceType: "module",
        },
        rules: {
            indent: ["error", 2, {
                SwitchCase: 1,
            }],
            "linebreak-style": ["error", "unix"],
            quotes: ["error", "single"],
            semi: ["error", "always"],
        },
    },
 ];
--- a/index.html
+++ b/index.html
@ -2,30 +2,26 @@
 <html lang="en">
 <head>
  <script defer data-domain="interval-timer.wbrawner.com" src="https://plausible.wbrawner.com/js/plausible.js"></script>
  <meta charset="utf-8" />
  <title>Trainterval</title>
  <base href="/" />
  <meta name="viewport"
    content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
  <meta name="description" content="An interval timer" />
  <meta name="theme-color" content="#000000" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-title" content="Trainterval" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <link rel="icon" href="/assets/icons/24x24-icon.png" type="image/x-icon" />
  <link rel="manifest" href="/manifest.json" />
-
+  <script type="module" src="/src/vendor/js/fluentui-web-components.js" crossorigin="anonymous"></script>
  <script type="module" src="/src/app-index.ts"></script>
 </head>
 <body>
-  <app-index></app-index>
+  <fluent-design-system-provider>
    <app-index></app-index>
  </fluent-design-system-provider>
  <script>
    if ('serviceWorker' in navigator) {
@ -34,6 +30,10 @@
      );
    }
  </script>
  <noscript>
    <img src="https://shy.wbrawner.com/ingress/e94519dc-97db-49c4-9ba8-73b73bd6c92a/pixel.gif">
  </noscript>
  <script defer src="https://shy.wbrawner.com/ingress/e94519dc-97db-49c4-9ba8-73b73bd6c92a/script.js"></script>
 </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,40 +1,39 @@
 {
-  "name": "pwa-starter",
+  "name": "interval-timer",
  "version": "0.0.1",
-  "description": "A starter kit for building PWAs!",
+  "description": "An interval timer PWA",
  "main": "index.js",
  "scripts": {
    "build": "tsc && vite build",
    "coverage": "vitest --coverage",
-    "dev": "vite --open",
+    "dev": "vite",
    "dev-task": "vite",
    "lint": "eslint src/**/*.ts",
    "start": "npm run dev",
    "start-remote": "vite --host",
    "test": "vitest"
  },
-  "author": "",
+  "author": "William Patrick Brawner <me@wbrawner.com>",
-  "license": "ISC",
+  "license": "AGPL-3.0-only",
  "dependencies": {
-    "@vaadin/router": "^1.7.5",
+    "@vaadin/router": "^2.0.0",
    "idb": "^8.0.0",
-    "lit": "^3.1.0",
+    "lit": "^3.1.4",
-    "workbox-build": "^7.0.0",
+    "workbox-build": "^7.1.1",
-    "workbox-core": "^7.0.0",
+    "workbox-core": "^7.1.0",
-    "workbox-precaching": "^7.0.0"
+    "workbox-precaching": "^7.1.0"
  },
  "devDependencies": {
    "@types/dom-screen-wake-lock": "^1.0.3",
-    "@types/node": "^20.10.4",
+    "@types/node": "^22.0.0",
-    "@typescript-eslint/eslint-plugin": "^6.14.0",
+    "@typescript-eslint/eslint-plugin": "^8.0.0",
-    "@typescript-eslint/parser": "^6.13.2",
+    "c8": "^10.1.2",
-    "c8": "^8.0.1",
+    "eslint": "^9.0.0",
-    "eslint": "^8.55.0",
+    "globals": "^15.8.0",
-    "jsdom": "^23.0.1",
+    "jsdom": "^25.0.0",
-    "typescript": "^5.3.3",
+    "typescript": "^5.4.5",
-    "vite": "^5.0.7",
+    "vite": "^5.3.1",
-    "vite-plugin-pwa": "^0.17.4",
+    "vite-plugin-pwa": "^0.21.0",
-    "vitest": "^1.0.4"
+    "vitest": "^2.0.0"
  },
  "prettier": {
    "tabWidth": 2,
--- a/renovate.json
+++ b/renovate.json
@ -0,0 +1,3 @@
 {
  "$schema": "https://docs.renovatebot.com/renovate-schema.json"
 }
--- a/src/script/components/active-timer.ts
+++ b/src/script/components/active-timer.ts
@ -128,15 +128,15 @@ export class ActiveTimer extends LitElement {
          <p class="phase">${this.timerState.phase}</p>
          <p class="time">${durationString(this.timerState.timeRemaining)}</p>
          <div class="controls">
-            <button @click=${this.goBack}>
+            <fluent-button appearance="stealth" @click=${this.goBack}>
              <back-icon></back-icon>
-            </button>
+            </fluent-button>
-            <button @click=${this.toggleActiveState}>
+            <fluent-button appearance="stealth" @click=${this.toggleActiveState}>
              ${this.toggleIcon()}
-            </button>
+            </fluent-button>
-            <button @click=${this.goForward}>
+            <fluent-button appearance="stealth" @click=${this.goForward}>
              <forward-icon></forward-icon>
-            </button>
+            </fluent-button>
          </div>
        </div>
        <footer>
--- a/src/script/components/header.ts
+++ b/src/script/components/header.ts
@ -32,6 +32,10 @@ export class AppHeader extends LitElement {
        font-weight: bold;
      }
      nav fluent-anchor {
        margin-left: 10px;
      }
      #menu-button-block {
        display: flex;
        justify-content: space-between;
@ -45,6 +49,12 @@ export class AppHeader extends LitElement {
      .spacer {
        width: 1em;
      }
      @media(prefers-color-scheme: light) {
        nav fluent-anchor::part(control) {
          color: initial;
        }
      }
    `;
  }
@ -64,9 +74,9 @@ export class AppHeader extends LitElement {
    return html`
      <header>
        <div id="menu-button-block">
-          <button @click="${this.toggleSidebar}">
+          <fluent-button appearance="stealth" @click="${this.toggleSidebar}">
            <navigation-icon></navigation-icon>
-          </button>
+          </fluent-button>
          <div class="spacer"></div>
          <h1>${this.apptitle || 'Trainterval'}</h1>
        </div>
--- a/src/script/components/sidebar.ts
+++ b/src/script/components/sidebar.ts
@ -19,6 +19,10 @@ export class AppSidebar extends LitElement {
        header {
          color: black;
        }
        nav fluent-anchor::part(control) {
          color: initial;
        }
      }
      .sidebar-content {
@ -40,6 +44,11 @@ export class AppSidebar extends LitElement {
        padding: 1em;
      }
      fluent-listbox {
        flex-grow: 1;
        border: none;
      }
      .visible .sidebar-content {
        transform: translate3d(0, 0, 0);
      }
@ -58,9 +67,26 @@ export class AppSidebar extends LitElement {
      .visible .overlay  {
        display: block;
      }
      fluent-option {
        --design-unit: 6;
      }
      fluent-button {
        --design-unit: 6;
        padding: 5px;
      }
      fluent-button::part(control) {
        justify-content: start;
        width: 100%;
      }
    `;
  }
  @query('fluent-button')
    fButton?: HTMLElement;
  constructor() {
    super();
  }
@ -91,23 +117,23 @@ export class AppSidebar extends LitElement {
        <div class="overlay" @click="${this.toggleVisibility}"></div>
        <div class="sidebar-content">
          <h3>Trainterval</h3>
-          <ul>
+          <fluent-listbox>
            ${this.timers?.map(timer => {
    return html`
-                  <li
+                  <fluent-option
                    @click=${() => this.selectTimer(timer.id!)}
                    selected=${timer.id === this.selectedTimer}
                    value=${timer.name}>
                    ${timer.name}<br />${timer.description || ''}
-                  </li>
+                  </fluent-option>
                `;
  })}
-          </ul>
+          </fluent-listbox>
-          <hr />
+          <fluent-divider></fluent-divider>
-          <button @click="${this.newTimer}">
+          <fluent-button appearance="stealth" @click="${this.newTimer}">
-            <icon-add></icon-add>
+            <icon-add slot="start"></icon-add>
            New Timer
-          </button>
+          </fluent-button>
      </div>
    `;
  }
--- a/src/script/components/timer-form.ts
+++ b/src/script/components/timer-form.ts
@ -119,6 +119,7 @@ export class TimerFormDialog extends LitElement {
    await this.timerService?.save(timer);
    this.saving = false;
    // TODO: Clear form
    this.toggleVisibility();
    document.dispatchEvent(new TimerSavedEvent(id))
  }
@ -133,10 +134,11 @@ export class TimerFormDialog extends LitElement {
      return null;
    }
    return html`
-      <button
+      <fluent-button
        appearance="outline"
        tabindex="0"
        @click=${this.delete}
-        style="margin-top: 1em;">Delete</button>
+        style="margin-top: 1em;">Delete</fluent-button>
    `;
  }
@ -167,69 +169,71 @@ export class TimerFormDialog extends LitElement {
              type="hidden"
              name="id"
              .value=${this.timer?.id?.toString() || ''} />
-            <label for="timer-name">Name</label>
+            <fluent-text-field
            <input
              id="timer-name"
-              type="text"
+              appearance="outline"
              placeholder="My Timer"
-              .value=${this.timer?.name || ''}/ >
+              .value=${this.timer?.name || ''}>Name</fluent-text-field>
-            <label for="timer-description">Description</label>
+            <fluent-text-area
            <textarea
              id="timer-description"
              appearance="outline"
              placeholder="More details"
-              .value=${this.timer?.description || ''}></textarea>
+              .value=${this.timer?.description || ''}>Description</fluent-text-area>
-            <label for="timer-warmup">Warm-up</label>
+            <fluent-text-field
            <input
              id="timer-warmup"
              appearance="outline"
              placeholder="05:00"
              pattern="${this.durationPattern}"
-              .value=${this.durationString(this.timer?.warmUp)} />
+              .value=${this.durationString(this.timer?.warmUp)}>Warm Up</fluent-text-field>
-            <label for="timer-low">Low Intensity</label>
+              <fluent-text-field
            <input
              id="timer-low"
              appearance="outline"
              placeholder="00:30"
              pattern="${this.durationPattern}"
-              .value=${this.durationString(this.timer?.lowIntensity)}>
+              .value=${this.durationString(this.timer?.lowIntensity)}>Low Intensity</fluent-text-field>
-            <label for="timer-hi">High Intensity</label>
+              <fluent-text-field
            <input
              id="timer-hi"
              appearance="outline"
              placeholder="01:00"
              pattern="${this.durationPattern}"
-              .value=${this.durationString(this.timer?.highIntensity)}>
+              .value=${this.durationString(this.timer?.highIntensity)}>High Intensity</fluent-text-field>
-            <label for="timer-rest">Rest</label>
+              <fluent-text-field
            <input
              id="timer-rest"
              appearance="outline"
              placeholder="01:00"
              pattern="${this.durationPattern}"
-              .value=${this.durationString(this.timer?.rest)}>
+              .value=${this.durationString(this.timer?.rest)}>Rest</fluent-text-field>
-            <label for="timer-cool">Cooldown</label>
+              <fluent-text-field
            <input
              id="timer-cool"
              appearance="outline"
              placeholder="05:00"
              pattern="${this.durationPattern}"
-              .value=${this.durationString(this.timer?.coolDown)}>
+              .value=${this.durationString(this.timer?.coolDown)}>Cooldown</fluent-text-field>
-            <label for="timer-sets">Sets</label>
+            <fluent-text-field
            <input
              id="timer-sets"
              appearance="outline"
              placeholder="4"
-              .value=${this.timer?.sets}>
+              .value=${this.timer?.sets}>Sets</fluent-text-field>
-            <label for="timer-rounds">Rounds</label>
+            <fluent-text-field
            <input
              id="timer-rounds"
              appearance="outline"
              placeholder="2"
-              .value=${this.timer?.rounds}>
+              .value=${this.timer?.rounds}>Rounds</fluent-text-field>
-            <button
+            <fluent-button
              appearance="accent"
              tabindex="0"
              @click=${this.save}
-              style="margin: 1em 0;">Save</button>
+              style="margin: 1em 0;">Save</fluent-button>
-            <button tabindex="0" @click=${this.toggleVisibility}>Cancel</button>
+            <fluent-button appearance="outline" tabindex="0" @click=${this.toggleVisibility}>Cancel</fluent-button>
            ${this.deleteButton()}
          </form>
        </div>
      `;
    }
    return html`
      <fluent-dialog ?hidden=${!this.visible} trap-focus modal class=${this.timer?.id ? 'tall' : ''}>
        ${body}
      </fluent-dialog>
    `;
  }
 }
--- a/src/script/pages/app-home.ts
+++ b/src/script/pages/app-home.ts
@ -12,9 +12,6 @@ export class AppHome extends LitElement {
  @property({ type: Number }) editTimer?: number;
  private timerService?: TimerService;
  @query('dialog')
  dialog: HTMLElement | null | undefined;
  static get styles() {
    return css`
      main {
@ -67,7 +64,6 @@ export class AppHome extends LitElement {
    if (!this.selectedTimer) {
      this.selectedTimer = this.timers[0]?.id;
    }
      dialog.close()
  }
  private editButton() {
@ -75,7 +71,7 @@ export class AppHome extends LitElement {
      return null;
    }
    return html`
-      <button @click=${() => this.editTimer = this.selectedTimer}>Edit</button>
+      <fluent-button appearance="stealth" slot="actions" @click=${() => this.editTimer = this.selectedTimer}>Edit</fluent-button>
    `;
  }
@ -91,10 +87,11 @@ export class AppHome extends LitElement {
      <div class="timer-wrapper">
        <p>
          Create a timer to begin<br />
-          <button
+          <fluent-button
            appearance="stealth"
            @click=${() => this.editTimer = -1}>
            New Timer
-          </button>
+          </fluent-button>
        </p>
       </div>
      `;
@ -110,13 +107,12 @@ export class AppHome extends LitElement {
          @selecttimer=${(e: SelectTimerEvent) => this.selectedTimer = e.timerId}>
          ${this.editButton()}
        </app-header>
-        <dialog>
+        ${body}
        <timer-form-dialog
          ?visible=${this.editTimer !== undefined}
          .timerService=${this.timerService}
          .timer=${this.editTimer === timer?.id ? timer : null}
          @close=${this.closeEditor}></timer-form-dialog>
        </dialog>
        ${body}
      </main>
    `;
  }
--- a/src/script/timer-service.ts
+++ b/src/script/timer-service.ts
@ -53,7 +53,7 @@ let timerService: TimerService;
 export async function timerServiceSingleton(): Promise<TimerService> {
  if (!timerService) {
    const db = await idb.openDB(dbName, dbVersion, {
-      upgrade(db, _oldVersion, newVersion, _transaction) {
+      upgrade(db, _oldVersion, newVersion) {
        if (newVersion === 1) {
          db.createObjectStore(
            storeName,
@ -68,4 +68,4 @@ export async function timerServiceSingleton(): Promise<TimerService> {
    timerService = new IDBTimerService(db);
  }
  return timerService;
-}
+}
--- a/src/vendor/js/fluentui-web-components.js
+++ b/src/vendor/js/fluentui-web-components.js