chore: merged to main

.circleci/config.yml

@@ -3,14 +3,14 @@ version: 2.1
 executors:
     node:
         docker:
-            - image: mcr.microsoft.com/playwright:v1.43.1
+            - image: mcr.microsoft.com/playwright:v1.44.0
         resource_class: large
         environment:
             NODE_ENV: development
 parameters:
     current_golden_images_hash:
         type: string
-        default: 4c5799f8273b709eada1adbdb6f4b890678c449b
+        default: 00f8d230a15ce013f289abbe80bc64cd9e90963b
     wireit_cache_name:
         type: string
         default: wireit
@@ -146,13 +146,24 @@ jobs:
         steps:
             - downstream
             - run:
-                  name: Run tests
-                  command: yarn test:ci --config web-test-runner.config.ci-chromium.js --group unit --coverage
+                  name: Run unit tests
+                  command: yarn test:ci --config web-test-runner.config.ci-chromium.js --group no-memory-ci --coverage
             - store_test_results:
                   path: /root/project/results/
             - store_artifacts:
                   path: coverage
 
+    test-chromium-memory:
+        executor: node
+
+        steps:
+            - downstream
+            - run:
+                  name: Run memory tests
+                  command: yarn test:ci --config web-test-runner.config.ci-chromium.js --group memory-ci
+            - store_test_results:
+                  path: /root/project/results/
+
     test-firefox:
         executor: node
         parallelism: 5
@@ -204,6 +215,7 @@ jobs:
                   command: yarn docs:preview
             - run: echo '/*    /index.html   200' > projects/documentation/dist/_redirects
             - run: |
+                  cd projects/documentation/dist
                   branch=$(git symbolic-ref --short HEAD)
                   branch=$(npx slugify-cli $branch)
                   yarn netlify deploy --alias=$branch
@@ -248,17 +260,18 @@ jobs:
                   name: Create review site
                   command: |
                       branch=$(git symbolic-ref --short HEAD)
-                      node test/visual/review.js --branch=$branch --commit=<< pipeline.git.revision >> --theme="hcm"
+                      node test/visual/review.js --branch=$branch --commit=<< pipeline.git.revision >> --system="hcm"
                       yarn rollup -c test/visual/rollup.config.js
             - run:
                   when: on_fail
                   name: Publish review site
                   command: |
                       cp projects/documentation/content/favicon.ico test/visual
+                      cd test/visual
                       branch=$(git symbolic-ref --short HEAD)
                       hash=$(echo -n $branch-hcm | md5sum | cut -c 1-32)
                       echo hash
-                      yarn netlify deploy --alias=$hash --dir=test/visual
+                      yarn netlify deploy --alias=$hash
             # move "updated" screenshot into the baseline directory before making the new cache
             - run:
                   when: always
@@ -304,6 +317,7 @@ workflows:
     build:
         jobs:
             - test-chromium
+            - test-chromium-memory
             - test-firefox
             - test-webkit
             - lint

.nvmrc

@@ -1 +1 @@
-20.13.0
+20.13.1

package.json

@@ -102,7 +102,7 @@
         "@netlify/build": "^29.1.0",
         "@open-wc/dev-server-hmr": "^0.2.0",
         "@open-wc/testing": "^4.0.0",
-        "@playwright/test": "^1.43.1",
+        "@playwright/test": "^1.44.0",
         "@rollup/plugin-commonjs": "^25.0.7",
         "@rollup/plugin-json": "^6.0.1",
         "@rollup/plugin-node-resolve": "^15.2.3",
@@ -145,7 +145,7 @@
         "custom-elements-manifest": "^2.0.0",
         "debounce": "^2.0.0",
         "deepmerge": "^4.2.2",
-        "esbuild": "^0.20.0",
+        "esbuild": "^0.21.0",
         "eslint": "^8.23.0",
         "eslint-config-prettier": "^9.1.0",
         "eslint-formatter-pretty": "^5.0.0",

packages/accordion/package.json

