@db-ux/core-components 4.6.1 → 4.7.0-tabs-34782eb

package/build/components/tabs/tabs.scss

@@ -4,37 +4,25 @@
 @use "../../styles/internal/db-puls";
 @use "@db-ux/core-foundations/build/styles/helpers";
 
-$max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
-
-%angular-workaround {
-	db-tab-list,
-	dbtablist {
-		@each $index in $max-tabs {
-			&:has([id$="-tab-#{$index}"]:checked) {
-				~ dbtabpanel > [id$="-tab-panel-#{$index}"],
-				~ db-tab-panel > [id$="-tab-panel-#{$index}"] {
-					@include helpers.display(block);
-				}
-			}
-		}
-	}
-}
+$pulse-gap-offset: calc(
+	#{variables.$db-border-width-xs} + #{variables.$db-spacing-fixed-2xs}
+);
 
 %horizontal-pulse {
 	.db-tab-item {
 		@include db-puls.set-db-puls-horizontal;
 
-		&:has(input:checked) {
+		&::after {
+			inset-block-end: calc(
+				-1 * #{$pulse-gap-offset}
+			) !important; // overrides inset-block shorthand set in _db-puls.scss
+		}
+
+		&[aria-selected="true"] {
 			@include db-puls.show-db-puls-horizontal;
 
 			&::after {
-				inset-block-end: calc(
-					-1 *
-						(
-							#{variables.$db-spacing-fixed-2xs} +
-								#{variables.$db-border-width-xs}
-						)
-				);
+				inline-size: 100%;
 			}
 		}
 	}
@@ -45,12 +33,16 @@ $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 		@include db-puls.set-db-puls-vertical;
 
 		&::after {
-			inset-inline-start: 0;
-			z-index: -2;
+			inset-inline: calc(-1 * var(--db-tabs-line-gap-vertical, 0px)) auto;
+			z-index: 5;
 		}
 
-		&:has(input:checked) {
+		&[aria-selected="true"] {
 			@include db-puls.show-db-puls-vertical;
+
+			&::after {
+				block-size: 100%;
+			}
 		}
 	}
 }
@@ -62,303 +54,291 @@ $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 	position: absolute;
 }
 
