Merge branch 'main' into dbux-3

Author: mfranzke

.github/actions/extract-branch/action.yml

@@ -16,7 +16,7 @@ runs:
         script: |
           return (
           context?.payload?.pull_request?.head?.ref ||
-          context?.payload?.ref
+          context?.payload?.ref || ""
           ).replace("refs/heads/","");
     - name: 🪑 Set output
       id: branch-name

.github/workflows/00-scan-secrets.yml

@@ -17,7 +17,7 @@ jobs:
         id: extract_branch
 
       - name: 🐷 TruffleHog OSS
-        uses: trufflesecurity/[email protected].0
+        uses: trufflesecurity/[email protected].3
         with:
           path: ./
           base: ${{ steps.extract_branch.outputs.branch-name }}

package-lock.json

@@ -49,7 +49,7 @@
     "prepare": "node -e \"try { require('husky').install() } catch (e) {}\""
   },
   "validate-branch-name": {
-    "pattern": "((dbux-3)|(dependabot-)|^((test|feat|fix|chore|docs|refactor|style|ci|perf)\\-[a-zA-Z0-9\\-]+)$)",
+    "pattern": "((dbux-3)|(dependabot-)|^((test|feat|fix|chore|docs|refactor|style|ci|perf|[0-9]+)\\-[a-zA-Z0-9\\-]+)$)",
     "errorMsg": "There is something wrong with your branch name. You should rename your branch to a valid name and try again. See the Pattern below."
   },
   "keywords": [],
@@ -64,23 +64,23 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.19.3",
-    "@babel/preset-env": "^7.19.4",
-    "@commitlint/cli": "^17.1.2",
-    "@commitlint/config-conventional": "^17.1.0",
+    "@babel/preset-env": "^7.20.2",
+    "@commitlint/cli": "^17.2.0",
+    "@commitlint/config-conventional": "^17.2.0",
     "@mfranzke/plugin-node-uiextension": "^1.0.0",
     "@pattern-lab/cli": "^5.17.0",
     "@pattern-lab/core": "^5.17.0",
     "@pattern-lab/engine-handlebars": "^5.16.4",
     "@pattern-lab/starterkit-handlebars-demo": "^5.16.4",
     "@pattern-lab/uikit-workshop": "^5.17.0",
-    "autoprefixer": "^10.4.12",
-    "backstopjs": "^6.1.3",
+    "autoprefixer": "^10.4.13",
+    "backstopjs": "^6.1.4",
     "cpr": "^3.0.1",
     "details-element-polyfill": "^2.4.0",
     "dialog-polyfill": "^0.5.6",
     "dotenv": "^16.0.3",
     "find-versions-cli": "^4.0.0",
-    "html-validate": "^7.7.1",
+    "html-validate": "^7.8.0",
     "html5-boilerplate": "^8.0.0",
     "husky": "^8.0.1",
     "iframe-resizer": "^4.3.2",
@@ -95,8 +95,8 @@
     "prettier": "^2.5.1",
     "pretty-quick": "^3.1.3",
     "rimraf": "^3.0.2",
-    "sass": "^1.55.0",
-    "stylelint": "^14.14.0",
+    "sass": "^1.56.0",
+    "stylelint": "^14.14.1",
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-sass-guidelines": "^9.0.1",
     "validate-branch-name": "^1.3.0",

package.json

