fix: get tests passing on latest playwright version

.circleci/config.yml

@@ -3,7 +3,7 @@ version: 2.1
 executors:
     node:
         docker:
-            - image: mcr.microsoft.com/playwright:v1.44.0
+            - image: mcr.microsoft.com/playwright:v1.52.0
         resource_class: xlarge
         environment:
             NODE_ENV: development
@@ -22,12 +22,12 @@ commands:
     downstream:
         steps:
             - checkout
-            # - restore_cache:
-            #       keys:
-            #           - v4c-dependencies-{{ arch }}-{{ checksum "yarn.lock" }}
-            # - restore_cache:
-            #       keys:
-            #           - v4b-<< pipeline.parameters.wireit_cache_name >>-{{ arch }}-{{ checksum "package.json" }}-
+            - restore_cache:
+                  keys:
+                      - v4c-dependencies-{{ arch }}-{{ checksum "yarn.lock" }}
+            - restore_cache:
+                  keys:
+                      - v4b-<< pipeline.parameters.wireit_cache_name >>-{{ arch }}-{{ checksum "package.json" }}-
             - run:
                   name: Installing Dependencies
                   command: |
@@ -128,7 +128,7 @@ commands:
             - run:
                   when: always
                   command: |
-                      rm -rf test/visual/screenshots-baseline
+                      [[ -f test/visual/screenshots-baseline ]] && rm -rf test/visual/screenshots-baseline
                       cp -R test/visual/screenshots-actual/updates test/visual/screenshots-baseline
             - save_cache:
                   when: always
@@ -338,7 +338,7 @@ jobs:
             - run:
                   when: always
                   command: |
-                      rm -rf test/visual/screenshots-baseline
+                      [[ -f test/visual/screenshots-baseline ]] && rm -rf test/visual/screenshots-baseline
                       cp -R test/visual/screenshots-actual/updates test/visual/screenshots-baseline
             - save_cache:
                   when: always

.eslintrc.json

@@ -34,6 +34,7 @@
             }
         ],
         "import/prefer-default-export": "off",
+        "import/no-extraneous-dependencies": "off",
         "@spectrum-web-components/prevent-argument-names": [
             "error",
             ["e", "ev", "evt", "err"]
@@ -83,6 +84,21 @@
             "rules": {
                 "no-console": ["off"]
             }
+        },
+        {
+            "files": [
+                "packages/*/src/*.ts",
+                "tools/*/src/*.ts",
+                "projects/*/src/*.ts"
+            ],
+            "rules": {
+                "import/no-extraneous-dependencies": [
+                    "error",
+                    {
+                        "devDependencies": true
+                    }
+                ]
+            }
         }
     ]
 }

lint-staged.config.js

@@ -12,12 +12,12 @@ governing permissions and limitations under the License.
 
 export default {
     '*.css': [
-        'stylelint --fix --cache --allow-empty-input',
         'prettier --cache --no-error-on-unmatched-pattern --ignore-unknown --log-level silent --write',
+        'stylelint --fix --cache --allow-empty-input',
     ],
     '*.ts': [
-        'eslint --fix --format pretty --cache --no-error-on-unmatched-pattern --quiet',
         'prettier --cache --no-error-on-unmatched-pattern --ignore-unknown --log-level silent --write',
+        'eslint --fix --format pretty --config .eslintrc.json --cache --no-error-on-unmatched-pattern --quiet',
     ],
     '{packages,tools}/*/src/**/!(*.css).ts': ['yarn lit-analyzer'],
     'package.json': () => [

package.json

@@ -2,8 +2,18 @@
     "name": "@adobe/spectrum-web-components",
     "version": "0.0.9",
     "private": true,
-    "description": "",
+    "description": "A web-component implementation of the Adobe Spectrum design system.",
     "type": "module",
+    "license": "Apache-2.0",
+    "author": "Adobe",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/adobe/spectrum-web-components.git"
+    },
+    "homepage": "https://opensource.adobe.com/spectrum-web-components/",
+    "bugs": {
+        "url": "https://github.com/adobe/spectrum-web-components/issues"
+    },
     "engines": {
         "node": ">=20",
         "yarn": ">=4.6.0"
@@ -101,7 +111,7 @@
         "@netlify/build": "^29.17.3",
         "@open-wc/dev-server-hmr": "^0.2.0",
         "@open-wc/testing": "^4.0.0",
-        "@playwright/test": "^1.44.0",
+        "@playwright/test": "^1.52.0",
         "@rollup/plugin-commonjs": "^25.0.7",
         "@rollup/plugin-json": "^6.0.1",
         "@rollup/plugin-node-resolve": "^15.2.3",
@@ -199,6 +209,27 @@
         "wireit": "^0.14.3",
         "yargs": "^17.2.1"
     },
+    "resolutions": {
+        "playwright": "^1.52.0"
+    },
+    "workspaces": [
+        "linters/*",
+        "packages/*",
+        "projects/*",
+        "tools/*",
+        "react/*"
+    ],
+    "packageManager": "[email protected]",
+    "keywords": [
+        "design-system",
+        "spectrum",
+        "adobe",
+        "adobe-spectrum",
+        "web components",
+        "web-components",
+        "lit-element",
+        "lit-html"
+    ],
     "wireit": {
         "build:css:watch": {
             "command": "node ./tasks/watch-css.js",
@@ -426,33 +457,5 @@
             ],
             "clean": "if-file-deleted"
         }
-    },
-    "workspaces": [
-        "linters/*",
-        "packages/*",
-        "projects/*",
-        "tools/*",
-        "react/*"
-    ],
-    "packageManager": "[email protected]",
-    "license": "Apache-2.0",
-    "author": "Adobe",
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/adobe/spectrum-web-components.git"
-    },
-    "bugs": {
-        "url": "https://github.com/adobe/spectrum-web-components/issues"
-    },
-    "keywords": [
-        "design-system",
-        "spectrum",
-        "adobe",
-        "adobe-spectrum",
-        "web components",
-        "web-components",
-        "lit-element",
-        "lit-html"
-    ],
-    "homepage": "https://opensource.adobe.com/spectrum-web-components/"
+    }
 }

