@db-ux/core-components 4.14.0-shell-52d18db → 5.0.0

package/build/components/tabs/tabs.scss

@@ -2,40 +2,32 @@
 @use "@db-ux/core-foundations/build/styles/colors";
 @use "../../styles/internal/form-components";
 @use "../../styles/internal/indicator";
-@use "../../styles/internal/scrollbar";
 @use "@db-ux/core-foundations/build/styles/helpers";
 
-$max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+$indicator-gap-offset: calc(
+	#{variables.$db-border-width-xs} + #{variables.$db-spacing-fixed-2xs}
+);
 
-%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);
-				}
-			}
-		}
-	}
-}
+// Space the focus outline needs outside the tab box: outline-offset + outline width.
+$focus-outline-reach: calc(
+	#{variables.$db-border-width-xs} + #{variables.$db-border-width-2xs}
+);
 
 %horizontal-indicator {
 	.db-tab-item {
 		@include indicator.set-indicator-horizontal;
 
-		&:has(input:checked) {
+		&::after {
+			inset-block-end: calc(
+				-1 * #{$indicator-gap-offset}
+			) !important; // overrides inset-block shorthand set in _indicator.scss
+		}
+
+		&[aria-selected="true"] {
 			@include indicator.show-indicator-horizontal;
 
 			&::after {
-				inset-block-end: calc(
-					-1 *
-						(
-							#{variables.$db-spacing-fixed-2xs} +
-								#{variables.$db-border-width-xs}
-						)
-				);
+				inline-size: 100%;
 			}
 		}
 	}
@@ -46,12 +38,16 @@ $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 		@include indicator.set-indicator-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 indicator.show-indicator-vertical;
+
+			&::after {
+				block-size: 100%;
+			}
 		}
 	}
 }
@@ -66,254 +62,303 @@ $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 .db-tabs {
 	$db-tabs-z-index-tab-list: 20;
 
-	@extend %angular-workaround;
 	@include helpers.display(flex);
 
 	inline-size: 100%;
 	position: relative;
 
-	.db-tab-panel {
-		padding: 0 variables.$db-spacing-fixed-xs;
-	}
-
 	.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 %indicator;
-	}
-
-	/*
-	Variant Orientation HORIZONTAL
- 	*/
 	&:not([data-orientation="vertical"]) {
 		flex-flow: column wrap;
 
-		.db-tab-panel {
-			inline-size: 100%;
-		}
-
 		.db-tab-list {
-			/* horizontal track for indicator */
-			&::before {
-				@extend %indicator-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}
-				);
-			}
-
-			> ul {
-				@extend %horizontal-indicator;
-
-				overflow: auto hidden;
-				inline-size: 100%;
+			padding: variables.$db-spacing-fixed-xs
+				variables.$db-spacing-fixed-xs 0 variables.$db-spacing-fixed-xs;
 
-				.db-tab-item {
-					margin-block: variables.$db-spacing-fixed-xs
-						calc(
-							2 * #{variables.$db-spacing-fixed-2xs} +
-								#{variables.$db-border-width-xs}
-						);
-				}
+			@extend %horizontal-indicator;
 
-				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: $indicator-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: #{$indicator-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-indicator;
 
-			/* vertical track for indicator */
 			&::before {
 				@extend %indicator-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-indicator;
-
+			&[role="tablist"],
+			.db-tab-list {
+				display: flex;
 				flex-direction: column;
-				block-size: 100%;
+				align-items: flex-start;
+			}
 
-				&:not(:has(db-tab-item, dbtabitem)) {
-					.db-tab-item {
-						&:first-of-type {
-							margin-block-start: variables.$db-spacing-fixed-xs;
-						}
+			.db-tab-item-label {
+				inline-size: 100%;
+			}
 
-						&:last-of-type {
-							margin-block-end: variables.$db-spacing-fixed-xs;
-						}
-					}
-				}
+			.db-tab-item-label-end-slot {
+				margin-inline-start: auto;
 			}
 		}
+	}
 