@@ -1,2 +1,9 @@
-<input type="radio" class="elm-radio {{ styleModifier }}"{{#if name}} name="{{ name }}"{{/if }} id="{{ id }}"{{#if checked}} checked{{/if }}{{#if disabled}} disabled{{/if }} value="{{ value }}"{{#if describedbyid }} aria-describedby="{{ describedbyid }}"{{/if }}>
+<input type="radio"
+	class="elm-radio {{ styleModifier }}"{{#if name}} name="{{ name }}"{{/if }}
+	id="{{ id }}"
+	{{#if checked}} checked{{/if }}
+	{{#if disabled}} disabled{{/if }}
+	value="{{ value }}"
+	{{#if describedbyid }} aria-describedby="{{ describedbyid }}"{{/if }}
+	{{#if invalid}}aria-invalid="true"{{/if }}>
 <label class="elm-label" for="{{ id }}">{{ label }}</label>

source/_patterns/00-base/icons/_icons.scss renamed to source/_patterns/00-base/icons/icons.scss

@@ -1,5 +1,5 @@
 {
-	"id": "radio06",
+	"id": "radio04",
 	"checked": true,
 	"disabled": true
 }

source/_patterns/01-elements/radio/radio.hbs

@@ -1,4 +1,4 @@
 {
-	"id": "radio05",
+	"id": "radio03",
 	"disabled": true
 }

source/_patterns/01-elements/radio/radio~disabled-checked.json

@@ -0,0 +1,4 @@
+{
+	"id": "radio05",
+	"invalid": true
+}

source/_patterns/01-elements/radio/radio~disabled.json

@@ -34,7 +34,23 @@
 
 			// TODO: This is an enhancement for more languages, but obviously doesn't scale that nicely and would need some rework
 			&:not([aria-selected="true"]) ~ li:not([aria-selected="true"]) {
-				top: to-rem($pxValue: 108);
+				top: to-rem($pxValue: 54 * 2);
+
+				& ~ li:not([aria-selected="true"]) {
+					top: to-rem($pxValue: 54 * 3);
+
+					& ~ li:not([aria-selected="true"]) {
+						top: to-rem($pxValue: 54 * 4);
+
+						& ~ li:not([aria-selected="true"]) {
+							top: to-rem($pxValue: 54 * 5);
+
+							& ~ li:not([aria-selected="true"]) {
+								top: to-rem($pxValue: 54 * 6);
+							}
+						}
+					}
+				}
 			}
 			@media screen and (min-width: 1024px) {
 				top: to-rem($pxValue: 56);

source/_patterns/01-elements/radio/radio~invalid.json

@@ -1,3 +1,7 @@
+/* *****
+	This file summarizes the general variables relevant for using DB UI Core with SCSS.
+***** */
+
 // Define the path for both image and font folders
 $icons-path: "../../icons/" !default;
 $images-path: "../../images/" !default;

source/_patterns/02-components/language-switcher/language-switcher.scss

@@ -1,3 +1,7 @@
+/* *****
+	SCSS placeholder for general font declarations
+***** */
+
 @import "db-ui-core.variables";
 
 %general-fonts {

source/css/_db-ui-core.variables.scss

@@ -1,3 +1,7 @@
+/* *****
+	This is mainly meant to get included within scoped components like e.g. within StencilJS Custom Components / DB UI Elements
+***** */
+
 @import "db-ui-core.variables";
 @import "@csstools/normalize.css/normalize";
 @import "../_patterns/00-base/init";

source/css/_fonts.general.scss

@@ -1,3 +1,9 @@
+/* *****
+	This file is meant to get included globally on a page with a standard set of variables and font references,
+	if you're using only partials – either Web Components out of DB UI Elements or the partial CSS generated out
+	of DB UI Core for each element and component.
+***** */
+
 // Define the path for both image and font folders
 $icons-path: "../icons/" !default;
 $images-path: "../images/" !default;
@@ -12,6 +18,7 @@ $fonts-path: "../fonts/" !default;
 @import "../_patterns/00-base/icons/icons.font-faces";
 
 :root {
+	// Overwriting the referenced SVG icons as this is going to get inlined and the path would be relative to the pages URL instead of the CSS, which would break
 	--db-ic-search-24: url(#{$icons-path}functional/images/action/db_ic_search_24.svg);
 	--db-ic-expand-more-20: url(#{$icons-path}functional/images/navigation/db_ic_expand_more_20.svg);
 }