-@mixin angular-button-workaround() {
-	> .db-button,
-	&:is(.db-button) {
-		@content;
-	}
-}
-
 .db-tabs {
 	$db-tabs-z-index-tab-list: 20;
-	$db-tabs-z-index-button-background: 21;
-	$db-tabs-z-index-button: 22;
 
-	@extend %angular-workaround;
 	@include helpers.display(flex);
 
 	inline-size: 100%;
 	position: relative;
 
 	.db-tab-panel {
-		padding: 0 variables.$db-spacing-fixed-xs;
+		padding: variables.$db-spacing-fixed-xs;
+		position: relative;
+		z-index: 1;
 	}
 
 	.db-tab-list {
-		max-inline-size: 100%;
+		position: relative;
 		z-index: $db-tabs-z-index-tab-list;
 
-		@each $index in $max-tabs {
-			&:has([id$="-tab-#{$index}"]:checked)
-				~ [id$="-tab-panel-#{$index}"] {
-				@include helpers.display(block);
-			}
+		db-tab-item,
+		dbtabitem {
+			display: contents;
 		}
 	}
 
-	.db-tab-item {
-		@extend %db-puls;
-	}
-
-	/*
-	Variant Orientation HORIZONTAL
- 	*/
 	&:not([data-orientation="vertical"]) {
 		flex-flow: column wrap;
 
-		.db-tab-panel {
-			inline-size: 100%;
-		}
-
 		.db-tab-list {
-			/* horizontal track for pulse */
-			&::before {
-				@extend %pulse-track;
-
-				block-size: variables.$db-border-width-xs;
-				inset-inline: variables.$db-spacing-fixed-xs;
-
-				/* top position equals sum of: margin xs + padding xs + line-height + padding xs + margin 2xs */
-				inset-block-start: calc(
-					3 * #{variables.$db-spacing-fixed-xs} +
-						#{variables.$db-spacing-fixed-2xs} +
-						#{form-components.$font-size-height}
-				);
-			}
+			padding: variables.$db-spacing-fixed-xs
+				variables.$db-spacing-fixed-xs 0 variables.$db-spacing-fixed-xs;
 
-			> ul {
-				@extend %horizontal-pulse;
+			@extend %horizontal-pulse;
 
-				overflow: auto hidden;
-				inline-size: 100%;
-
-				.db-tab-item {
-					margin-block: variables.$db-spacing-fixed-xs
-						calc(
-							2 * #{variables.$db-spacing-fixed-2xs} +
-								#{variables.$db-border-width-xs}
-						);
-				}
-
-				db-tab-item,
-				dbtabitem {
-					&:first-of-type {
-						.db-tab-item {
-							margin-inline-start: variables.$db-spacing-fixed-xs;
-						}
-					}
+			background-image: linear-gradient(
+				colors.$db-adaptive-bg-basic-transparent-semi-default,
+				colors.$db-adaptive-bg-basic-transparent-semi-default
+			);
+			background-position: left bottom;
+			background-repeat: no-repeat;
 
-					&:last-of-type {
-						.db-tab-item {
-							margin-inline-end: variables.$db-spacing-fixed-xs;
-						}
-					}
-				}
+			// Draw baseline flush with the first and last tab-item (content-box excludes padding).
+			background-origin: content-box;
+			background-size: 100% variables.$db-border-width-xs;
 
-				&:not(:has(db-tab-item, dbtabitem)) {
-					.db-tab-item {
-						&:first-of-type {
-							margin-inline-start: variables.$db-spacing-fixed-xs;
-						}
+			.db-tab-item {
+				// stylelint-disable-next-line db-ux/use-spacings
+				margin-block-end: $pulse-gap-offset;
+			}
 
-						&:last-of-type {
-							margin-inline-end: variables.$db-spacing-fixed-xs;
-						}
-					}
-				}
+			&[role="tablist"],
+			.db-tab-list {
+				display: flex;
+				align-items: stretch;
+				overflow: auto;
+				inline-size: 100%;
 			}
 		}
 	}
 
-	/*
-	Variant Orientation VERTICAL
-	 */
 	&[data-orientation="vertical"] {
 		flex-direction: row;
 
-		.db-tab-panel {
-			padding: variables.$db-spacing-fixed-xs 0;
-		}
-
 		.db-tab-list {
-			$width: var(
-				--db-tab-list-vertical-width,
-				#{variables.$db-sizing-3xl}
-			);
+			--db-tabs-line-gap-vertical: #{$pulse-gap-offset};
 
 			/*
 			min and nominal size must both be set to ensure
 			- min-inline-size: tab-list is not displayed narrower than defined
 			- max-inline-size: tab-list is not displayed wider than defined
 			 */
-			/* stylelint-disable-next-line db-ux/use-sizing */
-			min-inline-size: $width;
-			/* stylelint-disable-next-line db-ux/use-sizing */
-			max-inline-size: $width;
-
-			/* horizontal space to the tab panels */
-			padding-inline-end: variables.$db-spacing-fixed-xs;
-
-			/* ensures that tab-list (track) is only as high as all the tab-items together if open tab-panel is higher */
+			min-inline-size: variables.$db-sizing-3xl;
+			max-inline-size: variables.$db-sizing-3xl;
+			// stylelint-disable-next-line db-ux/use-spacings
+			padding-inline: variables.$db-spacing-fixed-xs
+				var(--db-tabs-line-gap-vertical);
 			margin-block-end: auto;
 
-			.db-tab-item {
-				label {
-					position: relative;
-				}
-
-				&:has(input:focus-visible),
-				&:hover {
-					inline-size: fit-content;
-
-					label {
-						overflow: visible;
-					}
-				}
-			}
+			@extend %vertical-pulse;
 
-			/* vertical track for pulse */
 			&::before {
 				@extend %pulse-track;
 
-				inline-size: variables.$db-border-width-xs;
-				inset-block: variables.$db-spacing-fixed-xs;
+				display: block;
 				inset-inline-start: 0;
+				inset-block: 0;
+				inline-size: variables.$db-border-width-xs;
+				z-index: 1;
 			}
 
-			> ul {
-				@extend %vertical-pulse;
-
+			&[role="tablist"],
+			.db-tab-list {
+				display: flex;
 				flex-direction: column;
-				block-size: 100%;
-
-				&:not(:has(db-tab-item, dbtabitem)) {
-					.db-tab-item {
-						&:first-of-type {
-							margin-block-start: variables.$db-spacing-fixed-xs;
-						}
-
-						&:last-of-type {
-							margin-block-end: variables.$db-spacing-fixed-xs;
-						}
-					}
-				}
+				align-items: flex-start;
 			}
 		}
+	}
+
+	&[data-tab-item-width="full"] {
+		.db-tab-list {
+			inline-size: 100%;
+		}
 
 		.db-tab-item {
-			$padding-start-calc: calc(
-				#{variables.$db-border-width-xs} +
-					#{variables.$db-spacing-fixed-2xs}
-			);
+			flex: 1 0 0;
+			inline-size: 0;
+			max-inline-size: none;
+			justify-content: flex-start;
+		}
 
-			padding-inline-start: $padding-start-calc;
+		&[data-tab-item-alignment="center"] .db-tab-item {
+			text-align: center;
+			justify-content: center;
+		}
 
-			input {
-				padding-inline-start: $padding-start-calc;
-			}
+		&[data-tab-item-alignment="end"] .db-tab-item {
+			text-align: end;
+			justify-content: end;
 		}
+	}
 
-		db-tab-item,
-		dbtabitem {
-			&:first-of-type {
-				.db-tab-item {
-					margin-block-start: variables.$db-spacing-fixed-xs;
-				}
+	&[data-scroll-behavior="scrollbar"] {
+		$db-tabs-z-index-track: 19;
+
+		&:not([data-orientation="vertical"]) {
+			// Keep the track outside the scrolling tab-list so the native scrollbar cannot cover it.
+			&::before {
+				content: "";
+				position: absolute;
+				z-index: $db-tabs-z-index-track;
+				inset-block-start: calc(
+					#{variables.$db-sizing-md} +
+						#{variables.$db-spacing-fixed-xs} +
+						#{variables.$db-border-width-xs}
+				);
+				inset-inline: variables.$db-spacing-fixed-xs;
+				block-size: variables.$db-border-width-xs;
+				background-color: colors.$db-adaptive-bg-basic-transparent-semi-default;
+				pointer-events: none;
 			}
 
-			&:last-of-type {
-				.db-tab-item {
-					margin-block-end: variables.$db-spacing-fixed-xs;
-				}
+			[data-density="functional"] &::before {
+				inset-block-start: calc(
+					#{variables.$db-sizing-sm} +
+						#{variables.$db-spacing-fixed-xs} +
+						#{variables.$db-border-width-xs}
+				);
 			}
-		}
-	}
 
-	&[data-width="full"] {
-		.db-tab-list {
-			inline-size: 100%;
-		}
+			[data-density="expressive"] &::before {
+				inset-block-start: calc(
+					#{variables.$db-sizing-lg} +
+						#{variables.$db-spacing-fixed-xs} +
+						#{variables.$db-border-width-xs}
+				);
+			}
 
-		.db-tab-item,
-		.db-tab-item label {
-			inline-size: 100%;
-		}
+			.db-tab-list {
+				background-image: none;
 
-		&[data-alignment="center"] {
-			.db-tab-item label {
-				text-align: center;
-				justify-content: center;
+				&::before {
+					content: none;
+				}
 			}
 		}
 	}
 
 	&[data-scroll-behavior="arrows"] {
-		.db-tab-list {
-			> ul {
-				&::-webkit-scrollbar {
-					display: none;
-				}
-			}
+		$db-tabs-z-index-button-background: 21;
+		$db-tabs-z-index-button: 22;
+		$db-tabs-z-index-track: 19;
+
+		.db-tab-list::-webkit-scrollbar {
+			display: none;
 		}
 
-		&:has(.tabs-scroll-left) {
+		&:not([data-orientation="vertical"]) {
+			// Track für Arrow-Buttons-Modus als ::before Pseudo-Element auf .db-tabs
 			&::before {
 				content: "";
+				position: absolute;
+				z-index: $db-tabs-z-index-track;
+				inset-block-start: calc(
+					#{variables.$db-sizing-md} +
+						#{variables.$db-border-width-2xs}
+				);
+				inset-inline: 0;
+				block-size: variables.$db-border-width-xs;
+				background-color: colors.$db-adaptive-bg-basic-transparent-semi-default;
 			}
-		}
 
-		&:has(.tabs-scroll-right) {
-			&::after {
-				content: "";
+			[data-density="functional"] &::before {
+				inset-block-start: calc(
+					#{variables.$db-sizing-sm} +
+						#{variables.$db-border-width-2xs}
+				);
 			}
-		}
 
-		&:has(.db-button) {
-			&::before,
-			&::after {
-				position: absolute;
-				z-index: $db-tabs-z-index-button-background;
-				background-color: colors.$db-adaptive-bg-basic-level-1-default;
-				inline-size: variables.$db-sizing-md;
-				block-size: calc(
-					#{variables.$db-spacing-fixed-sm} +
-						#{variables.$db-sizing-md}
+			[data-density="expressive"] &::before {
+				inset-block-start: calc(
+					#{variables.$db-sizing-lg} +
+						#{variables.$db-border-width-2xs}
 				);
-				flex: 0 0 auto;
 			}
 
-			&::before {
-				inset-inline-start: 0;
+			.db-tab-list {
+				// stylelint-disable-next-line db-ux/use-spacings
+				padding: 0 0 $pulse-gap-offset;
+				margin-block-start: 0;
+				background-image: none;
+
+				&::before {
+					content: none;
+				}
+
+				.db-tab-item {
+					margin-block-end: 0;
+
+					&::after {
+						inset-block-end: calc(
+							-1 *
+								(
+									#{variables.$db-spacing-fixed-xs} -
+										#{variables.$db-border-width-2xs}
+								)
+						) !important;
+					}
+				}
 			}
 
-			&::after {
-				inset-inline-end: 0;
+			.tabs-scroll-start,
+			.tabs-scroll-end {
+				position: absolute;
+				z-index: $db-tabs-z-index-button;
+				inset-block-start: 0;
+				aspect-ratio: unset;
+				min-block-size: unset;
+				border-block-width: 0;
+				padding-block: variables.$db-spacing-fixed-xs
+					calc(
+						#{variables.$db-spacing-fixed-xs} + #{$pulse-gap-offset}
+					);
+				align-items: flex-start;
+				background-color: colors.$db-adaptive-bg-basic-level-1-default;
+
+				@include helpers.hover {
+					background-color: colors.$db-adaptive-bg-basic-level-1-hovered;
+				}
+
+				@include helpers.active {
+					background-color: colors.$db-adaptive-bg-basic-level-1-pressed;
+				}
+
+				@media screen and (forced-colors: active) {
+					border-block: variables.$db-border-width-xs solid
+						transparent;
+					inset-block-start: calc(
+						-1 * #{variables.$db-border-width-xs}
+					);
+				}
+
+				[data-density="functional"] & {
+					padding-block: variables.$db-spacing-fixed-2xs
+						calc(
+							#{variables.$db-spacing-fixed-2xs} +
+								#{$pulse-gap-offset}
+						);
+				}
+
+				[data-density="expressive"] & {
+					padding-block: variables.$db-spacing-fixed-sm
+						calc(
+							#{variables.$db-spacing-fixed-sm} +
+								#{$pulse-gap-offset}
+						);
+				}
 			}
-		}
 
-		/*
-		 * Scroll left / right buttons
-		 */
-		.tabs-scroll-left {
-			@include angular-button-workaround {
+			.tabs-scroll-start {
 				inset-inline-start: 0;
 			}
-		}
 
-		.tabs-scroll-right {
-			@include angular-button-workaround {
+			.tabs-scroll-end {
 				inset-inline-end: 0;
 			}
 		}
-
-		.tabs-scroll-left,
-		.tabs-scroll-right {
-			@include angular-button-workaround {
-				position: absolute;
-				z-index: $db-tabs-z-index-button;
-				inset-block: variables.$db-spacing-fixed-xs;
-			}
-		}
 	}
 }

package/build/components/tag/tag.css

@@ -860,7 +860,6 @@
   border-color: var(--db-tag-border-color);
   background-color: var(--db-adaptive-bg-basic-level-1-default);
   color: var(--db-adaptive-on-bg-basic-emphasis-80-default);
-  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
 }
 .db-tag:has(label, button:not(.db-tab-remove-button), a)::before, .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]):not(:has(dbbutton)) button:not(.db-tab-remove-button)::before,
 .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) dbbutton:not(.db-tab-remove-button) > button::before,
@@ -877,6 +876,15 @@
 .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] a::after, .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) label:has(input)::after, .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] label:has(input)::after, .db-tag[data-emphasis=strong]:has(label, button:not(.db-tab-remove-button), a):has(input):not(:has(input:checked))::after {
   --db-icon-color: var(--db-adaptive-on-bg-basic-emphasis-80-default);
 }
+.db-tag:has(label, button:not(.db-tab-remove-button), a), .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]):not(:has(dbbutton)) button:not(.db-tab-remove-button),
+.db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) dbbutton:not(.db-tab-remove-button) > button,
+.db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) db-button > button,
+.db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) a, .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak]:not(:has(dbbutton)) button:not(.db-tab-remove-button),
+.db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] dbbutton:not(.db-tab-remove-button) > button,
+.db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] db-button > button,
+.db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] a, .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) label:has(input), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] label:has(input), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong]:has(input):not(:has(input:checked)) {
+  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
+}
 .db-tag:hover:not(:disabled,
 [aria-disabled=true],
 [tabindex="-1"],
@@ -1314,7 +1322,6 @@
   border-color: var(--db-tag-border-color);
   background-color: var(--db-adaptive-bg-vibrant-default);
   color: var(--db-adaptive-on-bg-vibrant-default);
-  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
 }
 .db-tag:not(:has(label, button:not(.db-tab-remove-button), a)):not([data-semantic])[data-emphasis=strong] .db-tab-remove-button::before, .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button::before, .db-tag:has(.db-tab-remove-button):not([data-semantic])[data-emphasis=strong] .db-tab-remove-button::before, .db-tag:has(.db-tab-remove-button)[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button::before, .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) label:has(input[type=checkbox]:checked)::before, .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] label:has(input[type=checkbox]:checked)::before, .db-tag[data-emphasis=strong]:has(label, button:not(.db-tab-remove-button), a)::before, .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong]:not(:has(dbbutton)) button:not(.db-tab-remove-button)::before,
 .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] dbbutton:not(.db-tab-remove-button) > button::before,
