chore: update from main

.github/dependabot.yml

@@ -40,7 +40,7 @@ updates:
       - dependency-name: "sass"
       # We currently need to ignore eslint@v9
       - dependency-name: "eslint"
-        update-types: ["version-update:semver-minor"]
+        update-types: ["version-update:semver-major"]
     pull-request-branch-name:
       separator: "-"
     # https://github.com/dependabot/dependabot-core/issues/5226#issuecomment-1179434437

.github/scripts/build-gh-page.sh

@@ -35,7 +35,7 @@ if [[ $PRE_RELEASE == "true" || $RELEASE == "true" ]]; then
 			rm -rf ./public/version/latest
 		fi
 		mkdir ./public/version/latest
-		cp ./out ./public/version/latest
+		cp -RT ./out ./public/version/latest
 		echo "    Copied dir out to ./public/version/latest"
 	fi
 	mv ./out ./public/version/"$NAME"

.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/workflows/01-build-patternhub.yml

@@ -12,11 +12,17 @@ on:
         required: false
         default: "false"
         type: string
+    outputs:
+      path:
+        description: "Base path for patternhub"
+        value: ${{ jobs.build-patternhub.outputs.path }}
 
 jobs:
   build-patternhub:
     name: Build Patternhub
     runs-on: ubuntu-latest
+    outputs:
+      path: ${{ steps.build.outputs.path }}
     steps:
       - name: ⏬ Checkout repo
         uses: actions/checkout@v4
@@ -78,11 +84,13 @@ jobs:
             return `/${context?.payload?.repository?.name}/${path}/${process.env.NAME}`
 
       - name: 🔨 Build Patternhub
+        id: build
         env:
           NEXT_PUBLIC_BASE_PATH: ${{ steps.base-path.outputs.result }}
         run: |
           npx --no tsx scripts/md-resolve-svg.ts
           npm run build --workspace=patternhub
+          echo "path=${NEXT_PUBLIC_BASE_PATH}" >> $GITHUB_OUTPUT
 
       - name: ⏫ Upload Patternhub
         uses: actions/upload-artifact@v4

.github/workflows/02-e2e-regenerate.yml

@@ -9,6 +9,9 @@ on:
       type:
         required: true
         type: string
+      path:
+        required: false
+        type: string
 
 permissions:
   actions: write
@@ -67,43 +70,46 @@ jobs:
         env:
           HOME: /root
           TYPE: ${{ inputs.type }}
+          NEXT_PUBLIC_BASE_PATH: ${{ inputs.path }}
         run: |
           if [[ $TYPE == "components" ]]; then
             npm run regenerate:screenshots --workspace=@db-ui/react-components
           elif [[ $TYPE == "foundations" ]]; then
             npm run regenerate:screenshots --workspace=@db-ui/foundations
           elif [[ $TYPE == "patternhub" ]]; then
+            mkdir -p ./build-showcases${{ inputs.path }}
+            cp -RT ./build-showcases/${{ inputs.type }} ./build-showcases${{ inputs.path }}
             npm run regenerate:screenshots --workspace=patternhub
           else
             npm run regenerate:screenshots --workspace=react-showcase
           fi
 
       - name: 🆙 Upload components
-        if: inputs.type == 'components'
+        if: always() && inputs.type == 'components'
         uses: actions/upload-artifact@v4
         with:
           name: snapshots-${{ inputs.type }}
           path: ./__snapshots__/*/component
           retention-days: 30
 
       - name: 🆙 Upload foundations
-        if: inputs.type == 'foundations'
+        if: always() && inputs.type == 'foundations'
         uses: actions/upload-artifact@v4
         with:
           name: snapshots-${{ inputs.type }}
           path: ./__snapshots__/foundations
           retention-days: 30
 
       - name: 🆙 Upload patternhub
-        if: inputs.type == 'patternhub'
+        if: always() && inputs.type == 'patternhub'
         uses: actions/upload-artifact@v4
         with:
           name: snapshots-${{ inputs.type }}
           path: ./__snapshots__/*/patternhub
           retention-days: 30
 
       - name: 🆙 Upload showcase
-        if: inputs.type == 'showcases'
+        if: always() && inputs.type == 'showcases'
         uses: actions/upload-artifact@v4
         with:
           name: snapshots-${{ inputs.type }}

.github/workflows/02-e2e-showcases.yml

@@ -9,6 +9,9 @@ on:
       showcase:
         required: true
         type: string
+      path:
+        required: false
+        type: string
 
 permissions:
   actions: write