-		.db-tab-item {
-			$padding-start-calc: calc(
-				#{variables.$db-border-width-xs} +
-					#{variables.$db-spacing-fixed-2xs}
-			);
+	&[data-tab-item-width="full"] {
+		.db-tab-list {
+			inline-size: 100%;
+		}
 
-			padding-inline-start: $padding-start-calc;
+		&:not([data-orientation="vertical"]) .db-tab-item {
+			flex: 1 0 0;
+			inline-size: 0;
+			max-inline-size: none;
+			justify-content: flex-start;
+		}
 
-			input {
-				padding-inline-start: $padding-start-calc;
-			}
+		&[data-tab-item-alignment="center"] .db-tab-item {
+			text-align: center;
+			justify-content: center;
 		}
 
-		db-tab-item,
-		dbtabitem {
-			&:first-of-type {
-				.db-tab-item {
-					margin-block-start: variables.$db-spacing-fixed-xs;
-				}
+		&[data-tab-item-alignment="end"] .db-tab-item {
+			text-align: end;
+			justify-content: end;
+		}
+	}
+
+	&[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-density="expressive"] &::before {
+				inset-block-start: calc(
+					#{variables.$db-sizing-lg} +
+						#{variables.$db-spacing-fixed-xs} +
+						#{variables.$db-border-width-xs}
+				);
+			}
+
+			.db-tab-list {
+				background-image: none;
+
+				&::before {
+					content: none;
 				}
 			}
 		}
 	}
 
-	&[data-width="full"] {
+	&[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 {
-			inline-size: 100%;
+			scrollbar-width: none;
 		}
 
-		.db-tab-item,
-		.db-tab-item label {
-			inline-size: 100%;
-		}
+		&: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;
+			}
 
-		&[data-alignment="center"] {
-			.db-tab-item label {
-				text-align: center;
-				justify-content: center;
+			[data-density="functional"] &::before {
+				inset-block-start: calc(
+					#{variables.$db-sizing-sm} +
+						#{variables.$db-border-width-2xs}
+				);
 			}
-		}
-	}
 
-	&[data-scroll-behavior="arrows"] {
-		@include scrollbar.set-overflow-scroll-buttons;
+			[data-density="expressive"] &::before {
+				inset-block-start: calc(
+					#{variables.$db-sizing-lg} +
+						#{variables.$db-border-width-2xs}
+				);
+			}
 
-		.db-tab-list {
-			> ul {
-				@supports (scrollbar-width: none) {
-					scrollbar-width: none;
+			.db-tab-list {
+				// Reserve room for the focus outline (outline-offset + width) at the
+				// top so it isn't clipped by overflow:auto, and compensate with a
+				// negative margin so tabs/track/buttons stay visually in place.
+				// stylelint-disable-next-line db-ux/use-spacings
+				padding: $focus-outline-reach 0 $indicator-gap-offset;
+				// stylelint-disable-next-line db-ux/use-spacings
+				margin-block-start: calc(-1 * #{$focus-outline-reach});
+				background-image: none;
+
+				&::before {
+					content: none;
 				}
 
-				&::-webkit-scrollbar {
-					display: 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;
+					}
 				}
 			}
-		}
 
-		&:has(.overflow-scroll-left-button) {
-			&::before {
-				content: "";
+			.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} +
+							#{$indicator-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} +
+								#{$indicator-gap-offset}
+						);
+				}
+
+				[data-density="expressive"] & {
+					padding-block: variables.$db-spacing-fixed-sm
+						calc(
+							#{variables.$db-spacing-fixed-sm} +
+								#{$indicator-gap-offset}
+						);
+				}
 			}
-		}
 
-		&:has(.overflow-scroll-right-button) {
-			&::after {
-				content: "";
+			.tabs-scroll-start {
+				inset-inline-start: 0;
+
+				&:dir(rtl) {
+					--db-icon: "chevron_right";
+				}
 			}
-		}
 
-		&:has(.db-button) {
-			@include scrollbar.set-overflow-scroll-button-backgrounds;
+			.tabs-scroll-end {
+				inset-inline-end: 0;
+
+				&:dir(rtl) {
+					--db-icon: "chevron_left";
+				}
+			}
 		}
 	}
 }

package/build/components/tag/tag.css

@@ -954,24 +954,12 @@
 [data-no-text=true].db-tag {
   --icon-margin-after: 0;
   font-size: 0 !important;
-}
-[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;
 }
-[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]) {
   padding-inline: var(--db-spacing-fixed-2xs);
 }
