Merge branch 'main' into 2967-slow-performance-css-selectors

README.md

@@ -87,9 +87,17 @@ that we're gaining out of the community. So please support us in any way possibl
 
 ## Migration
 
-Check our migration docs for breaking changes
+### From DB UI Core or DB UI Elements to DB UI Mono
 
-1. [Alpha ➡ Beta](https://github.com/db-ui/mono/tree/main/docs) (0.0.x➡0.x.x)
+We're providing a detailed migration for each component next to the documentation of each component:
+<https://db-ui.github.io/mono/review/main/components/action/button/migration>
+
+### In between DB UI Mono versions
+
+Check our migration docs for breaking changes:
+
+1. [Alpha ➡ Beta](https://github.com/db-ui/mono/tree/main/docs/migration/alpha-beta.md) (0.0.x➡0.x.x)
+2. [v0.2 ➡ v0.3](https://github.com/db-ui/mono/tree/main/docs/migration/v0.2.x-to-v0.3.x.md)
 
 ## How to start develop / contribute
 

docs/how-to-develop-a-component.md

@@ -118,7 +118,7 @@ We have multiple tests you should update:
 
 To run all tests/update the screenshots you need `Docker`. More information here: `e2e/README.md`.
 
-## Manually Accessibility Review
+## Manual audit conducted by accessibility experts
 
 After creating a component and writing all test, we need some manually third party accessibility review to prove that the component is stable. This process is internal and will be handled by a team specialized in accessibility testing.
 During this process you should track the progress of this manual test inside `showcases/shared/_accessibility-review.json`.

docs/research/multi-select.md

@@ -0,0 +1,30 @@
+# DEV Research multi-select
+
+## Overview
+
+| Design System                                                                           |                                                                Component                                                                | Comment                                                                                                                                                                  |
+| --------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------: | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| [Atlassian Design System](https://bitbucket.org/atlassian/atlaskit/src/master/)         |                            [multi-select](https://atlassian.design/components/select/examples#multi-select)                             | tags with divs + `input` (no filter) with `aria-autocomplete="list"` `aria-expanded="false"` `aria-haspopup="true"` `role="combobox"` + creates dropdown in dom on click |
+| [Bootstrap](https://github.com/twbs/bootstrap)                                          |                                                                   ❌                                                                    | --                                                                                                                                                                       |
+| [GitHub Primer](https://github.com/primer/css)                                          |                                 [selectpanel](https://primer.style/components/selectpanel/react/alpha)                                  | tags inside button as `span` + button with `aria-expanded="false"` + extra container with filter input and checkbox group                                                |
+| [GitLab Pajamas](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com)       |                               [dropdown-combobox](https://design.gitlab.com/components/dropdown-combobox)                               | tags inside button as `span` + `button` with `aria-haspopup="listbox"` + extra container with filter input and list buttons                                              |
+| [HP Enterprise Grommet](https://github.com/grommet/grommet)                             |                                         [selectmultiple](https://v2.grommet.io/selectmultiple)                                          | tags inside input as `text` + input + extra container with filter input and checkbox group                                                                               |
+| [IBM Carbon](https://github.com/carbon-design-system/carbon)                            |                    [multi-select](https://react.carbondesignsystem.com/?path=/docs/components-multiselect--overview)                    | tags with remove button + `button` or `input` with `aria-haspopup="listbox"` + extra container checkbox group                                                            |
+| [Material UI](https://github.com/mui/material-ui)                                       |                                       [Combobox](https://mui.com/material-ui/react-autocomplete/)                                       | tags with remove button + `input` with `aria-expanded` &`role=combobox` + extra container list buttons                                                                   |
+| [MongoDB.design](https://github.com/mongodb/design)                                     |                                 [combobox](https://www.mongodb.design/component/combobox/live-example)                                  | tags with remove button (tabable) + `input` with `aria-expanded` &`role=combobox` + extra container checkbox group                                                       |
+| [Porsche Design System](https://github.com/porsche-design-system/porsche-design-system) |                          [multi-select](https://designsystem.porsche.com/v3/components/multi-select/examples)                           | tags inside input as `text` + input with filter + extra container and checkbox group                                                                                     |
+| [SBB Lyne](https://github.com/lyne-design-system/lyne-components)                       |                   [multi-select](https://lyne-storybook.app.sbb.ch/?path=/story/elements-sbb-select--multiple-select)                   | only divs + extra container and checkbox group                                                                                                                           |
+| [Shopify Polaris](https://github.com/Shopify/polaris)                                   | [combobox](https://polaris.shopify.com/components/selection-and-input/combobox?example=combobox-with-multi-select-and-vertical-content) | ags with remove button (tabable) + `input` with `aria-expanded` &`role=combobox` + extra container checkbox group                                                        |
+| [SNCF Design System](https://gitlab.com/SNCF/wcs)                                       |                       [multi-select](https://designmetier-bootstrap.sncf.fr/docs/4.3/components/select/#multiple)                       | sr-only `select` + extra container with list buttons                                                                                                                     |
+| [Telefonica Mistica](https://github.com/Telefonica/mistica-web)                         |                                                                   ❌                                                                    | --                                                                                                                                                                       |
+| [Telekom Scale](https://github.com/telekom/scale)                                       |                                                                   ❌                                                                    | --                                                                                                                                                                       |
+| [Washington Post Design System](https://build.washingtonpost.com/)                      |                                                                   ❌                                                                    | --                                                                                                                                                                       |
+
+## Conclusion
+
+-   Often named [Combobox](https://component.gallery/components/combobox/) or Autocomplete or Autosuggest
+-   [combobox_role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/combobox_role)
+-   [combobox example w3](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/)
+
+We should work with the button + checkbox approach. Maybe we can replace `button` with `details` + `summary`. Furthermore, out filtering (search inout) will be inside the dropdown/menu (see design). We may use `DBSelectOptionType` for the checkboxes to reflect groups etc.
+Tags should be our `DBTag` with close function or a `span` based on the props we should change it like this variant="tags|overflow|amount".

docs/scripts/component-research/design-systems.js

@@ -3,27 +3,6 @@
  * @type {[{ name: string, componentUrl: string, url: string}]}
  */
 export const designSystems = [
-	{
-		name: 'W3C APG Patterns',
-		url: 'https://www.w3.org/WAI/ARIA/apg/',
-		componentUrl: 'https://www.w3.org/WAI/ARIA/apg/patterns/'
-	},
-	{
-		name: 'Inclusive components by Heydon Pickering',
-		url: 'https://inclusive-components.design/',
-		componentUrl: 'https://inclusive-components.design/#components'
-	},
-	{
-		name: 'Barrierefreie Gestaltung von User Interface-Elementen',
-		url: 'https://handreichungen.bfit-bund.de/barrierefreie-uie/',
-		componentUrl:
-			'https://handreichungen.bfit-bund.de/barrierefreie-uie/0.4/zusammengesetzte_bedienelemente.html'
-	},
-	{
-		name: 'Open UI',
-		url: 'https://open-ui.org/',
-		componentUrl: 'https://open-ui.org/'
-	},
 	{
 		name: 'Telekom Scale',
 		url: 'https://github.com/telekom/scale',
@@ -62,11 +41,6 @@ export const designSystems = [
 		url: 'https://build.washingtonpost.com/',
 		componentUrl: 'https://build.washingtonpost.com/components/accordion'
 	},
-	{
-		name: 'GOV.UK Design System',
-		url: 'https://design-system.service.gov.uk/',
-		componentUrl: 'https://design-system.service.gov.uk/components/'
-	},
 	{
 		name: 'HP Enterprise Grommet',
 		url: 'https://github.com/grommet/grommet',
@@ -103,17 +77,6 @@ export const designSystems = [
 		componentUrl:
 			'https://brandfactory.telefonica.com/d/iSp7b1DkYygv/n-a#/components/overview'
 	},
-	{
-		name: 'Audi Design System',
-		url: 'https://www.audi.com/ci/en/guides/user-interface.html',
-		componentUrl:
-			'https://www.audi.com/ci/en/guides/user-interface/components.html'
-	},
-	{
-		name: 'DHL Design System',
-		url: 'https://www.dpdhl-brands.com/en/dhl/buttons',
-		componentUrl: 'https://www.dpdhl-brands.com/en/dhl/buttons'
-	},
 	{
 		name: 'Bootstrap',
 		url: 'https://github.com/twbs/bootstrap',

e2e/package.json

@@ -23,7 +23,7 @@
     "test:vue-showcase": "npm run test:e2e --workspace=vue-showcase"
   },
   "devDependencies": {
-    "@playwright/test": "1.46.0",
+    "@playwright/test": "1.46.1",
     "cpr": "3.0.1",
     "cross-env": "^7.0.3",
     "dotenv": "^16.0.3",

output/react/package.json

@@ -26,8 +26,8 @@
     "tsc": "tsc -p . --sourceMap false"
   },
   "devDependencies": {
-    "@playwright/experimental-ct-react": "1.46.0",
-    "@types/react": "^18.3.3",
+    "@playwright/experimental-ct-react": "1.46.1",
+    "@types/react": "^18.3.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

output/vue/package.json

@@ -38,15 +38,15 @@
     "test:components": "playwright test -c playwright.config.ts"
   },
   "dependencies": {
-    "vue": "^3.4.37"
+    "vue": "^3.4.38"
   },
   "devDependencies": {
-    "@playwright/experimental-ct-vue": "1.46.0",
+    "@playwright/experimental-ct-vue": "1.46.1",
     "@vitejs/plugin-vue": "^5.1.2",
     "replace-in-file": "^8.1.0",
     "tsx": "^4.17.0",
     "typescript": "^5.4.5",
-    "vite": "^5.4.0",
+    "vite": "^5.4.2",
     "vue-tsc": "^2.0.29"
   },
   "publishConfig": {