chore: migrate to pnpm

.github/workflows/deploy.yml

@@ -11,22 +11,27 @@ jobs:
       contents: write
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd #v6.0.2
 
+      - name: Setup pnpm
+        uses: pnpm/action-setup@0e279bb959325dab635dd2c09392533439d90093 # v6.0.8
+        with:
+          cache: true
+
       - name: Set up Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e #v6
         with:
-          node-version: '20'
+          node-version: '24.x'
 
       - name: Install dependencies
-        run: npm ci
+        run: pnpm ci
 
       - name: Build
-        run: npm run build
+        run: pnpm run build
 
       - name: Deploy
         run: |
           git remote set-url origin https://git:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git
           npx gh-pages -d dist -b deploy -u "github-actions <support+actions@github.com>"
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/test-on-pr-branch.yml

@@ -6,18 +6,23 @@ jobs:
     runs-on: ubuntu-22.04
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd #v6.0.2
 
+      - name: Setup pnpm
+        uses: pnpm/action-setup@0e279bb959325dab635dd2c09392533439d90093 # v6.0.8
+        with:
+          cache: true
+
       - name: Set up Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e #v6
         with:
-          node-version: '20'
+          node-version: '24.x'
 
       - name: Install dependencies
-        run: npm ci
+        run: pnpm ci
 
       - name: Install playwright browsers
         run: npx playwright install chromium
 
       - name: Run unit tests
-        run: npm run-script test
+        run: pnpm run-script test

.github/workflows/test.yml

@@ -6,18 +6,23 @@ jobs:
     runs-on: ubuntu-22.04
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd #v6.0.2
 
+      - name: Setup pnpm
+        uses: pnpm/action-setup@0e279bb959325dab635dd2c09392533439d90093 # v6.0.8
+        with:
+          cache: true
+
       - name: Set up Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e #v6
         with:
-          node-version: '20'
+          node-version: '24.x'
 
       - name: Install dependencies
-        run: npm ci
+        run: pnpm ci
 
       - name: Install playwright browsers
         run: npx playwright install chromium
 
       - name: Run unit tests
-        run: npm run-script test
+        run: pnpm run-script test

components/preview-dialog.ts

@@ -4,25 +4,24 @@ import { LitElement, html, css } from 'lit';
 import { query, property } from 'lit/decorators.js';
 import { MdDialog } from '@scopedelement/material-web/dialog/dialog.js';
 import { MdTextButton } from '@scopedelement/material-web/button/text-button.js';
-import AceEditor from 'ace-custom-element';
 import { insertSelectedLNodeType, LNodeDescription } from '@openscd/scl-lib';
 import { TreeSelection } from '@openenergytools/tree-grid';
 import { createBaseSCLDoc, serializeAndFormat } from '../foundation.js';
+import 'ace-custom-element';
 
 const aceTheme = `solarized_${localStorage.getItem('theme') || 'light'}`;
 
 export class PreviewDialog extends ScopedElementsMixin(LitElement) {
   static scopedElements = {
     'md-dialog': MdDialog,
     'md-text-button': MdTextButton,
-    'ace-editor': AceEditor,
   };
 
   @query('md-dialog')
   dialog!: MdDialog;
 
   @query('ace-editor')
-  aceEditor!: typeof AceEditor;
+  aceEditor!: HTMLElement;
 
   @property({ type: Object })
   selection: TreeSelection = {};

oscd-template-generator.ts

@@ -428,6 +428,15 @@ export default class TemplateGenerator extends ScopedElementsMixin(LitElement) {
 
     md-outlined-button {
       text-transform: uppercase;
+      --md-outlined-button-label-text-font: var(--oscd-theme-text-font, 'Roboto');
+      --md-outlined-button-label-text-line-height: 1.25rem;
+    }
+
+    md-outlined-button::part(ripple),
+    md-outlined-button::part(focus-ring) {
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
     }
 
     md-icon {