@@ -59,10 +62,20 @@ jobs:
           name: db-ui-${{ inputs.showcase }}
           path: build-showcases/${{ inputs.showcase }}
 
+      - name: 🧴 Copy patternhub testing app
+        if: inputs.path
+        shell: bash
+        run: |
+          mkdir -p ./build-showcases${{ inputs.path }}
+          cp -RT ./build-showcases/${{ inputs.showcase }} ./build-showcases${{ inputs.path }}
+
       - name: 👩‍🔬 Test showcase with Playwright 🎭
+        shell: bash
         env:
           HOME: /root
+          NEXT_PUBLIC_BASE_PATH: ${{ inputs.path }}
         run: |
+          ls ./build-showcases${{ inputs.path }}
           npm run test:e2e --workspace=${{ inputs.showcase }} -- --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
 
       - name: 🔣 Print GitHub Report

.github/workflows/default.yml

@@ -136,6 +136,7 @@ jobs:
     needs: [build-showcase-patternhub, get-playwright-version]
     with:
       version: ${{ needs.get-playwright-version.outputs.version }}
+      path: ${{ needs.build-showcase-patternhub.outputs.path }}
       showcase: patternhub
 
   regenerate-snapshots-components:
@@ -159,8 +160,14 @@ jobs:
     uses: ./.github/workflows/02-e2e-regenerate.yml
     with:
       version: ${{ needs.get-playwright-version.outputs.version }}
+      path: ${{ needs.build-showcase-patternhub.outputs.path }}
       type: patternhub
-    needs: [test-showcase-patternhub, get-playwright-version]
+    needs:
+      [
+        build-showcase-patternhub,
+        test-showcase-patternhub,
+        get-playwright-version
+      ]
 
   test-screen-reader:
     uses: ./.github/workflows/02-e2e-screen-reader.yml

.github/workflows/release.yml

@@ -132,6 +132,7 @@ jobs:
     uses: ./.github/workflows/02-e2e-showcases.yml
     needs: [build-showcase-patternhub, get-playwright-version]
     with:
+      path: ${{ needs.build-showcase-patternhub.outputs.path }}
       version: ${{ needs.get-playwright-version.outputs.version }}
       showcase: patternhub
 

README.md

@@ -21,11 +21,6 @@ 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                                                                                                                                                                                                                                                                                  |

e2e/package.json

@@ -30,7 +30,7 @@
     "fs-extra": "^11.1.0",
     "http-server": "14.1.1",
     "npm-run-all": "4.1.5",
-    "tslib": "^2.8.0",
+    "tslib": "^2.8.1",
     "typescript": "^5.3.3"
   }
 }

output/stencil/custom-elements-manifest.config.js

@@ -2,8 +2,6 @@ import { generateVsCodeCustomElementData } from 'custom-element-vs-code-integrat
 import { getTsProgram } from 'cem-plugin-expanded-types';
 import { resolveTypesPlugin } from './scripts/resolveTypes.js';
 import { generateJetBrainsWebTypes } from 'custom-element-jet-brains-integration';
-import { writeFileSync } from 'node:fs';
-import { customElementsManifestToMarkdown } from '@custom-elements-manifest/to-markdown';
 
 const outdir = './dist';
 