@@ -1325,6 +1332,12 @@
 .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] a::after, .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] label:has(input[type=checkbox]:checked)::after {
   --db-icon-color: var(--db-adaptive-on-bg-vibrant-default);
 }
+.db-tag:not(:has(label, button:not(.db-tab-remove-button), a)):not([data-semantic])[data-emphasis=strong] .db-tab-remove-button, .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button, .db-tag:has(.db-tab-remove-button):not([data-semantic])[data-emphasis=strong] .db-tab-remove-button, .db-tag:has(.db-tab-remove-button)[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button, .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) label:has(input[type=checkbox]:checked), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] label:has(input[type=checkbox]:checked), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong], .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong]:not(:has(dbbutton)) button:not(.db-tab-remove-button),
+.db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] dbbutton:not(.db-tab-remove-button) > button,
+.db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] db-button > button,
+.db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] a, .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] label:has(input[type=checkbox]:checked) {
+  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
+}
 .db-tag:not(:has(label, button:not(.db-tab-remove-button), a)):not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled,
 [aria-disabled=true],
 [tabindex="-1"],
@@ -1739,20 +1752,24 @@
 [data-no-text=true].db-tag {
   --icon-margin-after: 0;
   font-size: 0 !important;
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-  padding: 0;
-  gap: 0;
 }
 [data-no-text=true].db-tag::before {
   --db-icon-margin-end: 0;
 }