@@ -73,7 +73,7 @@
         "@spectrum-web-components/shared": "^0.42.3"
     },
     "devDependencies": {
-        "@spectrum-css/accordion": "^4.2.6"
+        "@spectrum-css/accordion": "^5.1.0"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",

packages/accordion/src/spectrum-accordion-item.css

@@ -22,12 +22,7 @@ governing permissions and limitations under the License.
         --mod-accordion-item-width,
         var(--spectrum-accordion-item-width)
     );
-    margin: 0;
-    position: relative;
-}
-
-:host(:first-child) {
-    border-block-start: 1px solid #0000;
+    border-block-end: 1px solid #0000;
     border-color: var(
         --mod-accordion-divider-color,
         var(--spectrum-accordion-divider-color)
@@ -36,10 +31,12 @@ governing permissions and limitations under the License.
         --mod-accordion-divider-thickness,
         var(--spectrum-divider-thickness-small)
     );
+    margin: 0;
+    position: relative;
 }
 
-:host {
-    border-block-end: 1px solid #0000;
+:host(:first-child) {
+    border-block-start: 1px solid #0000;
     border-color: var(
         --mod-accordion-divider-color,
         var(--spectrum-accordion-divider-color)
@@ -96,6 +93,7 @@ governing permissions and limitations under the License.
     );
 }
 
+.iconContainer:dir(rtl),
 :host([dir='rtl']) .iconContainer {
     transform: scaleX(-1);
 }
@@ -182,6 +180,14 @@ governing permissions and limitations under the License.
     );
     appearance: none;
     text-align: start;
+    color: var(
+        --mod-accordion-item-header-color-default,
+        var(--spectrum-accordion-item-header-color-default)
+    );
+    background-color: var(
+        --mod-accordion-background-color-default,
+        var(--spectrum-accordion-background-color-default)
+    );
     border: 0;
     justify-content: flex-start;
     align-items: center;
@@ -214,17 +220,6 @@ governing permissions and limitations under the License.
     inset-inline-start: 0;
 }
 
-#header {
-    color: var(
-        --mod-accordion-item-header-color-default,
-        var(--spectrum-accordion-item-header-color-default)
-    );
-    background-color: var(
-        --mod-accordion-background-color-default,
-        var(--spectrum-accordion-background-color-default)
-    );
-}
-
 #header:focus-visible {
     border-radius: var(
         --mod-accordion-corner-radius,
@@ -272,7 +267,7 @@ governing permissions and limitations under the License.
         --mod-accordion-item-header-disabled-color,
         var(--spectrum-accordion-item-header-disabled-color)
     );
-    background-color: #0000;
+    background-color: initial;
 }
 
 @media (hover: hover) {
@@ -306,7 +301,7 @@ governing permissions and limitations under the License.
             --mod-accordion-item-header-disabled-color,
             var(--spectrum-accordion-item-header-disabled-color)
         );
-        background-color: #0000;
+        background-color: initial;
     }
 }
 

packages/accordion/src/spectrum-accordion.css

@@ -135,14 +135,14 @@ governing permissions and limitations under the License.
     );
 }
 