@@ -44,19 +42,6 @@ export default {
 	},
 	plugins: [
 		resolveTypesPlugin(({ customElementsManifest }) => {
-			writeFileSync(
-				`${outdir}/custom-elements.md`,
-				customElementsManifestToMarkdown(customElementsManifest, {
-					private: 'hidden',
-					omitDeclarations: [
-						'mixins',
-						'variables',
-						'functions',
-						'exports'
-					],
-					omitSections: ['attributes', 'methods']
-				})
-			);
 			generateVsCodeCustomElementData(
 				customElementsManifest,
 				vsCodeOptions

output/stencil/package.json

@@ -31,12 +31,11 @@
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.10.3",
-    "@custom-elements-manifest/to-markdown": "^0.1.0",
     "@stencil/core": "4.22.2",
     "cem-plugin-expanded-types": "^1.3.2",
     "custom-element-jet-brains-integration": "^1.6.2",
     "custom-element-vs-code-integration": "^1.4.1",
-    "workbox-build": "4.3.1"
+    "workbox-build": "7.3.0"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",

output/stencil/scripts/analyzePhase.js

@@ -1,14 +1,21 @@
 const getPrimitive = (ts, kind) =>
 	ts.SyntaxKind[kind.toString()].replace('Keyword', '').toLowerCase();
 
+const getElementsRecursive = (node) => {
+	if (node.expression) {
+		return getElementsRecursive(node.expression);
+	}
+
+	return node.elements;
+};
+
 /**
  * Get string arrays like: export const LinkCurrentList = (['time', 'true', 'false', 'date', 'page', 'step', 'location'] as const)
  * @param initializer {object}
  */
 const getStringArrayConst = (initializer) => {
-	const texts = initializer.expression?.expression?.elements?.map(
-		(elemNode) => `"${elemNode.text}"`
-	);
+	const elements = getElementsRecursive(initializer);
+	const texts = elements?.map((elemNode) => `"${elemNode.text}"`);
 	if (texts) {
 		return {
 			values: texts,
@@ -19,6 +26,16 @@ const getStringArrayConst = (initializer) => {
 	return undefined;
 };
 
+const getArrayType = (ts, type) => {
+	let array;
+	if (type.elementType.typeName) {
+		array = type.elementType.typeName.escapedText;
+	} else {
+		array = getPrimitive(ts, type.elementType.kind);
+	}
+	return `${array}[]`;
+};
+
 /**
  * Get literals or type unions like: export const Test = "a" | "b";
  * @param ts {object} Typescript ast
@@ -33,6 +50,9 @@ const getUnions = (ts, types) => {
 			return innerType.typeName?.escapedText;
 		} else if (innerType.literal) {
 			return `'${innerType.literal?.text}'`;
+		} else if (innerType.elementType) {
+			// Arrays
+			return getArrayType(ts, innerType);
 		} else if (innerType.kind) {
 			return getPrimitive(ts, innerType.kind);
 		}
@@ -76,6 +96,8 @@ const getMembers = (ts, members) => ({
 			type = memberType?.typeName?.escapedText;
 		} else if (memberType.types) {
 			type = getUnions(ts, memberType.types);
+		} else if (memberType.elementType) {
+			type = getArrayType(ts, memberType);
 		} else {
 			type = getPrimitive(ts, memberType.kind);
 		}
@@ -89,7 +111,7 @@ const getMembers = (ts, members) => ({
 	type: 'props'
 });
 
-export const analyzePhase = ({ ts, node,  context }) => {
+export const analyzePhase = ({ ts, node, context }) => {
 	if (!context.data) {
 		context.data = {};
 	}

output/stencil/scripts/packageLinkPhase.js

@@ -31,7 +31,13 @@ const getFilteredContextData = (data) => {
 			if (currentType !== 'literal') {
 				foundType = data[currentType];
 			}
-			const resolvedType = `${foundType.values.join(unionSeperator)}`;
+			let resolvedType;
+			try {
+				resolvedType = `${foundType.values.join(unionSeperator)}`;
+			} catch (e) {
+				console.error(key, obj);
+				throw e;
+			}
 
 			resolvedData[key] = {
 				...obj,
@@ -46,11 +52,11 @@ const getFilteredContextData = (data) => {
 /**
  * Resolves props by data
  * @param resolvedData {object}
- * @param value {object}
+ * @param value {object|string}
  * @return {{resolvedType, name, type}}
  */
 const resolveProp = (resolvedData, value) => {
-	const { type } = value;
+	let type = value.type ?? value;
 	if (type !== type?.toLowerCase()) {
 		// This isn't a primitive like string, boolean, etc.
 		const foundData = resolvedData[type];
@@ -80,14 +86,14 @@ const resolveAllProps = (resolvedData, resolvedProps) => {
 				const { name, type } = value;
 				if (type instanceof Object) {
 					// In this case we have a literal or union
+					const resolvedType = type.values
+						.map((val) => {
+							return resolveProp(resolvedData, val).resolvedType;
+						})
+						.join(unionSeperator);
 					return {
 						...value,
-						resolvedType: type.values
-							.map((val) => {
-								return resolveProp(resolvedData, '', val)
-									.resolvedType;
-							})
-							.join(unionSeperator)
+						resolvedType
 					};
 				} else {
 					return resolveProp(resolvedData, value);
@@ -223,7 +229,17 @@ export const packageLinkPhase = (
 					declaration.attributes
 				);
 
-				return { ...declaration, members, attributes };
+				const slots = declaration.slots.map((slot) => ({
+					name: slot.name,
+					description:
+						resolvedUnions[
+							`${declaration.name}Props`
+						]?.resolvedValues.find(
+							(value) => value.name === slot.name
+						)?.comment || slot.description
+				}));
+
+				return { ...declaration, members, attributes, slots };
 			});
 			const path = module.path.split('/').at(-1);