Merge branch 'main' into 3322-introduce-invoker-commands-instead-of-j…

…s-glue-code
db-ui · Nov 4, 2024 · 92cdf3e · 92cdf3e
2 parents d2e93b7 + 76df128
commit 92cdf3e
Show file tree

Hide file tree

Showing 289 changed files with 1,903 additions and 1,427 deletions.
diff --git a/.config/.jscpd.json b/.config/.jscpd.json
@@ -3,6 +3,7 @@
 	"reporters": ["console"],
 	"minTokens": 65,
 	"ignore": [
+		"**/.angular/**",
 		".history/**",
 		"**/__snapshots__/**",
 		"**/.github/**",

diff --git a/.eslintignore b/.eslintignore
@@ -10,4 +10,4 @@
 /showcases/nuxt-showcase/**
 build-outputs/
 build-showcases/
-/output/vue/scripts/fix-any-types.ts
+/output/**
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
@@ -79,3 +79,6 @@ updates:
         patterns:
           - "@inquirer/*"
           - "inquirer"
+      mdx-js:
+        patterns:
+          - "@mdx-js/*"
diff --git a/.github/scripts/build-gh-page.sh b/.github/scripts/build-gh-page.sh
@@ -15,8 +15,8 @@ echo "📦 Unpack Tar"
 tar -zxf gh-pages -C public --strip-components 1
 
 if [[ $RELEASE == "true" ]]; then
-	echo "🔃 Change redirect"
-	echo "<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>DB UX Design System Core – latest version</title></head><body style=\"margin: 0;\"><iframe src=\"https://"$OWNER_NAME".github.io/"$REPO_NAME"/version/"$NAME"\" style=\"border: 0;width: 100vw;height: 100vh;\"></iframe></body></html>" > public/index.html
+	echo "🔃 Create redirect"
+	echo "<meta http-equiv=\"refresh\" content=\"0; URL=https://"$OWNER_NAME".github.io/"$REPO_NAME"/version/latest\" />" > public/index.html
 fi
 
 echo "👣 Move out dir"
@@ -29,6 +29,15 @@ if [[ $PRE_RELEASE == "true" || $RELEASE == "true" ]]; then
 		echo "    Remove dir ./public/version/$NAME"
 		rm -rf ./public/version/"$NAME"
 	fi
+	if [[ $RELEASE == "true" ]]; then
+ 		if [[ -d ./public/version/latest ]]; then
+			echo "    Remove dir ./public/version/latest"
+			rm -rf ./public/version/latest
+		fi
+		mkdir ./public/version/latest
+		cp -RT ./out ./public/version/latest
+		echo "    Copied dir out to ./public/version/latest"
+	fi
 	mv ./out ./public/version/"$NAME"
 	echo "    Moved dir out to ./public/version/$NAME"
 else

diff --git a/.github/scripts/cleanup-gh-pages.js b/.github/scripts/cleanup-gh-pages.js
@@ -13,7 +13,8 @@ const removeOldFromPath = (isTag, data) => {
 	) {
 		const dirsToDelete = FS.readdirSync(path)
 			.filter((file) => !data.find((branch) => branch.name === file))
-			.filter((file) => file !== 'main');
+			// Let's not clean up specific folders
+			.filter((file) => !['main', 'latest'].includes(file));
 		if (dirsToDelete?.length > 0) {
 			console.log(
 				TAG,

diff --git a/.github/workflows/default.yml b/.github/workflows/default.yml
@@ -57,6 +57,12 @@ jobs:
     with:
       version: ${{ needs.get-playwright-version.outputs.version }}
 
+  build-showcase-stencil:
+    uses: ./.github/workflows/01-build-showcases.yml
+    needs: [build-packages]
+    with:
+      showcase: stencil-showcase
+
   build-showcase-angular:
     uses: ./.github/workflows/01-build-showcases.yml
     needs: [build-packages]
@@ -97,6 +103,13 @@ jobs:
     uses: ./.github/workflows/01-build-patternhub.yml
     needs: [build-packages]
 
+  test-showcase-stencil:
+    uses: ./.github/workflows/02-e2e-showcases.yml
+    needs: [build-showcase-stencil, get-playwright-version]
+    with:
+      version: ${{ needs.get-playwright-version.outputs.version }}
+      showcase: stencil-showcase
+
   test-showcase-angular:
     uses: ./.github/workflows/02-e2e-showcases.yml
     needs: [build-showcase-angular, get-playwright-version]
@@ -175,6 +188,7 @@ jobs:
     steps:
       - name: 🎉 Checks done
         run: |
+          resultBuildShowcaseStencil="${{ needs.build-showcase-stencil.result }}"
           resultBuildShowcaseAngular="${{ needs.build-showcase-angular.result }}"
           resultBuildShowcaseAngularSSR="${{ needs.build-showcase-angular-ssr.result }}"
           resultBuildShowcaseReact="${{ needs.build-showcase-react.result }}"
@@ -185,19 +199,22 @@ jobs:
           resultBuildOutputs="${{ needs.build-outputs.result }}"
           resultTestPackages="${{ needs.test-components.result }}"
           resultTestFoundations="${{ needs.test-foundations.result }}"
+          resultTestShowcaseStencil="${{ needs.test-showcase-stencil.result }}"
           resultTestShowcaseAngular="${{ needs.test-showcase-angular.result }}"
           resultTestShowcaseReact="${{ needs.test-showcase-react.result }}"
           resultTestShowcaseVue="${{ needs.test-showcase-vue.result }}"
           resultTestShowcasePatternhub="${{ needs.test-showcase-patternhub.result }}"
-          resultTestScreenReaders="${{ needs.test-screen-reader.result }}"
+          resultTestScreenReader="${{ needs.test-screen-reader.result }}"
           if [[ $resultTestFoundations == "success" ]] && \
-             [[ $resultTestScreenReaders == "success" ]] && \
+             [[ $resultTestScreenReader == "success" ]] && \
+             [[ $resultTestShowcaseStencil == "success" ]] && \
              [[ $resultTestShowcaseAngular == "success" ]] && \
              [[ $resultTestShowcaseReact == "success" ]] && \
              [[ $resultTestShowcaseVue == "success" ]] && \
              [[ $resultTestShowcasePatternhub == "success" ]] && \
              [[ $resultTestPackages == "success" ]] && \
              [[ $resultBuildOutputs == "success" ]] && \
+             [[ $resultBuildShowcaseStencil == "success" ]] && \
              [[ $resultBuildShowcaseAngular == "success" ]] && \
              [[ $resultBuildShowcaseAngularSSR == "success" ]] && \
              [[ $resultBuildShowcaseReact == "success" ]] && \
@@ -213,6 +230,7 @@ jobs:
           fi
     needs:
       [
+        build-showcase-stencil,
         build-showcase-angular,
         build-showcase-angular-ssr,
         build-showcase-react,
@@ -222,6 +240,7 @@ jobs:
         build-showcase-patternhub,
         build-outputs,
         test-components,
+        test-showcase-stencil,
         test-showcase-angular,
         test-showcase-react,
         test-showcase-vue,

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -51,6 +51,12 @@ jobs:
     with:
       version: ${{ needs.get-playwright-version.outputs.version }}
 
+  build-showcase-stencil:
+    uses: ./.github/workflows/01-build-showcases.yml
+    needs: [build-packages]
+    with:
+      showcase: stencil-showcase
+
   build-showcase-angular:
     uses: ./.github/workflows/01-build-showcases.yml
     needs: [build-packages]
@@ -94,6 +100,13 @@ jobs:
       release: ${{ needs.get-publish-version.outputs.release }}
       preRelease: ${{ needs.get-publish-version.outputs.preRelease }}
 
+  test-showcase-stencil:
+    uses: ./.github/workflows/02-e2e-showcases.yml
+    needs: [build-showcase-stencil, get-playwright-version]
+    with:
+      version: ${{ needs.get-playwright-version.outputs.version }}
+      showcase: stencil-showcase
+
   test-showcase-angular:
     uses: ./.github/workflows/02-e2e-showcases.yml
     needs: [build-showcase-angular, get-playwright-version]
@@ -134,6 +147,7 @@ jobs:
     steps:
       - name: 🎉 Checks done
         run: |
+          resultBuildShowcaseStencil="${{ needs.build-showcase-stencil.result }}"
           resultBuildShowcaseAngular="${{ needs.build-showcase-angular.result }}"
           resultBuildShowcaseAngularSSR="${{ needs.build-showcase-angular-ssr.result }}"
           resultBuildShowcaseReact="${{ needs.build-showcase-react.result }}"
@@ -144,19 +158,22 @@ jobs:
           resultBuildOutputs="${{ needs.build-outputs.result }}"
           resultTestPackages="${{ needs.test-components.result }}"
           resultTestFoundations="${{ needs.test-foundations.result }}"
+          resultTestShowcaseStencil="${{ needs.test-showcase-stencil.result }}"
           resultTestShowcaseAngular="${{ needs.test-showcase-angular.result }}"
           resultTestShowcaseReact="${{ needs.test-showcase-react.result }}"
           resultTestShowcaseVue="${{ needs.test-showcase-vue.result }}"
           resultTestShowcasePatternhub="${{ needs.test-showcase-patternhub.result }}"
           resultTestScreenReader="${{ needs.test-screen-reader.result }}"
           if [[ $resultTestFoundations == "success" ]] && \
              [[ $resultTestScreenReader == "success" ]] && \
+             [[ $resultTestShowcaseStencil == "success" ]] && \
              [[ $resultTestShowcaseAngular == "success" ]] && \
              [[ $resultTestShowcaseReact == "success" ]] && \
              [[ $resultTestShowcaseVue == "success" ]] && \
              [[ $resultTestShowcasePatternhub == "success" ]] && \
              [[ $resultTestPackages == "success" ]] && \
              [[ $resultBuildOutputs == "success" ]] && \
+             [[ $resultBuildShowcaseStencil == "success" ]] && \
              [[ $resultBuildShowcaseAngular == "success" ]] && \
              [[ $resultBuildShowcaseAngularSSR == "success" ]] && \
              [[ $resultBuildShowcaseReact == "success" ]] && \
@@ -172,6 +189,7 @@ jobs:
           fi
     needs:
       [
+        build-showcase-stencil,
         build-showcase-angular,
         build-showcase-angular-ssr,
         build-showcase-react,
@@ -181,6 +199,7 @@ jobs:
         build-showcase-patternhub,
         build-outputs,
         test-components,
+        test-showcase-stencil,
         test-showcase-angular,
         test-showcase-react,
         test-showcase-vue,

diff --git a/.gitignore b/.gitignore
@@ -27,7 +27,6 @@ packages/components/src/**/*.css.map
 
 /output/**/src
 /output/**/dist
-/output/**/.angular
 /output/**/playwright*
 /output/**/test-results
 
@@ -58,3 +57,8 @@ showcases/patternhub/public/iframe-resizer/*
 /packages/foundations/assets/icons/functional/fonts/**/*.svg
 /packages/foundations/assets/icons/functional/fonts/**/*.ttf
 /packages/foundations/assets/icons/functional/fonts/**/*.woff
+
+/output/stencil/.stencil
+/output/stencil/loader
+/output/stencil/www
+**/.angular
diff --git a/.xo-config.cjs b/.xo-config.cjs
@@ -20,11 +20,7 @@ module.exports = {
 			}
 		},
 		{
-			files: [
-				'./**/angular-**/**',
-				'./showcases/vanilla-showcase/**',
-				'./showcases/svelte-showcase/**'
-			],
+			files: ['./**/angular-**/**', './showcases/svelte-showcase/**'],
 			rules: {
 				'new-cap': 0, // fixes issue with @Component annotation
 				'import/no-unassigned-import': 0, // fixes issue with including zone.js or db-components

diff --git a/README.md b/README.md
@@ -35,6 +35,7 @@ designers, and content authors build, maintain, and scale best of class digital
 | [ngx-components](https://github.com/db-ui/mono/tree/main/output/angular)    | Native Angular components           | [![@db-ui/ngx-components on Npmjs](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fapi.github.com%2Frepos%2Fdb-ui%2Fmono%2Freleases%2Flatest&query=%24.tag_name&label=npm&color=ed1c24 "npm version")](https://npmjs.com/package/@db-ui/ngx-components "DB UI – on NPM")     |
 | [react-components](https://github.com/db-ui/mono/tree/main/output/react)    | Native React components             | [![@db-ui/react-components on Npmjs](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fapi.github.com%2Frepos%2Fdb-ui%2Fmono%2Freleases%2Flatest&query=%24.tag_name&label=npm&color=ed1c24 "npm version")](https://npmjs.com/package/@db-ui/react-components "DB UI – on NPM") |
 | [v-components](https://github.com/db-ui/mono/tree/main/output/vue)          | Native Vue 3 components             | [![@db-ui/v-components on Npmjs](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fapi.github.com%2Frepos%2Fdb-ui%2Fmono%2Freleases%2Flatest&query=%24.tag_name&label=npm&color=ed1c24 "npm version")](https://npmjs.com/package/@db-ui/v-components "DB UI – on NPM")         |
+| [web-components](https://github.com/db-ui/mono/tree/main/output/vue)        | Web Components                      | [![@db-ui/web-components on Npmjs](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fapi.github.com%2Frepos%2Fdb-ui%2Fmono%2Freleases%2Flatest&query=%24.tag_name&label=npm&color=ed1c24 "npm version")](https://npmjs.com/package/@db-ui/web-components "DB UI – on NPM")     |
 
 ## How to use
 
@@ -103,6 +104,7 @@ 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)
+3. [v0.3 ➡ v0.4](https://github.com/db-ui/mono/tree/main/docs/migration/v0.3.x-to-v0.4.x.md)
 
 ## How to start develop / contribute
 

diff --git a/...accordion-item/patternhub/accordion-item-properties-should-match-screenshot.png b/...accordion-item/patternhub/accordion-item-properties-should-match-screenshot.png
diff --git a/...apshots__/accordion/patternhub/accordion-properties-should-match-screenshot.png b/...apshots__/accordion/patternhub/accordion-properties-should-match-screenshot.png
diff --git a/__snapshots__/badge/patternhub/badge-properties-should-match-screenshot.png b/__snapshots__/badge/patternhub/badge-properties-should-match-screenshot.png
diff --git a/__snapshots__/brand/patternhub/brand-properties-should-match-screenshot.png b/__snapshots__/brand/patternhub/brand-properties-should-match-screenshot.png
diff --git a/__snapshots__/card/patternhub/card-properties-should-match-screenshot.png b/__snapshots__/card/patternhub/card-properties-should-match-screenshot.png
diff --git a/__snapshots__/checkbox/patternhub/checkbox-properties-should-match-screenshot.png b/__snapshots__/checkbox/patternhub/checkbox-properties-should-match-screenshot.png
diff --git a/__snapshots__/divider/patternhub/divider-properties-should-match-screenshot.png b/__snapshots__/divider/patternhub/divider-properties-should-match-screenshot.png
diff --git a/__snapshots__/drawer/patternhub/drawer-properties-should-match-screenshot.png b/__snapshots__/drawer/patternhub/drawer-properties-should-match-screenshot.png
diff --git a/__snapshots__/header/patternhub/header-properties-should-match-screenshot.png b/__snapshots__/header/patternhub/header-properties-should-match-screenshot.png
diff --git a/__snapshots__/infotext/patternhub/infotext-properties-should-match-screenshot.png b/__snapshots__/infotext/patternhub/infotext-properties-should-match-screenshot.png
diff --git a/...hContrast/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png b/...hContrast/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png
diff --git a/.../chromium/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png b/.../chromium/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png
diff --git a/...e/firefox/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png b/...e/firefox/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png
diff --git a/...le-chrome/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png b/...le-chrome/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png
diff --git a/...le-safari/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png b/...le-safari/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png
diff --git a/...se/webkit/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png b/...se/webkit/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png
diff --git a/__snapshots__/link/patternhub/link-properties-should-match-screenshot.png b/__snapshots__/link/patternhub/link-properties-should-match-screenshot.png
diff --git a/...vigation-item/patternhub/navigation-item-properties-should-match-screenshot.png b/...vigation-item/patternhub/navigation-item-properties-should-match-screenshot.png
diff --git a/...s__/popover/component/chromium/DBPopover-after-open-should-match-screenshot.png b/...s__/popover/component/chromium/DBPopover-after-open-should-match-screenshot.png
diff --git a/...ts__/popover/component/firefox/DBPopover-after-open-should-match-screenshot.png b/...ts__/popover/component/firefox/DBPopover-after-open-should-match-screenshot.png
diff --git a/...opover/component/mobile-chrome/DBPopover-after-open-should-match-screenshot.png b/...opover/component/mobile-chrome/DBPopover-after-open-should-match-screenshot.png
diff --git a/...trast/DBPopover-should-match-screenshot-1/DBPopover-should-match-screenshot.png b/...trast/DBPopover-should-match-screenshot-1/DBPopover-should-match-screenshot.png
diff --git a/...omium/DBPopover-should-match-screenshot-1/DBPopover-should-match-screenshot.png b/...omium/DBPopover-should-match-screenshot-1/DBPopover-should-match-screenshot.png
diff --git a/...refox/DBPopover-should-match-screenshot-1/DBPopover-should-match-screenshot.png b/...refox/DBPopover-should-match-screenshot-1/DBPopover-should-match-screenshot.png
diff --git a/...hrome/DBPopover-should-match-screenshot-1/DBPopover-should-match-screenshot.png b/...hrome/DBPopover-should-match-screenshot-1/DBPopover-should-match-screenshot.png
diff --git a/...afari/DBPopover-should-match-screenshot-1/DBPopover-should-match-screenshot.png b/...afari/DBPopover-should-match-screenshot-1/DBPopover-should-match-screenshot.png
diff --git a/...ebkit/DBPopover-should-match-screenshot-1/DBPopover-should-match-screenshot.png b/...ebkit/DBPopover-should-match-screenshot-1/DBPopover-should-match-screenshot.png
diff --git a/__snapshots__/section/patternhub/section-properties-should-match-screenshot.png b/__snapshots__/section/patternhub/section-properties-should-match-screenshot.png
diff --git a/...ontrast/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png b/...ontrast/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png
diff --git a/...hromium/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png b/...hromium/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png
diff --git a/...firefox/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png b/...firefox/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png
diff --git a/...-chrome/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png b/...-chrome/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png
diff --git a/__snapshots__/switch/patternhub/switch-properties-should-match-screenshot.png b/__snapshots__/switch/patternhub/switch-properties-should-match-screenshot.png
diff --git a/...trast/DBTabItem-should-match-screenshot-1/DBTabItem-should-match-screenshot.png b/...trast/DBTabItem-should-match-screenshot-1/DBTabItem-should-match-screenshot.png
diff --git a/...omium/DBTabItem-should-match-screenshot-1/DBTabItem-should-match-screenshot.png b/...omium/DBTabItem-should-match-screenshot-1/DBTabItem-should-match-screenshot.png
diff --git a/...refox/DBTabItem-should-match-screenshot-1/DBTabItem-should-match-screenshot.png b/...refox/DBTabItem-should-match-screenshot-1/DBTabItem-should-match-screenshot.png
diff --git a/...hrome/DBTabItem-should-match-screenshot-1/DBTabItem-should-match-screenshot.png b/...hrome/DBTabItem-should-match-screenshot-1/DBTabItem-should-match-screenshot.png
diff --git a/...afari/DBTabItem-should-match-screenshot-1/DBTabItem-should-match-screenshot.png b/...afari/DBTabItem-should-match-screenshot-1/DBTabItem-should-match-screenshot.png
diff --git a/...ebkit/DBTabItem-should-match-screenshot-1/DBTabItem-should-match-screenshot.png b/...ebkit/DBTabItem-should-match-screenshot-1/DBTabItem-should-match-screenshot.png
diff --git a/__snapshots__/tabs/patternhub/tabs-properties-should-match-screenshot.png b/__snapshots__/tabs/patternhub/tabs-properties-should-match-screenshot.png
diff --git a/__snapshots__/tag/patternhub/tag-properties-should-match-screenshot.png b/__snapshots__/tag/patternhub/tag-properties-should-match-screenshot.png
diff --git a/...-highContrast/DBTag-should-match-screenshot-1/DBTag-should-match-screenshot.png b/...-highContrast/DBTag-should-match-screenshot-1/DBTag-should-match-screenshot.png
diff --git a/__snapshots__/tooltip/patternhub/tooltip-properties-should-match-screenshot.png b/__snapshots__/tooltip/patternhub/tooltip-properties-should-match-screenshot.png
diff --git a/e2e/package.json b/e2e/package.json
@@ -23,14 +23,14 @@
     "test:vue-showcase": "npm run test:e2e --workspace=vue-showcase"
   },
   "devDependencies": {
-    "@playwright/test": "1.47.2",
+    "@playwright/test": "1.48.2",
     "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.7.0",
+    "tslib": "^2.8.1",
     "typescript": "^5.3.3"
   }
 }
diff --git a/output/angular/package.json b/output/angular/package.json
@@ -16,7 +16,7 @@
     "start": "ng serve"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "17.3.10",
+    "@angular-devkit/build-angular": "17.3.11",
     "@angular/common": "17.3.12",
     "ng-packagr": "17.3.0",
     "typescript": "^5.4.5"

diff --git a/output/react/package.json b/output/react/package.json
@@ -26,8 +26,8 @@
     "tsc": "tsc -p . --sourceMap false"
   },
   "devDependencies": {
-    "@playwright/experimental-ct-react": "1.47.2",
-    "@types/react": "^18.3.11",
+    "@playwright/experimental-ct-react": "1.48.2",
+    "@types/react": "^18.3.12",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

diff --git a/output/webcomponent/README.md → output/stencil/README.md b/output/webcomponent/README.md → output/stencil/README.md
@@ -9,38 +9,68 @@ A web-component library containing all components of [DB UX Design System (techn
 
 ## Install
 
-`npm i @db-ui/web-components`
+```shell
+npm i @db-ui/web-components
+```
 
-## Dependencies
+> **Note:** This will install [`@db-ui/foundations`](https://www.npmjs.com/package/@db-ui/foundations) and [`@db-ui/components`](https://www.npmjs.com/package/@db-ui/components) as well which contains the `css`/`scss` files
 
-```json
-# package.json
-"copy:assets": "cpr node_modules/@db-ui/foundations/assets ./public/assets  -o",
-"copy:styles": "cpr node_modules/@db-ui/components/build/styles/db-ui-42.css ./public/styles/db-ui-42.css  -o",
-"copy:components": "cpr node_modules/@db-ui/components/build/components ./public/components  -o",
+## Styling Dependencies
+
+Import the styles in scss or css. Based on your technology the file names could be different.
+
+-   Default (db-ui-42): points to `../assets`
+-   Rollup (db-ui-42-rollup): points to `@db-ui/foundations/assets`
+-   Webpack (db-ui-42-webpack): points to `~@db-ui/foundations/assets`
+
+<details>
+  <summary><strong>SCSS</strong></summary>
+
+```scss
+// index.scss
+@forward "@db-ui/components/build/styles/db-ui-42-rollup";
 ```
 
-```html
-# index.html
+</details>
+<details>
+  <summary><strong>CSS</strong></summary>
 
-<head>
-	...
-	<link rel="stylesheet" href="styles/db-ui-42.css" />
-	...
-</head>
+```js
+// main.js
+import "@db-ui/components/build/styles/db-ui-42-rollup.css";
 ```
 
+</details>
+
+> **Note:** The `db-ui-42` file contains optional and all components styles. If you consider performance issues see [@db-ui/components](https://www.npmjs.com/package/@db-ui/components) for more information.
+
 ## Usage
 
-```javascript
-import "node_modules/@db-ui/web-components/components/button/button.js";
+```js
+// main.js
+import { defineCustomElements } from "@db-ui/web-components";
+defineCustomElements();
+```
 
+```html
 ...
-<db-button variant="brand" icon="person">Test</db-button>
+<db-button icon="person">Test</db-button>
 ...
+```
 
+## VSCode autocomplete
+
+If you don't have it already, add a VS Code settings folder and file at the root of your project - `.vscode/settings.json`. Then add or append the following code:
+
+```json
+{
+	"html.customData": [
+		"./node_modules/@db-ui/web-components/dist/vscode.html-custom-data.json"
+	]
+}
 ```
 
+
 ## Deutsche Bahn brand
 
 As we'd like to perfectly support our users and customers on their digital journey, the usage of Deutsche Bahn brand and trademarks are bound of clear guidelines and restrictions even when being used with the code that we're provide with this product; Deutsche Bahn fully reserves all rights regarding the Deutsche Bahn brand, even though that we're providing the code of DB UI products free to use and release it under the Apache 2.0 license.