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

package/build/components/tabs/tabs.scss

@@ -4,25 +4,37 @@
 @use "../../styles/internal/db-puls";
 @use "@db-ux/core-foundations/build/styles/helpers";
 
-$pulse-gap-offset: calc(
-	#{variables.$db-border-width-xs} + #{variables.$db-spacing-fixed-2xs}
-);
+$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);
+				}
+			}
+		}
+	}
+}
 
 %horizontal-pulse {
 	.db-tab-item {
 		@include db-puls.set-db-puls-horizontal;
 
-		&::after {
-			inset-block-end: calc(
-				-1 * #{$pulse-gap-offset}
-			) !important; // overrides inset-block shorthand set in _db-puls.scss
-		}
-
-		&[aria-selected="true"] {
+		&:has(input:checked) {
 			@include db-puls.show-db-puls-horizontal;
 
 			&::after {
-				inline-size: 100%;
+				inset-block-end: calc(
+					-1 *
+						(
+							#{variables.$db-spacing-fixed-2xs} +
+								#{variables.$db-border-width-xs}
+						)
+				);
 			}
 		}
 	}
@@ -33,16 +45,12 @@ $pulse-gap-offset: calc(
 		@include db-puls.set-db-puls-vertical;
 
 		&::after {
-			inset-inline: calc(-1 * var(--db-tabs-line-gap-vertical, 0px)) auto;
-			z-index: 5;
+			inset-inline-start: 0;
+			z-index: -2;
 		}
 
-		&[aria-selected="true"] {
+		&:has(input:checked) {
 			@include db-puls.show-db-puls-vertical;
-
-			&::after {
-				block-size: 100%;
-			}
 		}
 	}
 }
@@ -54,291 +62,303 @@ $pulse-gap-offset: calc(
 	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: variables.$db-spacing-fixed-xs;
-		position: relative;
-		z-index: 1;
+		padding: 0 variables.$db-spacing-fixed-xs;
 	}
 
 	.db-tab-list {
-		position: relative;
+		max-inline-size: 100%;
 		z-index: $db-tabs-z-index-tab-list;
 
-		db-tab-item,
-		dbtabitem {
-			display: contents;
+		@each $index in $max-tabs {
+			&:has([id$="-tab-#{$index}"]:checked)
+				~ [id$="-tab-panel-#{$index}"] {
+				@include helpers.display(block);
+			}
 		}
 	}
 
+	.db-tab-item {
+		@extend %db-puls;
+	}
+
+	/*
+	Variant Orientation HORIZONTAL
+ 	*/
 	&:not([data-orientation="vertical"]) {
 		flex-flow: column wrap;
 
-		.db-tab-list {
-			padding: variables.$db-spacing-fixed-xs
-				variables.$db-spacing-fixed-xs 0 variables.$db-spacing-fixed-xs;
-
-			@extend %horizontal-pulse;
+		.db-tab-panel {
+			inline-size: 100%;
+		}
 
-			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;
+		.db-tab-list {
+			/* horizontal track for pulse */
+			&::before {
+				@extend %pulse-track;
 
-			// 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;
+				block-size: variables.$db-border-width-xs;
+				inset-inline: variables.$db-spacing-fixed-xs;
 
-			.db-tab-item {
-				// stylelint-disable-next-line db-ux/use-spacings
-				margin-block-end: $pulse-gap-offset;
+				/* 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}
+				);
 			}
 
-			&[role="tablist"],
-			.db-tab-list {
-				display: flex;
-				align-items: stretch;
-				overflow: auto;
+			> ul {
+				@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;
+						}
+					}
+
+					&:last-of-type {
+						.db-tab-item {
+							margin-inline-end: variables.$db-spacing-fixed-xs;
+						}
+					}
+				}
+
+				&:not(:has(db-tab-item, dbtabitem)) {
+					.db-tab-item {
+						&:first-of-type {
+							margin-inline-start: variables.$db-spacing-fixed-xs;
+						}
+
+						&:last-of-type {
+							margin-inline-end: variables.$db-spacing-fixed-xs;
+						}
+					}
+				}
 			}
 		}
 	}
 
+	/*
+	Variant Orientation VERTICAL
+	 */
 	&[data-orientation="vertical"] {
 		flex-direction: row;
 
+		.db-tab-panel {
+			padding: variables.$db-spacing-fixed-xs 0;
+		}
+
 		.db-tab-list {
-			--db-tabs-line-gap-vertical: #{$pulse-gap-offset};
+			$width: var(
+				--db-tab-list-vertical-width,
+				#{variables.$db-sizing-3xl}
+			);
 
 			/*
 			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
 			 */
-			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);
+			/* 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 */
 			margin-block-end: auto;
 
-			@extend %vertical-pulse;
+			.db-tab-item {
+				label {
+					position: relative;
+				}
+
+				&:has(input:focus-visible),
+				&:hover {
+					inline-size: fit-content;
+
+					label {
+						overflow: visible;
+					}
+				}
+			}
 
+			/* vertical track for pulse */
 			&::before {
 				@extend %pulse-track;
 
-				display: block;
-				inset-inline-start: 0;
-				inset-block: 0;
 				inline-size: variables.$db-border-width-xs;
-				z-index: 1;
+				inset-block: variables.$db-spacing-fixed-xs;
+				inset-inline-start: 0;
 			}
 
-			&[role="tablist"],
-			.db-tab-list {
-				display: flex;
+			> ul {
+				@extend %vertical-pulse;
+
 				flex-direction: column;
-				align-items: flex-start;
-			}
-		}
-	}
+				block-size: 100%;
 
-	&[data-tab-item-width="full"] {
-		.db-tab-list {
-			inline-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;
+						}
+					}
+				}
+			}
 		}
 
 		.db-tab-item {
-			flex: 1 0 0;
-			inline-size: 0;
-			max-inline-size: none;
-			justify-content: flex-start;
-		}
+			$padding-start-calc: calc(
+				#{variables.$db-border-width-xs} +
+					#{variables.$db-spacing-fixed-2xs}
+			);
 
-		&[data-tab-item-alignment="center"] .db-tab-item {
-			text-align: center;
-			justify-content: center;
-		}
+			padding-inline-start: $padding-start-calc;
 
-		&[data-tab-item-alignment="end"] .db-tab-item {
-			text-align: end;
-			justify-content: end;
+			input {
+				padding-inline-start: $padding-start-calc;
+			}
 		}
-	}
-
-	&[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;
+		db-tab-item,
+		dbtabitem {
+			&:first-of-type {
+				.db-tab-item {
+					margin-block-start: 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}
-				);
+			&:last-of-type {
+				.db-tab-item {
+					margin-block-end: variables.$db-spacing-fixed-xs;
+				}
 			}
+		}
+	}
 
-			[data-density="expressive"] &::before {
-				inset-block-start: calc(
-					#{variables.$db-sizing-lg} +
-						#{variables.$db-spacing-fixed-xs} +
-						#{variables.$db-border-width-xs}
-				);
-			}
+	&[data-width="full"] {
+		.db-tab-list {
+			inline-size: 100%;
+		}
 
-			.db-tab-list {
-				background-image: none;
+		.db-tab-item,
+		.db-tab-item label {
+			inline-size: 100%;
+		}
 
-				&::before {
-					content: none;
-				}
+		&[data-alignment="center"] {
+			.db-tab-item label {
+				text-align: center;
+				justify-content: center;
 			}
 		}
 	}
 
 	&[data-scroll-behavior="arrows"] {
-		$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;
+		.db-tab-list {
+			> ul {
+				&::-webkit-scrollbar {
+					display: none;
+				}
+			}
 		}
 
-		&:not([data-orientation="vertical"]) {
-			// Track für Arrow-Buttons-Modus als ::before Pseudo-Element auf .db-tabs
+		&:has(.tabs-scroll-left) {
 			&::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;
 			}
+		}
 
-			[data-density="functional"] &::before {
-				inset-block-start: calc(
-					#{variables.$db-sizing-sm} +
-						#{variables.$db-border-width-2xs}
-				);
+		&:has(.tabs-scroll-right) {
+			&::after {
+				content: "";
 			}
+		}
 
-			[data-density="expressive"] &::before {
-				inset-block-start: calc(
-					#{variables.$db-sizing-lg} +
-						#{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}
 				);
+				flex: 0 0 auto;
 			}
 
-			.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;
-					}
-				}
+			&::before {
+				inset-inline-start: 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}
-						);
-				}
+			&::after {
+				inset-inline-end: 0;
 			}
+		}
 
-			.tabs-scroll-start {
+		/*
+		 * Scroll left / right buttons
+		 */
+		.tabs-scroll-left {
+			@include angular-button-workaround {
 				inset-inline-start: 0;
 			}
+		}
 
-			.tabs-scroll-end {
+		.tabs-scroll-right {
+			@include angular-button-workaround {
 				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;
+			}
+		}
 	}
 }