Merge branch 'main' into 1620-focus-explore-on-two-colored-outline

.github/workflows/00-init.yml

@@ -9,7 +9,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: 🛑 Cancel Previous Runs
-        uses: styfle/cancel-workflow-action@0.11.0
+        uses: styfle/cancel-workflow-action@0.12.0
 
       - name: ⬇ Checkout repo
         uses: actions/checkout@v4

output/angular/package.json

@@ -16,7 +16,7 @@
     "start": "ng serve"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "14.2.12",
+    "@angular-devkit/build-angular": "14.2.13",
     "@angular/common": "14.3.0",
     "ng-packagr": "14.2.2"
   },

output/react/package.json

@@ -25,12 +25,12 @@
     "tsc": "tsc -p . --sourceMap false"
   },
   "devDependencies": {
-    "@axe-core/playwright": "^4.7.3",
+    "@axe-core/playwright": "^4.8.0",
     "@playwright/experimental-ct-react": "1.35.1",
-    "@types/react": "^18.2.23",
+    "@types/react": "^18.2.28",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "sass": "^1.68.0"
+    "sass": "^1.69.3"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",

output/vue/vue3/package.json

@@ -34,13 +34,13 @@
     "vue": "^3.3.4"
   },
   "devDependencies": {
-    "@axe-core/playwright": "^4.7.3",
+    "@axe-core/playwright": "^4.8.0",
     "@playwright/experimental-ct-vue": "1.35.1",
-    "@vitejs/plugin-vue": "^4.3.4",
-    "sass": "^1.68.0",
+    "@vitejs/plugin-vue": "^4.4.0",
+    "sass": "^1.69.3",
     "typescript": "^4.9.5",
-    "vite": "^4.4.9",
-    "vue-tsc": "^1.8.15"
+    "vite": "^4.4.11",
+    "vue-tsc": "^1.8.19"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",

package.json

@@ -80,15 +80,15 @@
     "update:icon-fonts": "npm-run-all generate:icon-fonts generate:icon-types"
   },
   "devDependencies": {
-    "@commitlint/cli": "17.7.1",
+    "@commitlint/cli": "17.7.2",
     "@commitlint/config-conventional": "17.7.0",
     "@playwright/test": "1.35.1",
     "commander": "^11.0.0",
     "cpr": "3.0.1",
     "cross-env": "^7.0.3",
     "cssnano": "^6.0.1",
     "dotenv": "^16.3.1",
-    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-prettier": "^5.0.1",
     "fs-extra": "^11.1.1",
     "glob": "^10.3.10",
     "http-server": "14.1.1",
@@ -98,7 +98,7 @@
     "lint-staged": "^14.0.1",
     "markdownlint-cli": "^0.37.0",
     "npm-run-all": "4.1.5",
-    "postcss": "^8.4.30",
+    "postcss": "^8.4.31",
     "postcss-cli": "^10.1.0",
     "prettier": "^3.0.3",
     "prettier-plugin-pkg": "0.18.0",

packages/components/package.json

@@ -50,11 +50,11 @@
     "@builder.io/mitosis-cli": "^0.0.77",
     "@react-docgen/cli": "^1.0.4",
     "cpr": "3.0.1",
-    "eslint": "^8.50.0",
+    "eslint": "^8.51.0",
     "hygen": "^6.2.11",
     "lit": "^2.8.0",
     "nodemon": "3.0.1",
-    "sass": "^1.68.0"
+    "sass": "^1.69.3"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",

packages/components/src/components/header/header.scss

@@ -9,7 +9,6 @@
 	box-shadow: variables.$db-elevation-4;
 	display: flex;
 	flex-direction: column;
-	margin-block-end: variables.$db-spacing-fixed-2xs;
 	position: relative;
 
 	min-block-size: component.$default-mobile-header-height;

packages/components/src/components/infotext/infotext.scss

@@ -8,11 +8,10 @@
 	--db-icon-margin-end: #{variables.$db-spacing-fixed-2xs};
 	@extend %db-overwrite-font-size-sm;
 
-	@include icon-helpers.to-solid-icon();
-
 	display: flex;
 
 	@include icon-helpers.has-no-icon() {
+		@include icon-helpers.to-solid-icon();
 		@include icon-helpers.icon("info");
 	}
 

packages/components/src/components/tag/docs/Angular.md

@@ -21,8 +21,11 @@ import { DBTagModule } from '@db-ui/ngx-components';
 ```html app.component.html
 <!-- app.component.html -->
 <db-tag><db-button>Tag as Button</db-button></db-tag>
-<db-tag><db-link>Tag as Link</db-link></db-tag>
+<db-tag>
+	<db-link> Tag as Link </db-link>
+</db-tag>
 <db-tag><db-checkbox>Tag as Checkbox</db-checkbox></db-tag>
 <db-tag><db-radio>Tag as Radio</db-radio></db-tag>
 <db-tag>Static Tag</db-tag>
+<db-tag [overflow]="true"><span>Static Tag with overflow</span></db-tag>
 ```

packages/components/src/components/tag/docs/React.md

@@ -8,13 +8,26 @@ For general installation and configuration take a look at the [react-components]
 // App.tsx
 import { DBTag } from "@db-ui/react-components";
 
-const App = () => <>
-	<DBTag><DBButton>Tag as Button</DBButton></DBTag>
-	<DBTag><DBLink>Tag as Link</DBLink></DBTag>
-	<DBTag><DBCheckbox>Tag as Checkbox</DBCheckbox></DBTag>
-	<DBTag><DBRadio>Tag as Radio</DBRadio></DBTag>
-	<DBTag>Static Tag</DBTag>
-	</>;
+const App = () => (
+	<>
+		<DBTag>
+			<DBButton>Tag as Button</DBButton>
+		</DBTag>
+		<DBTag>
+			<DBLink>Tag as Link</DBLink>
+		</DBTag>
+		<DBTag>
+			<DBCheckbox>Tag as Checkbox</DBCheckbox>
+		</DBTag>
+		<DBTag>
+			<DBRadio>Tag as Radio</DBRadio>
+		</DBTag>
+		<DBTag>Static Tag</DBTag>
+		<DBTag overflow={true}>
+			<span>Static Tag with overflow</span>
+		</DBTag>
+	</>
+);
 
 export default App;
 ```

packages/components/src/components/tag/docs/Vue.md

@@ -12,9 +12,14 @@ import { DBTag } from "@db-ui/v-components";
 
 <template>
 	<DBTag><DBButton>Tag as Button</DBButton></DBTag>
-	<DBTag><DBLink>Tag as Link</DBLink></DBTag>
+	<DBTag>
+		<DBLink> Tag as Link </DBLink>
+	</DBTag>
 	<DBTag><DBCheckbox>Tag as Checkbox</DBCheckbox></DBTag>
 	<DBTag><DBRadio>Tag as Radio</DBRadio></DBTag>
 	<DBTag>Static Tag</DBTag>
+	<DBTag :overflow="true">
+		<span>Static Tag with overflow</span>
+	</DBTag>
 </template>
 ```

packages/components/src/components/tag/tag.scss

@@ -15,8 +15,7 @@
 		@include icon-helpers.is-icon-text-replace();
 		padding: 0;
 
-		label,
-		span {
+		label {
 			@include icon-helpers.is-icon-text-replace();
 		}
 	}
@@ -51,15 +50,9 @@
 	inline-size: fit-content;
 	position: relative;
 
-	&:not([data-emphasis="strong"]) {
-		@extend %component-border;
-	}
-
-	&:has(input) {
+	&:not(:has(#{tag-components.$interactive-selectors})),
+	&:has(.db-tab-remove-button) {
 		@extend %component-border;
-	}
-
-	&:not(:has(#{tag-components.$interactive-selectors})) {
 		@include tag-components.get-tag-colors();
 	}
 
@@ -80,17 +73,26 @@
 	position: relative;
 
 	input {
+		@extend %default-transition;
+		@extend %component-border;
 		appearance: none;
-		border: none;
 		inline-size: 100%;
-		block-size: 100%;
+		block-size: inherit;
 		border-radius: component.$default-border-radius;
 		position: absolute;
 
+		&:not(:checked) {
+			--db-current-base-color: #{variables.$db-colors-neutral-bg};
+
+			&:not(:hover) {
+				--db-current-base-color-alpha: 0%;
+			}
+		}
+
 		&:checked {
+			border-width: component.$default-border-height;
+
 			&[type="checkbox"] {
-				// overwrite for checkbox
-				@include color-variants.bg-transparent-interactive();
 				color: var(--db-current-color);
 			}
 
@@ -100,51 +102,97 @@
 		}
 	}
 
-	label,
-	span {
+	a {
+		@extend %default-transition;
+		@include color-variants.bg-transparent-interactive(false);
+		display: inline-flex;
+		text-decoration: none;
+
+		&::after {
+			--db-icon-margin-start: 0;
+			content: "" !important;
+		}
+	}
+
+	.db-link {
+		&:hover,
+		&:active {
+			color: inherit;
+		}
+	}
+
+	label {
 		@extend %db-overwrite-font-size-sm;
 		margin-inline-start: 0;
+		z-index: 1;
+	}
+
+	&:not(:has(dbbutton,db-button)):has(
+			button:not(.db-tab-remove-button)
+		),
+	&:has(:is(dbbutton,db-button):not(.db-tab-remove-button), a, input) {
+		border: none;
+	}
+
+	button,
+	input:checked {
+		@include color-variants.bg-transparent-interactive();
+		@include color-variants.get-variant-bg-color(0.08);
+	}
+
+	&:not([data-emphasis="strong"]) {
+		input[type="radio"]:checked {
+			&:enabled {
+				&:hover,
+				&:active {
+					--db-current-base-color-alpha: 92%;
+				}
+			}
+		}
 	}
 
 	button,
 	a {
 		@extend %db-overwrite-font-size-sm;
-		border: transparent;
-		block-size: 100%;
+		@extend %component-border;
+		@include color-variants.get-variant-bg-color(0.08);
+		block-size: inherit;
 		padding: 0 variables.$db-spacing-fixed-2xs;
 		border-radius: component.$default-border-radius;
 	}
 
-	a {
-		display: inline-flex;
-		text-decoration: none;
-
-		&::after {
-			--db-icon-margin-start: 0;
-			content: "" !important;
-		}
+	db-button,
+	dbbutton,
+	db-checkbox,
+	dbcheckbox,
+	db-radio,
+	dbradio,
+	db-link,
+	dblink {
+		// angular workaround
+		block-size: inherit;
 	}
 
 	&[data-disabled="true"] {
 		opacity: component.$default-disabled-opacity;
 		pointer-events: none;
 	}
 
-	.db-button[data-size="small"] {
-		border-radius: functions.to-rem(3);
-		block-size: 100%;
-	}
-
 	&[data-overflow="true"] {
 		max-inline-size: variables.$db-sizing-2xl;
-		flex-wrap: wrap;
-		flex-direction: column-reverse;
-		overflow: hidden;
+
+		& > * {
+			inline-size: 100%;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
 	}
 
 	.db-tab-remove-button {
 		&:is(button),
 		button {
+			@include color-variants.get-variant-bg-color(0);
 			margin-inline-start: variables.$db-spacing-fixed-2xs;
 			block-size: 100%;
 		}

packages/components/src/styles/_icon-passing.scss

@@ -8,19 +8,12 @@
 			inset-block-start: calc(50% - 0.5em);
 			inset-inline-start: $inline-start;
 			pointer-events: none;
+			z-index: 1;
 		}
 
-		> a,
-		> dblink > a,
-		> db-link > a,
-		> button,
-		> dbbutton > button,
-		> db-button > button,
-		> label,
-		> dbradio > label,
-		> db-radio > label,
-		> db-checkbox > label,
-		> dbcheckbox > label {
+		a,
+		button,
+		label {
 			padding-inline-start: calc(
 				#{$inline-start} + #{icon-helpers.$default-icon-margin-end} +
 					var(--db-base-font-size) * var(--db-base-line-height)