Merge branch 'main' into feat-drawer-non-modal

.config/.jscpd.json

@@ -3,6 +3,7 @@
 	"reporters": ["console"],
 	"minTokens": 65,
 	"ignore": [
+		"**/.angular/**",
 		".history/**",
 		"**/__snapshots__/**",
 		"**/.github/**",

.config/.lintstagedrc.js

@@ -1,5 +1,9 @@
 export default {
 	'*.md': 'markdownlint -c .config/.markdown-lint.yml',
-	'*.{css,scss}': 'stylelint --fix --allow-empty-input',
+	// In case that we're changing the stylelints configuration files content, we would need to validate it
+	'.stylelintrc.*': 'stylelint --validate',
+	'stylelint.config.*': 'stylelint --validate',
+	// and elsewhere we don't, compare to https://github.com/stylelint/stylelint/pull/8009
+	'*.{css,scss}': 'stylelint --fix --allow-empty-input --no-validate',
 	'*.{js,ts,tsx,jsx,mjs,cjs}': 'xo --fix'
 };

.eslintignore

@@ -10,4 +10,4 @@
 /showcases/nuxt-showcase/**
 build-outputs/
 build-showcases/
-/output/vue/scripts/fix-any-types.ts
+/output/**

.github/dependabot.yml

@@ -29,7 +29,6 @@ updates:
         update-types: ["version-update:semver-major"]
       - dependency-name: "react-dom"
         update-types: ["version-update:semver-major"]
-
       - dependency-name: "typescript"
         update-types: ["version-update:semver-major"]
       - dependency-name: "ng-packagr"
@@ -39,6 +38,9 @@ updates:
         update-types: ["version-update:semver-minor"]
       # There is an issue with sass:1.77.5 and additional colors in foundations we ignore updates for now
       - dependency-name: "sass"
+      # We currently need to ignore eslint@v9
+      - dependency-name: "eslint"
+        update-types: ["version-update:semver-minor"]
     pull-request-branch-name:
       separator: "-"
     # https://github.com/dependabot/dependabot-core/issues/5226#issuecomment-1179434437
@@ -73,3 +75,10 @@ updates:
       builder.io:
         patterns:
           - "@builder.io/mitosis*"
+      inquirer:
+        patterns:
+          - "@inquirer/*"
+          - "inquirer"
+      mdx-js:
+        patterns:
+          - "@mdx-js/*"

.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 "<meta http-equiv=\"refresh\" content=\"0; URL=https://"$OWNER_NAME".github.io/"$REPO_NAME"/version/"$NAME"\" />" > 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

.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,

.github/scripts/publish-npm.sh

@@ -60,6 +60,7 @@ for REGISTRY in 'GITHUB' 'NPM'; do
 	# TODO: Add other build as well
 	for PACKAGE in 'foundations' 'components' 'ngx-components' 'react-components' 'v-components' 'web-components'; do
 		echo "⤴ Publish $PACKAGE with tag $TAG to $REGISTRY"
-		npm publish --tag "$TAG" db-ui-"$PACKAGE"-"$VALID_SEMVER_VERSION".tgz
+		# https://docs.npmjs.com/generating-provenance-statements#example-github-actions-workflow
+		npm publish --tag "$TAG" db-ui-"$PACKAGE"-"$VALID_SEMVER_VERSION".tgz --provenance
 	done
 done

.github/workflows/03-publish-packages.yml

@@ -20,6 +20,9 @@ jobs:
   publish:
     name: Publish latest package versions to GitHub Packages
     runs-on: ubuntu-latest
+    permissions:
+      id-token: write
+      contents: write
     steps:
       - name: ⏬ Checkout repo
         uses: actions/checkout@v4

.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,

.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,

.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

.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

CODE-OF-CONDUCT.md

@@ -17,24 +17,24 @@ diverse, inclusive, and healthy community.
 Examples of behavior that contributes to a positive environment for our
 community include:
 
-- Demonstrating empathy and kindness toward other people
-- Being respectful of differing opinions, viewpoints, and experiences
-- Giving and gracefully accepting constructive feedback
-- Accepting responsibility and apologizing to those affected by our mistakes,
-  and learning from the experience
-- Focusing on what is best not just for us as individuals, but for the overall
-  community
+-   Demonstrating empathy and kindness toward other people
+-   Being respectful of differing opinions, viewpoints, and experiences
+-   Giving and gracefully accepting constructive feedback
+-   Accepting responsibility and apologizing to those affected by our mistakes,
+    and learning from the experience
+-   Focusing on what is best not just for us as individuals, but for the overall
+    community
 
 Examples of unacceptable behavior include:
 
-- The use of sexualized language or imagery, and sexual attention or advances of
-  any kind
-- Trolling, insulting or derogatory comments, and personal or political attacks
-- Public or private harassment
-- Publishing others' private information, such as a physical or email address,
-  without their explicit permission
-- Other conduct which could reasonably be considered inappropriate in a
-  professional setting
+-   The use of sexualized language or imagery, and sexual attention or advances of
+    any kind
+-   Trolling, insulting or derogatory comments, and personal or political attacks
+-   Public or private harassment
+-   Publishing others' private information, such as a physical or email address,
+    without their explicit permission
+-   Other conduct which could reasonably be considered inappropriate in a
+    professional setting
 
 ## Enforcement Responsibilities
 

CODEOWNERS

@@ -1,3 +1,3 @@
 # Global Repository owners
 # see https://docs.github.com/en/free-pro-team@latest/github/creating-cloning-and-archiving-repositories/about-code-owners for details of syntax
-* [email protected] [email protected] [email protected] [email protected] [email protected]
+* [email protected] [email protected] [email protected] [email protected]

README.md

@@ -1,7 +1,7 @@
 <!-- markdownlint-configure-file { "MD013": false, "MD041":false } -->
 <!-- markdownlint-disable MD033 MD010 -->
 
-<img src="docs/images/header_image_0.guetzli.jpg" alt="" srcset="docs/images/header_image_0.guetzli.2x.jpg 2x, docs/images/header_image_0.guetzli.3x.jpg 3x"> <!-- width="830" height="276" //-->
+<picture><source srcset="https://db-ui.github.io/images/db-ux-design-system-v3-header.avif" type="image/avif"><source srcset="https://db-ui.github.io/images/db-ux-design-system-v3-header.webp" type="image/webp"><img src="https://db-ui.github.io/images/db-ux-design-system-v3-header.jpg" alt=""></picture>
 
 # DB UI Mono (Beta) 🚂💖
 
@@ -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
 

docs/adr-04-icons.md

@@ -7,8 +7,9 @@ _WIP_
 We'll provide both SVG files, as well as icon fonts for total flexibility by the consuming developers. Out of our system we're focusing on using the latter, as this simplifies problems regarding e.g. referencing the assets at the correct path.
 
 In general, these would be the ways how to reference a functional icon:
-- Icons that we'd like to set based on the guidelines (like a specific icon for a specific variant, type or whatever): Via SCSS mixin, especially to separate markup from styling, and to ensure non-breaking update feasibility.
-- Icons that the user could set: Either via SCSS mixin, or HTML attribute `data-icon`, depending on their tech stack.
+
+-   Icons that we'd like to set based on the guidelines (like a specific icon for a specific variant, type or whatever): Via SCSS mixin, especially to separate markup from styling, and to ensure non-breaking update feasibility.
+-   Icons that the user could set: Either via SCSS mixin, or HTML attribute `data-icon`, depending on their tech stack.
 
 ## Problem description and context
 

docs/migration/v0.2.x-to-v0.3.x.md

@@ -25,5 +25,5 @@ We refactored our colors which might add some breaking changes to current projec
 We provide a cli tool to auto migrate your source code. Use this command in your repository:
 
 ```shell
-npx @db-ui/foundations migration --src=./src
+npx @db-ui/foundations@v0.3 migration --src=./src
 ```

docs/migration/v0.3.x-to-v0.4.x.md

@@ -30,7 +30,7 @@ We refactored our icons which might add some breaking changes to current project
 We provide a cli tool to auto migrate your source code. Use this command in your repository:
 
 ```shell
-npx @db-ui/foundations migration --src=./src
+npx @db-ui/foundations@v0.4 migration --type=icon --src=./src
 ```
 
 Please check the changes made in your codebase afterwards, as this is mainly a simple search & replace and there might be unexpected changes of similar wordings to our icon names for any other methods, or further code occurrences that don't even refer to icons.