Merge branch 'main' into Issue-3313-ColorArea-a11y

adobe · Jul 10, 2023 · 4722cb8 · 4722cb8
2 parents 4c952d3 + d798795
commit 4722cb8
Show file tree

Hide file tree

Showing 253 changed files with 5,286 additions and 2,773 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -10,7 +10,7 @@ executors:
 parameters:
     current_golden_images_hash:
         type: string
-        default: c76f182824b0e89ad6f5b0205310b1c5eaee54f5
+        default: 2f06eaa56e1938ea37a5c753193074e1baead124
     wireit_cache_name:
         type: string
         default: wireit

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -11,5 +11,6 @@
         "tools/**/*.dev.js": { "when": "$(basename).js" },
         "tools/**/*.d.ts": { "when": "$(basename).ts" },
         "**/*.test-vrt.ts": true
-    }
+    },
+    "typescript.tsdk": "node_modules/typescript/lib"
 }
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,21 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.33.2](https://github.com/adobe/spectrum-web-components/compare/v0.33.1...v0.33.2) (2023-06-14)
+
+**Note:** Version bump only for package @adobe/spectrum-web-components
+
+## [0.33.1](https://github.com/adobe/spectrum-web-components/compare/v0.33.0...v0.33.1) (2023-06-14)
+
+### Bug Fixes
+
+-   **color-slider:** use inset-block-_ and inset-inline-_ and fix RTL orientation and behavior [#3301](https://github.com/adobe/spectrum-web-components/issues/3301) ([52aa328](https://github.com/adobe/spectrum-web-components/commit/52aa328ea7e4c2e40c7688ce9daa233cc9936be0))
+-   **menu:** [#3164](https://github.com/adobe/spectrum-web-components/issues/3164) plug memory leak with gobal events ([ff589d4](https://github.com/adobe/spectrum-web-components/commit/ff589d4ec86f8dcda15c386907d27c7b3cc8c325))
+
+### Reverts
+
+-   Revert "chore: bump @playwright/test from 1.30.0 to 1.35.0" ([0fa99a7](https://github.com/adobe/spectrum-web-components/commit/0fa99a79c04635adb682a54cfbdd3fc1bc05b9fd))
+
 # [0.33.0](https://github.com/adobe/spectrum-web-components/compare/v0.32.0...v0.33.0) (2023-06-08)
 
 ### Bug Fixes

diff --git a/README.md b/README.md
@@ -125,9 +125,18 @@ To create a local baseline for comparing your changes to later in the developmen
 yarn test:visual:clean # start with a clean slate
 # yarn test:visual:clean:baseline # removes only baseline images
 # yarn test:visual:clean:current # removes only images updated in the most recent test pass
-yarn test:visual vrt-light-medium-ltr # vrt-${color}-${scale}-${direction} to access all theme options
-# ...
-yarn test:visual vrt-light-medium-ltr # repeat the same as above for a clean comparison
+
+# To enable comparison, it is generally recommended to generate baselines on the main branch.
+yarn test:visual vrt-${component name} --update-visual-baseline
+eg: yarn test:visual vrt-accordion --update-visual-baseline
+
+# Running the tests on the local branch
+yarn test:visual vrt-${component name}
+eg: yarn test:visual vrt-accordion
+
+# Running the tests of light medium ltr
+yarn test:visual vrt-${component name}-single
+eg: yarn test:visual vrt-accordion-single
 ```
 
 #### Screenshot coverage

diff --git a/lerna.json b/lerna.json
@@ -1,6 +1,6 @@
 {
     "packages": ["packages/*", "projects/*", "tools/*"],
-    "version": "0.33.0",
+    "version": "0.33.2",
     "granularPathspec": false,
     "npmClient": "yarn",
     "useWorkspaces": true,

diff --git a/package.json b/package.json
@@ -100,7 +100,7 @@
         "@netlify/build": "^29.1.0",
         "@open-wc/dev-server-hmr": "^0.1.3",
         "@open-wc/testing": "^3.1.7",
-        "@rollup/plugin-commonjs": "^24.0.1",
+        "@rollup/plugin-commonjs": "^25.0.2",
         "@rollup/plugin-json": "^6.0.0",
         "@rollup/plugin-node-resolve": "^15.0.1",
         "@sindresorhus/slugify": "^2.1.1",
@@ -130,13 +130,13 @@
         "alex": "^10.0.0",
         "cem-plugin-module-file-extensions": "^0.0.5",
         "chalk": "^5.0.1",
-        "chromedriver": "^112.0.1",
+        "chromedriver": "^114.0.2",
         "common-tags": "^1.8.2",
         "cssnano": "^5.0.15",
         "custom-elements-manifest": "^2.0.0",
         "debounce": "^1.2.1",
         "deepmerge": "^4.2.2",
-        "esbuild": "^0.17.3",
+        "esbuild": "^0.17.19",
         "eslint": "^8.23.0",
         "eslint-config-prettier": "^8.5.0",
         "eslint-formatter-pretty": "^5.0.0",
@@ -149,6 +149,7 @@
         "fs-extra": "^10.0.0",
         "geckodriver": "4.0.3",
         "gh-pages": "^4.0.0",
+        "glob": "^10.3.0",
         "gunzip-maybe": "^1.4.2",
         "husky": "^8.0.1",
         "latest-version": "^7.0.0",
@@ -164,7 +165,7 @@
         "patch-package": "^6.4.7",
         "playwright": "1.30.0",
         "postcss": "^8.4.14",
-        "postcss-custom-properties": "^12.1.11",
+        "postcss-custom-properties": "^13.2.0",
         "postcss-focus-visible": "^7.1.0",
         "postcss-import": "^15.1.0",
         "postcss-mixins": "^9.0.4",

diff --git a/packages/accordion/CHANGELOG.md b/packages/accordion/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.33.2](https://github.com/adobe/spectrum-web-components/compare/v0.33.1...v0.33.2) (2023-06-14)
+
+**Note:** Version bump only for package @spectrum-web-components/accordion
+
 # [0.33.0](https://github.com/adobe/spectrum-web-components/compare/v0.32.0...v0.33.0) (2023-06-08)
 
 ### Bug Fixes

diff --git a/packages/accordion/README.md b/packages/accordion/README.md
@@ -74,3 +74,274 @@ import { Accordion, AccordionItem } from '@spectrum-web-components/accordion';
     </sp-accordion-item>
 </sp-accordion>
 ```
+
+## Sizes
+
+<sp-tabs selected="m" auto label="Size Attribute Options">
+<sp-tab value="s">Small</sp-tab>
+<sp-tab-panel value="s">
+
+```html
+<sp-accordion size="s">
+    <sp-accordion-item label="Heading 1">
+        <div>Item 1</div>
+    </sp-accordion-item>
+    <sp-accordion-item disabled label="Heading 2">
+        <div>Item 2</div>
+    </sp-accordion-item>
+    <sp-accordion-item label="Heading 3">
+        <div>Item 3</div>
+    </sp-accordion-item>
+    <sp-accordion-item label="Heading 4">
+        <div>Item 4</div>
+    </sp-accordion-item>
+</sp-accordion>
+```
+
+</sp-tab-panel>
+<sp-tab value="m">Medium</sp-tab>
+<sp-tab-panel value="m">
+
+```html
+<sp-accordion size="m">
+    <sp-accordion-item label="Heading 1">
+        <div>Item 1</div>
+    </sp-accordion-item>
+    <sp-accordion-item disabled label="Heading 2">
+        <div>Item 2</div>
+    </sp-accordion-item>
+    <sp-accordion-item label="Heading 3">
+        <div>Item 3</div>
+    </sp-accordion-item>
+    <sp-accordion-item label="Heading 4">
+        <div>Item 4</div>
+    </sp-accordion-item>
+</sp-accordion>
+```
+
+</sp-tab-panel>
+<sp-tab value="l">Large</sp-tab>
+<sp-tab-panel value="l">
+
+```html
+<sp-accordion size="l">
+    <sp-accordion-item label="Heading 1">
+        <div>Item 1</div>
+    </sp-accordion-item>
+    <sp-accordion-item disabled label="Heading 2">
+        <div>Item 2</div>
+    </sp-accordion-item>
+    <sp-accordion-item label="Heading 3">
+        <div>Item 3</div>
+    </sp-accordion-item>
+    <sp-accordion-item label="Heading 4">
+        <div>Item 4</div>
+    </sp-accordion-item>
+</sp-accordion>
+```
+
+</sp-tab-panel>
+<sp-tab value="xl">Extra Large</sp-tab>
+<sp-tab-panel value="xl">
+
+```html
+<sp-accordion size="xl">
+    <sp-accordion-item label="Heading 1">
+        <div>Item 1</div>
+    </sp-accordion-item>
+    <sp-accordion-item disabled label="Heading 2">
+        <div>Item 2</div>
+    </sp-accordion-item>
+    <sp-accordion-item label="Heading 3">
+        <div>Item 3</div>
+    </sp-accordion-item>
+    <sp-accordion-item label="Heading 4">
+        <div>Item 4</div>
+    </sp-accordion-item>
+</sp-accordion>
+```
+
+</sp-tab-panel>
+</sp-tabs>
+
+## Density
+
+The `density` property, when applied, accepts the values of `compact` or `spacious`.
+
+### Compact
+
+<sp-tabs selected="m" auto label="Size Attribute Options">
+<sp-tab value="s">Small</sp-tab>
+<sp-tab-panel value="s">
+
+```html
+<sp-accordion density="compact" size="s">
+    <sp-accordion-item label="Heading 1">
+        <div>Item 1</div>
+    </sp-accordion-item>
+    <sp-accordion-item disabled label="Heading 2">
+        <div>Item 2</div>
+    </sp-accordion-item>
+    <sp-accordion-item label="Heading 3">
+        <div>Item 3</div>
+    </sp-accordion-item>
+    <sp-accordion-item label="Heading 4">
+        <div>Item 4</div>
+    </sp-accordion-item>
+</sp-accordion>
+```
+
+</sp-tab-panel>
+<sp-tab value="m">Medium</sp-tab>
+<sp-tab-panel value="m">
+
+```html
+<sp-accordion density="compact" size="m">
+    <sp-accordion-item label="Heading 1">
+        <div>Item 1</div>
+    </sp-accordion-item>
+    <sp-accordion-item disabled label="Heading 2">
+        <div>Item 2</div>
+    </sp-accordion-item>
+    <sp-accordion-item label="Heading 3">
+        <div>Item 3</div>
+    </sp-accordion-item>
+    <sp-accordion-item label="Heading 4">
+        <div>Item 4</div>
+    </sp-accordion-item>
+</sp-accordion>
+```
+
+</sp-tab-panel>
+<sp-tab value="l">Large</sp-tab>
+<sp-tab-panel value="l">
+
+```html
+<sp-accordion density="compact" size="l">
+    <sp-accordion-item label="Heading 1">
+        <div>Item 1</div>
+    </sp-accordion-item>
+    <sp-accordion-item disabled label="Heading 2">
+        <div>Item 2</div>
+    </sp-accordion-item>
+    <sp-accordion-item label="Heading 3">
+        <div>Item 3</div>
+    </sp-accordion-item>
+    <sp-accordion-item label="Heading 4">
+        <div>Item 4</div>
+    </sp-accordion-item>
+</sp-accordion>
+```
+
+</sp-tab-panel>
+<sp-tab value="xl">Extra Large</sp-tab>
+<sp-tab-panel value="xl">
+
+```html
+<sp-accordion density="compact" size="xl">
+    <sp-accordion-item label="Heading 1">
+        <div>Item 1</div>
+    </sp-accordion-item>
+    <sp-accordion-item disabled label="Heading 2">
+        <div>Item 2</div>
+    </sp-accordion-item>
+    <sp-accordion-item label="Heading 3">
+        <div>Item 3</div>
+    </sp-accordion-item>
+    <sp-accordion-item label="Heading 4">
+        <div>Item 4</div>
+    </sp-accordion-item>
+</sp-accordion>
+```
+
+</sp-tab-panel>
+</sp-tabs>
+
+### Spacious
+
+<sp-tabs selected="m" auto label="Size Attribute Options">
+<sp-tab value="s">Small</sp-tab>
+<sp-tab-panel value="s">
+
+```html
+<sp-accordion density="spacious" size="s">
+    <sp-accordion-item label="Heading 1">
+        <div>Item 1</div>
+    </sp-accordion-item>
+    <sp-accordion-item disabled label="Heading 2">
+        <div>Item 2</div>
+    </sp-accordion-item>
+    <sp-accordion-item label="Heading 3">
+        <div>Item 3</div>
+    </sp-accordion-item>
+    <sp-accordion-item label="Heading 4">
+        <div>Item 4</div>
+    </sp-accordion-item>
+</sp-accordion>
+```
+
+</sp-tab-panel>
+<sp-tab value="m">Medium</sp-tab>
+<sp-tab-panel value="m">
+
+```html
+<sp-accordion density="spacious" size="m">
+    <sp-accordion-item label="Heading 1">
+        <div>Item 1</div>
+    </sp-accordion-item>
+    <sp-accordion-item disabled label="Heading 2">
+        <div>Item 2</div>
+    </sp-accordion-item>
+    <sp-accordion-item label="Heading 3">
+        <div>Item 3</div>
+    </sp-accordion-item>
+    <sp-accordion-item label="Heading 4">
+        <div>Item 4</div>
+    </sp-accordion-item>
+</sp-accordion>
+```
+
+</sp-tab-panel>
+<sp-tab value="l">Large</sp-tab>
+<sp-tab-panel value="l">
+
+```html
+<sp-accordion density="spacious" size="l">
+    <sp-accordion-item label="Heading 1">
+        <div>Item 1</div>
+    </sp-accordion-item>
+    <sp-accordion-item disabled label="Heading 2">
+        <div>Item 2</div>
+    </sp-accordion-item>
+    <sp-accordion-item label="Heading 3">
+        <div>Item 3</div>
+    </sp-accordion-item>
+    <sp-accordion-item label="Heading 4">
+        <div>Item 4</div>
+    </sp-accordion-item>
+</sp-accordion>
+```
+
+</sp-tab-panel>
+<sp-tab value="xl">Extra Large</sp-tab>
+<sp-tab-panel value="xl">
+
+```html
+<sp-accordion density="spacious" size="xl">
+    <sp-accordion-item label="Heading 1">
+        <div>Item 1</div>
+    </sp-accordion-item>
+    <sp-accordion-item disabled label="Heading 2">
+        <div>Item 2</div>
+    </sp-accordion-item>
+    <sp-accordion-item label="Heading 3">
+        <div>Item 3</div>
+    </sp-accordion-item>
+    <sp-accordion-item label="Heading 4">
+        <div>Item 4</div>
+    </sp-accordion-item>
+</sp-accordion>
+```
+
+</sp-tab-panel>
+</sp-tabs>