+[data-no-text=true].db-tag {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  padding: 0;
+  gap: 0;
+}
 [data-no-text=true].db-tag label {
   font-size: 0 !important;
-  /* stylelint-disable-next-line at-rule-empty-line-before */
 }
 [data-no-text=true].db-tag label::before {
   --db-icon-margin-end: 0;
 }
+[data-no-text=true].db-tag label {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+}
 .db-tag:not([data-no-text=true]) {
   --db-padding-inline-start: var(--db-spacing-fixed-2xs);
   /* stylelint-disable-next-line db-ux/use-spacings */
@@ -1991,7 +2008,6 @@
 
 .db-tag[data-show-check-state=true] label {
   --db-icon-margin-start: var(--db-spacing-fixed-2xs);
-  /* TODO: maybe we could get rid of an expensive :has selector by defining this icon on the input itself */
 }
 .db-tag[data-show-check-state=true] label:not([data-show-icon-trailing=false])::after {
   --db-icon-trailing: "circle";
@@ -2003,6 +2019,9 @@
     content: var(--db-icon-trailing, attr(data-icon-trailing))/"";
   }
 }
+.db-tag[data-show-check-state=true] label {
+  /* TODO: maybe we could get rid of an expensive :has selector by defining this icon on the input itself */
+}
 .db-tag[data-show-check-state=true] label:has(input:checked):not([data-show-icon-trailing=false])::after {
   --db-icon-trailing: "check_circle";
   margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
@@ -2016,11 +2035,13 @@
 .db-tag label {
   inline-size: 100%;
   margin-inline-start: 0;
-  align-items: center;
 }
 .db-tag label:not([hidden]) {
   display: flex;
 }
+.db-tag label {
+  align-items: center;
+}
 @media (forced-colors: active) {
   .db-tag label:not(:has(input:checked)) {
     border-style: dashed;
@@ -2052,13 +2073,13 @@
 .db-tag label input:checked:not([data-show-icon-leading=false])::before {
   content: none;
 }
+.db-tag a:not([hidden]) {
+  display: inline-flex;
+}
 .db-tag a {
   align-items: center;
   text-decoration: none;
 }
-.db-tag a:not([hidden]) {
-  display: inline-flex;
-}
 .db-tag a::after {
   --db-icon-margin-start: 0;
   --db-icon-font-size: 0;