@@ -984,7 +972,6 @@
 }
 
 .db-tag {
-  --db-icon-margin-end: 0;
   padding-block: 0;
   block-size: var(--db-sizing-sm);
   min-inline-size: var(--db-sizing-sm);
@@ -1112,9 +1099,6 @@
 .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=informational][data-emphasis=strong]::before, .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=informational][data-emphasis=strong]::after, .db-tag:has(.db-tab-remove-button)[data-semantic=informational][data-emphasis=strong]::before, .db-tag:has(.db-tab-remove-button)[data-semantic=informational][data-emphasis=strong]::after {
   --db-icon-color: var(--db-informational-on-bg-vibrant-default);
 }
-.db-tag:has(label, button:not(.db-tab-remove-button), a) {
-  --db-icon-margin-end: var(--db-spacing-fixed-2xs);
-}
 .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-icon-leading]:not([data-show-icon-leading=false])::before, .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-icon]:not([data-show-icon=false])::before {
   position: absolute;
   inset-block-start: var(--db-icon-passing-inset-block-start, calc(50% - 0.5em));
@@ -1126,7 +1110,7 @@
 .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-icon-leading]:not([data-show-icon-leading=false]) > * > :is(label, button, a), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-icon]:not([data-show-icon=false]) > :is(label, button, a),
 .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-icon]:not([data-show-icon=false]) > * > :is(label, button, a) {
   /* stylelint-disable-next-line db-ux/use-spacings */
-  padding-inline-start: var(--db-icon-passing-padding-inline-start, calc(var(--db-spacing-fixed-2xs) + var(--db-icon-margin-end, var(--db-spacing-fixed-xs)) + var(--db-icon-font-size)));
+  padding-inline-start: var(--db-icon-passing-padding-inline-start, calc(var(--db-spacing-fixed-2xs) + var(--db-spacing-fixed-2xs) + var(--db-icon-font-size, 1lh)));
 }
 .db-tag:has(label, button:not(.db-tab-remove-button), a) input:checked {
   background-color: transparent;
@@ -1175,11 +1159,10 @@
 }
 
 .db-tag[data-show-check-state=true] label {
-  --db-icon-margin-start: var(--db-spacing-fixed-2xs);
+  gap: var(--db-spacing-fixed-2xs);
 }
 .db-tag[data-show-check-state=true] label:not([data-show-icon-trailing=false])::after {
   --db-icon-trailing: "circle";
-  margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
   content: var(--db-icon-trailing, attr(data-icon-trailing));
 }
 @supports (content: ""/"") {
@@ -1192,7 +1175,6 @@
 }
 .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));
   content: var(--db-icon-trailing, attr(data-icon-trailing));
 }
 @supports (content: ""/"") {
@@ -1249,7 +1231,6 @@
   text-decoration: none;
 }
 .db-tag a::after {
-  --db-icon-margin-start: 0;
   --db-icon-font-size: 0;
   content: none !important;
 }

package/build/components/tag/tag.scss

@@ -43,8 +43,6 @@
 }
 
 %db-tag {
-	--db-icon-margin-end: 0;
-
 	@extend %default-interactive-component;
 	@extend %db-overwrite-font-size-sm;
 	@extend %default-button;
@@ -64,9 +62,10 @@
 	}
 
 	&:has(#{tag-components.$interactive-selectors}) {
-		--db-icon-margin-end: #{variables.$db-spacing-fixed-2xs};
-
-		@include icon-passing.icon-passing(variables.$db-spacing-fixed-2xs);
+		@include icon-passing.icon-passing(
+			variables.$db-spacing-fixed-2xs,
+			variables.$db-spacing-fixed-2xs
+		);
 		@include tag-components.get-tag-colors-interactive;
 	}
 
@@ -95,7 +94,7 @@
 
 	&[data-show-check-state="true"] {
 		label {
-			--db-icon-margin-start: #{variables.$db-spacing-fixed-2xs};
+			gap: variables.$db-spacing-fixed-2xs;
 
 			@include icons.set-icon("circle", "after");
 
@@ -165,7 +164,6 @@
 		text-decoration: none;
 
 		&::after {
-			--db-icon-margin-start: 0;
 			--db-icon-font-size: 0;
 
 			content: none !important;