-:host([dir='rtl']),
-:host:dir(rtl) {
+:host:dir(rtl),
+:host([dir='rtl']) {
     --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
 }
 
 :host:lang(ja),
-:host:lang(zh),
-:host:lang(ko) {
+:host:lang(ko),
+:host:lang(zh) {
     --spectrum-accordion-item-header-line-height: var(
         --spectrum-cjk-line-height-100
     );

packages/action-bar/package.json

@@ -64,7 +64,7 @@
         "@spectrum-web-components/popover": "^0.42.3"
     },
     "devDependencies": {
-        "@spectrum-css/actionbar": "^7.2.4"
+        "@spectrum-css/actionbar": "^8.1.0"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",

packages/action-bar/src/ActionBar.ts

@@ -23,13 +23,14 @@ import '@spectrum-web-components/button/sp-close-button.js';
 import '@spectrum-web-components/field-label/sp-field-label.js';
 import actionBarStyles from './action-bar.css.js';
 import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
+import { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared/src/focus-visible.js';
 export const actionBarVariants = ['sticky', 'fixed'];
 
 /**
  * @element sp-action-bar
  * @slot - Content to display with the Action Bar
  */
-export class ActionBar extends SpectrumElement {
+export class ActionBar extends FocusVisiblePolyfillMixin(SpectrumElement) {
     public static override get styles(): CSSResultArray {
         return [actionBarStyles];
     }

packages/action-bar/src/spectrum-action-bar.css

@@ -22,17 +22,6 @@ governing permissions and limitations under the License.
     --spectrum-actionbar-item-counter-color: var(
         --spectrum-neutral-content-color-default
     );
-}
-
-:host:lang(ja),
-:host:lang(zh),
-:host:lang(ko) {
-    --spectrum-actionbar-item-counter-line-height-cjk: var(
-        --spectrum-cjk-line-height-100
-    );
-}
-
-:host {
     --spectrum-actionbar-popover-background-color: var(--spectrum-gray-50);
     --spectrum-actionbar-popover-border-color: var(--spectrum-gray-400);
     --spectrum-actionbar-emphasized-background-color: var(
@@ -57,6 +46,14 @@ governing permissions and limitations under the License.
     --spectrum-actionbar-shadow-color: var(--spectrum-drop-shadow-color);
 }
 
+:host:lang(ja),
+:host:lang(ko),
+:host:lang(zh) {
+    --spectrum-actionbar-item-counter-line-height-cjk: var(
+        --spectrum-cjk-line-height-100
+    );
+}
+
 @media (forced-colors: active) {
     :host,
     :host([emphasized]) #popover {
@@ -174,8 +171,8 @@ governing permissions and limitations under the License.
 }
 
 .field-label:lang(ja),
-.field-label:lang(zh),
-.field-label:lang(ko) {
+.field-label:lang(ko),
+.field-label:lang(zh) {
     line-height: var(
         --mod-actionbar-item-counter-line-height-cjk,
         var(--spectrum-actionbar-item-counter-line-height-cjk)

packages/action-button/package.json

@@ -64,7 +64,7 @@
         "@spectrum-web-components/shared": "^0.42.3"
     },
     "devDependencies": {
-        "@spectrum-css/actionbutton": "^5.2.6"
+        "@spectrum-css/actionbutton": "^6.1.0"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",

packages/action-button/src/spectrum-action-button.css

@@ -74,9 +74,9 @@ governing permissions and limitations under the License.
     justify-content: center;
     align-items: center;
     margin: 0;
+    -webkit-text-decoration: none;
     text-decoration: none;
     display: inline-flex;
-    position: relative;
     overflow: visible;
 }
 
@@ -136,8 +136,8 @@ governing permissions and limitations under the License.
     );
 }
 
-:host([dir='rtl']),
-:host:dir(rtl) {
+:host:dir(rtl),
+:host([dir='rtl']) {
     --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
 }
 
@@ -342,14 +342,14 @@ governing permissions and limitations under the License.
 }
 
 @media (forced-colors: active) {
-    :host:after {
-        forced-color-adjust: none;
-    }
-
     :host {
         --highcontrast-actionbutton-focus-indicator-color: ButtonText;
     }
 
+    :host:after {
+        forced-color-adjust: none;
+    }
+
     :host([selected]) {
         --highcontrast-actionbutton-background-color-default: Highlight;
         --highcontrast-actionbutton-background-color-hover: Highlight;
@@ -368,8 +368,8 @@ governing permissions and limitations under the License.
         --highcontrast-actionbutton-content-color-disabled: GrayText;
     }
 
-    :host([selected]) ::slotted([slot='icon']),
     :host([selected]) .hold-affordance,
+    :host([selected]) ::slotted([slot='icon']),
     :host([selected]) #label {
         forced-color-adjust: none;
     }

packages/action-group/package.json

@@ -64,7 +64,7 @@
         "@spectrum-web-components/reactive-controllers": "^0.42.3"
     },
     "devDependencies": {
-        "@spectrum-css/actiongroup": "^4.2.5"
+        "@spectrum-css/actiongroup": "^5.1.0"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",