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

.github/workflows/02-e2e-screen-reader.yml

@@ -19,8 +19,8 @@ jobs:
       fail-fast: false
       matrix:
         os: [macos-13, windows-2022]
-        shardIndex: [1, 2]
-        shardTotal: [2]
+        shardIndex: [1, 2, 3, 4]
+        shardTotal: [4]
     steps:
       - name: ⏬ Checkout repo
         uses: actions/checkout@v4

.husky/pre-commit

@@ -1,6 +1,6 @@
 validate-branch-name
 node scripts/check-commit-mail.js
 lint-staged --config .config/.lintstagedrc.js
-prettier $(git diff --cached --name-only --diff-filter=ACMR | sed 's| |\\ |g') --write --ignore-unknown
+prettier $(git diff --cached --name-only --diff-filter=ACMR | sed 's|( |&)|\\ |g') --write --ignore-unknown
 git update-index --again
 npm run lint:jscpd

README.md

@@ -21,6 +21,11 @@ designers, and content authors build, maintain, and scale best of class digital
 	<figcaption><a href="https://bradfrost.com/blog/post/bdconf-stephen-hay-presents-responsive-design-workflow/" target="_blank" rel="noopener noreferrer">Stephen Hay</a>. <a href="https://vimeo.com/67476280" title="Brad Frosts at beyond tellerrand conference regarding Atomic Design" target="_blank" rel="noopener noreferrer">Cited in a talk by Brad Frost at beyond tellerrand conference.</a></figcaption>
 </figure>
 
+> [!WARNING]
+> We currently don't fully support Samsung Internet browser until it adds the following functionality with its new version 27, which is expected to get released later this year:
+>
+> -   [CSS: `light-dark()`](https://caniuse.com/mdn-css_types_color_light-dark)
+
 ## Packages
 
 | Package                                                                     | Content                             | Version                                                                                                                                                                                                                                                                                  |

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

@@ -22,7 +22,7 @@
 Starting with `packages/components/src/components/my-awesome-component/my-awesome-component.scss` there are something you should know:
 
 1. The most important dependency are the `variables` included via `@use "@db-ui/foundations/build/scss/variables";`. They enable you to use e.g. `$db-spacing-fixed-md` for paddings, margins etc.
-2. A lot of times you have to force another `font-size` / `line-height`, you can do it with `@use "@db-ui/foundations/build/scss/tonality/font;` and the corresponding placeholder extend: `@extend %db-overwrite-font-size-sm;`.
+2. A lot of times you have to force another `font-size` / `line-height`, you can do it with `@use "@db-ui/foundations/build/scss/density/font;` and the corresponding placeholder extend: `@extend %db-overwrite-font-size-sm;`.
 3. Some components have an 'adaptive' styling. We exclude it in an own file `@use "@db-ui/components/build/scss/styles/component";` so you might use this dependency. As a reference look at another component e.g. [`packages/components/src/components/button/button.scss`](../packages/components/src/components/button/button.scss).
 4. If you have to set a specific color (informational, warning, etc.) directly you can use `@use "@db-ui/foundations/build/scss/colors";`. You can take a look at the `notification` component for an example `packages/components/src/components/notification/notification.scss` you might use the `@each` to reduce the amount of code for color-variants.
 5. To set a fixed icon you might use `@use "@db-ui/foundations/build/scss/icon/icons.helpers" as icons;` as dependency and e.g. `@include icons.icon("arrow_forward"), "after");`. For a dynamic icon you could prefer integrating it in HTML code with the `data-icon` attribute.

e2e/package.json

@@ -23,14 +23,14 @@
     "test:vue-showcase": "npm run test:e2e --workspace=vue-showcase"
   },
   "devDependencies": {
-    "@playwright/test": "1.46.1",
+    "@playwright/test": "1.47.0",
     "cpr": "3.0.1",
     "cross-env": "^7.0.3",
     "dotenv": "^16.0.3",
     "fs-extra": "^11.1.0",
     "http-server": "14.1.1",
     "npm-run-all": "4.1.5",
-    "tslib": "^2.6.3",
+    "tslib": "^2.7.0",
     "typescript": "^5.3.3"
   }
 }

output/angular/package.json

@@ -16,7 +16,7 @@
     "start": "ng serve"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "17.3.8",
+    "@angular-devkit/build-angular": "17.3.9",
     "@angular/common": "17.3.12",
     "ng-packagr": "17.3.0",
     "typescript": "^5.4.5"

output/react/package.json

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

output/vue/package.json

@@ -38,16 +38,16 @@
     "test:components": "playwright test -c playwright.config.ts"
   },
   "dependencies": {
-    "vue": "^3.4.38"
+    "vue": "^3.5.4"
   },
   "devDependencies": {
-    "@playwright/experimental-ct-vue": "1.46.1",
-    "@vitejs/plugin-vue": "^5.1.2",
+    "@playwright/experimental-ct-vue": "1.47.0",
+    "@vitejs/plugin-vue": "^5.1.3",
     "replace-in-file": "^8.1.0",
-    "tsx": "^4.17.0",
+    "tsx": "^4.19.1",
     "typescript": "^5.4.5",
-    "vite": "^5.4.2",
-    "vue-tsc": "^2.0.29"
+    "vite": "^5.4.4",
+    "vue-tsc": "^2.1.6"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",

output/vue/scripts/fix-any-types.ts

@@ -17,16 +17,22 @@ const replaceAnyTypes = (input: string, component: string) => {
 	const propModel = `DB${transformToUpperComponentName(component)}Props`;
 	let fileContent = input;
 
-	const propLines = fileContent.match(/readonly (.*);/g);
-	for (const propLine of propLines) {
-		const prop = propLine
-			.replace('readonly ', '')
-			.replace('?: any;', '')
-			.replace(': any;', '');
-		fileContent = fileContent.replace(
-			propLine,
-			propLine.replace('any', `${propModel}["${prop}"]`)
-		);
+	const readOnlyLines = fileContent.match(/Readonly<{[\s\S]*?}>/g);
+	for (const roLine of readOnlyLines) {
+		const propLines = roLine.match(/(.*);/g);
+		if (propLines) {
+			propLines.forEach((propLine) => {
+				const prop = propLine
+					.replace('?: any;', '')
+					.replace(': any;', '')
+					.trim();
+				// @ts-ignore
+				fileContent = fileContent.replaceAll(
+					propLine,
+					propLine.replace('any', `${propModel}["${prop}"]`)
+				);
+			});
+		}
 	}
 
 	return `import { ${propModel} } from "./model";\n\n${fileContent}`;