packages/icons-workflow/bin/build.js

@@ -169,9 +169,9 @@ async function buildIcons(icons, tag, iconsNameList) {
 
         const iconLiteral = `
         ${disclaimer}
-    
+
         import {tag as html, TemplateResult} from '../custom-tag.js';
-    
+
         export {setCustomTemplateLiteralTag} from '../custom-tag.js';
         export const ${ComponentName}Icon = ({
         width = 24,
@@ -241,7 +241,7 @@ async function buildIcons(icons, tag, iconsNameList) {
 
         const iconElement = `
         ${disclaimer}
-        
+
         import {
             html,
             TemplateResult
@@ -252,22 +252,22 @@ async function buildIcons(icons, tag, iconsNameList) {
         import {
             setCustomTemplateLiteralTag
         } from '../custom-tag.js';
-        
+
         ${currenVersionIconImport}
         ${otherVersionIconImport}
-        
+
         /**
          * @element ${iconElementName}
          */
         export class Icon${ComponentName} extends IconBase {
             protected override render(): TemplateResult {
                 setCustomTemplateLiteralTag(html);
-    
+
                 if(this.spectrumVersion === ${spectrumVersion}){
                     return CurrentIcon({ hidden: !this.label, title: this.label }) as TemplateResult;
                 }
                 return AlternateIcon({ hidden: !this.label, title: this.label }) as TemplateResult;
-    
+
             }
         }
         `;
@@ -302,12 +302,12 @@ async function buildIcons(icons, tag, iconsNameList) {
 
         const iconRegistration = `
         ${disclaimer}
-    
+
         import { Icon${ComponentName} } from '../src/elements/Icon${id}.js';
         import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
-    
+
         defineElement('${iconElementName}', Icon${ComponentName});
-    
+
         declare global {
             interface HTMLElementTagNameMap {
                 '${iconElementName}': Icon${ComponentName};

packages/iconset/stories/icons-demo.ts

@@ -209,7 +209,8 @@ export class IconsDemo extends SpectrumElement {
                         var(
                                 --spectrum-alias-focus-ring-gap,
                                 var(--spectrum-spacing-50)
-                            ) * 2
+                            ) *
+                            2
                     );
                 }
             `,
@@ -225,7 +226,9 @@ export class IconsDemo extends SpectrumElement {
     }
 
     private shouldCopy(tag: string): void {
-        if (!this.package) return;
+        if (!this.package) {
+            return;
+        }
         const conditionedTag = tag.slice(1, tag.length - 1);
         const importURL = `import '@spectrum-web-components/${this.package}/icons/${conditionedTag}.js';`;
         this.dispatchEvent(

packages/number-field/test/inputs.test.ts

@@ -14,7 +14,6 @@ import { html } from '@spectrum-web-components/base';
 import { elementUpdated, expect, nextFrame } from '@open-wc/testing';
 import { getElFrom } from './helpers.js';
 import { createLanguageContext } from '../../../tools/reactive-controllers/test/helpers.js';
-import { shouldPolyfill } from '@formatjs/intl-numberformat/should-polyfill.js';
 
 import '@spectrum-web-components/number-field/sp-number-field.js';
 import { remapMultiByteCharacters } from '@spectrum-web-components/number-field';
@@ -28,23 +27,6 @@ import {
 import { sendKeys } from '@web/test-runner-commands';
 
 describe('NumberField - inputs', () => {
-    before(async () => {
-        const shouldPolyfillEn = shouldPolyfill('en');
-        const shouldPolyfillEs = shouldPolyfill('es');
-        const shouldPolyfillFr = shouldPolyfill('fr');
-        if (shouldPolyfillEn || shouldPolyfillEs || shouldPolyfillFr) {
-            await import('@formatjs/intl-numberformat/polyfill-force.js');
-        }
-        if (shouldPolyfillEn) {
-            await import('@formatjs/intl-numberformat/locale-data/en.js');
-        }
-        if (shouldPolyfillEs) {
-            await import('@formatjs/intl-numberformat/locale-data/es.js');
-        }
-        if (shouldPolyfillFr) {
-            await import('@formatjs/intl-numberformat/locale-data/fr.js');
-        }
-    });
     describe('keystroke prevention', () => {
         it('converts 2 byte characters, default', async () => {
             const el = await getElFrom(html`