@db-ux/core-components 4.14.0 → 5.0.0

package/build/components/tab-item/tab-item.css

@@ -1,131 +1,153 @@
 /* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
 /* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
 /* Variants for adaptive components like input, select, notification, ... */
-.db-visually-hidden,
-[data-visually-hidden=true] {
-  position: absolute !important;
-  inset-block-start: 0 !important;
-  inline-size: 1px !important;
-  block-size: 1px !important;
-  overflow: hidden !important;
-  clip: rect(0, 0, 0, 0) !important;
-  white-space: nowrap !important;
-  border: 0 !important;
-  padding: 0 !important;
-  pointer-events: none !important;
+.db-tab-item .db-tab-item-label[data-icon]:not([data-show-icon=false])::before {
+  color: var(--db-icon-color, inherit);
+  display: inline-block;
+  /*** icon - placeholder ***/
+  font-family: var(--db-icon-font-family, var(--db-icon-default-font-family, "db-ux-default", "icon-font-fallback")) !important;
+  font-size: var(--db-icon-font-size, 1.5rem);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: var(--db-icon-font-weight, normal);
+  line-height: 1;
+  /* stylelint-disable-next-line declaration-property-value-no-unknown */
+  speak: none;
+  /* stylelint-disable-next-line declaration-property-value-no-unknown */
+  speak: never;
+  text-transform: none;
+  overflow: clip;
+  vertical-align: var(--db-icon-vertical-align, middle);
+  /* stylelint-disable-next-line db-ux/use-sizing */
+  block-size: var(--db-icon-font-size, 1.5rem);
+  /* stylelint-disable-next-line db-ux/use-sizing */
+  inline-size: var(--db-icon-font-size, 1.5rem);
+  aspect-ratio: 1;
+  flex-shrink: 0;
+  content: var(--db-icon, attr(data-icon));
+}
+@supports (content: ""/"") {
+  .db-tab-item .db-tab-item-label[data-icon]:not([data-show-icon=false])::before {
+    content: var(--db-icon, attr(data-icon))/"";
+  }
+}
+@media aural {
+  .db-tab-item .db-tab-item-label[data-icon]:not([data-show-icon=false])::before {
+    content: none;
+  }
+}
+@media speech {
+  .db-tab-item .db-tab-item-label[data-icon]:not([data-show-icon=false])::before {
+    content: none;
+  }
 }
 
-.db-tab-item input:not([data-disable-focus=true]):focus-visible::before {
-  outline: var(--db-border-width-2xs) solid var(--db-focus-outline-color, var(--db-informational-on-bg-basic-emphasis-70-default));
-  outline-offset: var(--db-border-width-xs);
-  box-shadow: 0 0 0 var(--db-border-width-xs) var(--db-focus-box-shadow-bg-color, transparent);
-}
-.db-tab-item input:not([data-disable-focus=true]):not([type=radio], [role=switch]):focus-visible::before {
+.db-tab-item::after {
+  content: "";
+  position: absolute;
   border-radius: var(--db-border-radius-xs);
+  background: linear-gradient(135deg, var(--db-pride-red, var(--db-brand-on-bg-basic-emphasis-70-default)) 16.7%, var(--db-pride-orange, var(--db-brand-on-bg-basic-emphasis-70-default)) 0, var(--db-pride-orange, var(--db-brand-on-bg-basic-emphasis-70-default)) 33.4%, var(--db-pride-yellow, var(--db-brand-on-bg-basic-emphasis-70-default)) 0, var(--db-pride-yellow, var(--db-brand-on-bg-basic-emphasis-70-default)) 50.1%, var(--db-pride-green, var(--db-brand-on-bg-basic-emphasis-70-default)) 0, var(--db-pride-green, var(--db-brand-on-bg-basic-emphasis-70-default)) 66.8%, var(--db-pride-blue, var(--db-brand-on-bg-basic-emphasis-70-default)) 0, var(--db-pride-blue, var(--db-brand-on-bg-basic-emphasis-70-default)) 83.5%, var(--db-pride-violet, var(--db-brand-on-bg-basic-emphasis-70-default)) 0);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .db-tab-item::after {
+    transition: block-size var(--db-transition-duration-fast) var(--db-transition-timing-emotional), inline-size var(--db-transition-duration-fast) var(--db-transition-timing-emotional);
+  }
 }
 
 .db-tab-item {
-  position: relative;
-}
-.db-tab-item:not([hidden]) {
-  display: inline-flex;
+  border: var(--db-border-width-3xs) solid transparent;
 }
+
 .db-tab-item {
-  list-style-type: "";
-  border-radius: var(--db-border-radius-sm);
-}
-.db-tab-item:has(input:disabled) {
-  opacity: var(--db-opacity-md);
-}
-.db-tab-item label {
+  position: relative;
   background-color: var(--db-adaptive-bg-basic-transparent-full-default);
   padding: var(--db-spacing-fixed-xs);
+  margin: 0;
+  overflow: visible;
   align-items: center;
-}
-.db-tab-item label:not([hidden]) {
-  display: inline-block;
-}
-.db-tab-item label {
+  justify-content: center;
   white-space: nowrap;
-  border: 0;
   border-radius: var(--db-border-radius-sm);
+  font: inherit;
+  color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
+  flex-shrink: 0;
+  max-inline-size: var(--db-sizing-2xl);
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .db-tab-item {
+    transition: background-color var(--db-transition-duration-fast);
+  }
+}
+.db-tab-item .db-tab-item-label {
+  max-inline-size: 100%;
+}
+.db-tab-item .db-tab-item-label:not([hidden]) {
+  display: flex;
+}
+.db-tab-item .db-tab-item-label {
+  align-items: center;
+  gap: var(--db-spacing-fixed-xs);
+}
+.db-tab-item .db-tab-item-label .db-tab-item-label-text {
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
-.db-tab-item label:has(input:disabled) {
-  --db-overwrite-cursor: initial;
+.db-tab-item .db-tab-item-label .db-tab-item-label-end-slot {
+  display: inherit;
+  align-items: center;
+  gap: var(--db-spacing-fixed-xs);
 }
-.db-tab-item label:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)) {
-  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
+.db-tab-item .db-tab-item-label .db-tab-item-label-end-slot:empty {
+  display: none;
 }
-.db-tab-item label:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover {
-  cursor: var(--db-overwrite-cursor, pointer);
-  background-color: var(--db-adaptive-bg-basic-transparent-full-hovered);
+.db-tab-item .db-tab-item-label[data-icon]:not([data-show-icon=false])::before {
+  margin-inline-end: 0;
+  flex-shrink: 0;
 }
-.db-tab-item label:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active {
-  cursor: var(--db-overwrite-cursor, pointer);
-  background-color: var(--db-adaptive-bg-basic-transparent-full-pressed);
+.db-tab-item .db-tab-item-label[data-icon-trailing]:not([data-show-icon-trailing=false])::after {
+  margin-inline-start: 0;
+  flex-shrink: 0;
 }
-.db-tab-item label:has(input:checked) {
-  font-weight: 700;
+[data-orientation=vertical] .db-tab-item .db-tab-item-label {
+  overflow: hidden;
 }
-.db-tab-item label[data-icon] {
-  padding-inline-start: calc(var(--db-spacing-fixed-xs) + var(--db-spacing-fixed-sm) + var(--db-icon-font-size));
+.db-tab-item:not([hidden]) {
+  display: flex;
 }
-.db-tab-item label[data-icon]::before {
-  position: absolute;
-  transform: translateY(-50%);
-  inset-block-start: 50%;
-  inset-inline-start: calc(0% + var(--db-spacing-fixed-xs));
+.db-tab-item::after {
+  inline-size: 0;
+  block-size: var(--db-border-width-xs);
 }
-.db-tab-item label[data-icon-trailing] {
-  padding-inline-end: calc(var(--db-spacing-fixed-xs) + var(--db-spacing-fixed-sm) + var(--db-icon-font-size));
+@media screen and (prefers-reduced-motion: no-preference) {
+  .db-tab-item::after {
+    transition: block-size var(--db-transition-duration-fast) var(--db-transition-timing-emotional), inline-size var(--db-transition-duration-fast) var(--db-transition-timing-emotional);
+  }
 }
-.db-tab-item label[data-icon-trailing]::after {
-  position: absolute;
-  transform: translateY(-50%);
-  inset-block-start: 50%;
-  inset-inline-end: calc(0% + var(--db-spacing-fixed-xs));
+[data-orientation=vertical] .db-tab-item::after {
+  inline-size: var(--db-border-width-xs);
+  block-size: 0;
 }
-.db-tab-item label:is([data-no-text], [data-no-text=true]) {
-  font-size: 0 !important;
+[data-orientation=vertical] .db-tab-item {
+  max-inline-size: 100%;
+  inline-size: 100%;
+  flex-shrink: 1;
+  justify-content: flex-start;
 }
-.db-tab-item label:is([data-no-text], [data-no-text=true])::before {
-  --db-icon-margin-end: 0;
+.db-tab-item[aria-selected=true] {
+  font-weight: 700;
 }
-.db-tab-item label:is([data-no-text], [data-no-text=true]) {
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-  padding: 0;
-  inline-size: calc(calc(var(--db-spacing-fixed-xs) + var(--db-spacing-fixed-sm) + var(--db-icon-font-size)) - var(--db-spacing-fixed-2xs));
-  block-size: calc(var(--db-icon-font-size) + var(--db-spacing-fixed-xs));
+.db-tab-item:disabled {
+  opacity: var(--db-opacity-md);
+  cursor: initial;
 }
-.db-tab-item label:is([data-no-text], [data-no-text=true])::before {
-  margin-inline-end: 0;
+.db-tab-item:not(:disabled):hover, .db-tab-item:not(:disabled):focus {
+  cursor: pointer;
+  background-color: var(--db-adaptive-bg-basic-transparent-full-hovered);
 }
-.db-tab-item input {
-  position: absolute;
-  appearance: none;
-  inline-size: 100%;
-  margin-inline-end: initial;
-  inset: 0;
-  background-color: var(--db-adaptive-bg-basic-transparent-full-default);
-  border-radius: var(--db-border-radius-sm);
-  z-index: -1;
-  /*
-  focus must be set on input:
-  - parent label tag may use before AND after for displaying icons
-  - placed on li.db-tab-item focus would get cut off partially by by overflow hidden (orientation vertical)
-   */
-}
-.db-tab-item input:focus-visible:is(input[type=radio]) {
-  outline: none;
-  box-shadow: none;
-}
-.db-tab-item input:focus-visible::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: var(--db-border-radius-sm);
-  z-index: 10;
-  pointer-events: none;
+.db-tab-item:not(:disabled):active {
+  cursor: pointer;
+  background-color: var(--db-adaptive-bg-basic-transparent-full-pressed);
 }

package/build/components/tab-item/tab-item.scss

@@ -1,126 +1,125 @@
 @use "@db-ux/core-foundations/build/styles/variables";
 @use "@db-ux/core-foundations/build/styles/colors";
-@use "@db-ux/core-foundations/build/styles/icons";
 @use "@db-ux/core-foundations/build/styles/helpers";
+@use "@db-ux/core-foundations/build/styles/icons";
+@use "@db-ux/core-foundations/build/styles/fonts";
+@use "../../styles/internal/indicator";
 @use "../../styles/internal/component";
-@use "../../styles/internal/form-components";
-
-$with-icon-padding-calc: calc(
-	#{variables.$db-spacing-fixed-xs} + #{variables.$db-spacing-fixed-sm} +
-		#{form-components.$font-size-height}
-);
 
 .db-tab-item {
 	position: relative;
-
-	@include helpers.display(inline-flex);
-
-	list-style-type: "";
+	background-color: colors.$db-adaptive-bg-basic-transparent-full-default;
+	padding: variables.$db-spacing-fixed-xs;
+	margin: 0;
+	overflow: visible;
+	align-items: center;
+	justify-content: center;
+	white-space: nowrap;
 	border-radius: variables.$db-border-radius-sm;
+	font: inherit;
+	color: colors.$db-adaptive-on-bg-basic-emphasis-100-default;
+	flex-shrink: 0;
+	max-inline-size: variables.$db-sizing-2xl;
 
-	&:has(input:disabled) {
-		opacity: variables.$db-opacity-md;
+	@extend %transparent-border;
+
+	@media screen and (prefers-reduced-motion: no-preference) {
+		transition: background-color variables.$db-transition-duration-fast;
 	}
 
-	label {
-		background-color: colors.$db-adaptive-bg-basic-transparent-full-default;
-		padding: variables.$db-spacing-fixed-xs;
-		align-items: center;
+	.db-tab-item-label {
+		max-inline-size: 100%;
 
-		@include helpers.display(inline-block);
+		@include helpers.display(flex);
 
-		white-space: nowrap;
-		border: 0;
-		border-radius: variables.$db-border-radius-sm;
-		overflow: hidden;
-		text-overflow: ellipsis;
+		align-items: center;
+		gap: variables.$db-spacing-fixed-xs;
 
-		&:has(input:disabled) {
-			--db-overwrite-cursor: initial;
+		.db-tab-item-label-text {
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
 		}
 
-		@include helpers.interactive-bg(
-			colors.$db-adaptive-bg-basic-transparent-full-hovered,
-			colors.$db-adaptive-bg-basic-transparent-full-pressed
-		);
+		.db-tab-item-label-end-slot {
+			display: inherit;
+			align-items: center;
+			gap: variables.$db-spacing-fixed-xs;
 
-		&:has(input:checked) {
-			font-weight: 700;
+			&:empty {
+				display: none;
+			}
 		}
 
-		&[data-icon] {
-			padding-inline-start: $with-icon-padding-calc;
-
+		&[data-icon]:not([data-show-icon="false"]) {
 			&::before {
-				position: absolute;
-				transform: translateY(-50%);
-				inset-block-start: 50%;
-				inset-inline-start: calc(
-					0% + #{variables.$db-spacing-fixed-xs}
-				);
+				@extend %icon;
+
+				margin-inline-end: 0;
+				flex-shrink: 0;
 			}
 		}
 
-		&[data-icon-trailing] {
-			padding-inline-end: $with-icon-padding-calc;
-
+		&[data-icon-trailing]:not([data-show-icon-trailing="false"]) {
 			&::after {
-				position: absolute;
-				transform: translateY(-50%);
-				inset-block-start: 50%;
-				inset-inline-end: calc(0% + #{variables.$db-spacing-fixed-xs});
+				margin-inline-start: 0;
+				flex-shrink: 0;
 			}
 		}
+	}
+
+	[data-orientation="vertical"] & .db-tab-item-label {
+		overflow: hidden;
+	}
 
-		&:is([data-no-text], [data-no-text="true"]) {
-			@include icons.is-icon-text-replace;
+	@extend %indicator;
+	@include helpers.display(flex);
 
-			padding: 0;
-			inline-size: calc(
-				#{$with-icon-padding-calc} - #{variables.$db-spacing-fixed-2xs}
-			);
-			block-size: calc(
-				#{form-components.$font-size-height} +
-					#{variables.$db-spacing-fixed-xs}
-			);
+	&::after {
+		inline-size: 0;
+		block-size: variables.$db-border-width-xs;
 
-			&::before {
-				margin-inline-end: 0;
-			}
+		@media screen and (prefers-reduced-motion: no-preference) {
+			transition:
+				block-size variables.$db-transition-duration-fast
+					variables.$db-transition-timing-emotional,
+				inline-size variables.$db-transition-duration-fast
+					variables.$db-transition-timing-emotional;
+		}
+
+		[data-orientation="vertical"] & {
+			inline-size: variables.$db-border-width-xs;
+			block-size: 0;
 		}
 	}
 
-	input {
-		position: absolute;
-		appearance: none;
+	[data-orientation="vertical"] & {
+		max-inline-size: 100%;
 		inline-size: 100%;
-		margin-inline-end: initial;
-		inset: 0;
-		background-color: colors.$db-adaptive-bg-basic-transparent-full-default;
-		border-radius: variables.$db-border-radius-sm;
-		z-index: -1;
-
-		/*
-		focus must be set on input:
-		- parent label tag may use before AND after for displaying icons
-		- placed on li.db-tab-item focus would get cut off partially by by overflow hidden (orientation vertical)
-		 */
-		&:focus-visible {
-			&:is(input[type="radio"]) {
-				outline: none;
-				box-shadow: none;
-			}
+		flex-shrink: 1;
+		justify-content: flex-start;
+	}
 
-			&::before {
-				@extend %focus-placeholder;
-
-				content: "";
-				position: absolute;
-				inset: 0;
-				border-radius: variables.$db-border-radius-sm;
-				z-index: 10;
-				pointer-events: none;
-			}
-		}
+	&[aria-selected="true"] {
+		font-weight: 700;
+	}
+
+	&:disabled {
+		opacity: variables.$db-opacity-md;
+		cursor: initial;
+	}
+
+	// Cannot use @include helpers.hover here because the mixin EXCLUDES
+	// [tabindex="-1"] elements. Tab items use roving tabindex where inactive
+	// tabs have tabindex="-1" but should still show hover effects.
+	&:not(:disabled):hover,
+	&:not(:disabled):focus {
+		cursor: pointer;
+		background-color: colors.$db-adaptive-bg-basic-transparent-full-hovered;
+	}
+
+	&:not(:disabled):active {
+		cursor: pointer;
+		background-color: colors.$db-adaptive-bg-basic-transparent-full-pressed;
 	}
 }

package/build/components/tab-list/tab-list.css

@@ -1,6 +1,3 @@
-/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
-/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
-/* Variants for adaptive components like input, select, notification, ... */
 .db-visually-hidden,
 [data-visually-hidden=true] {
   position: absolute !important;
@@ -15,8 +12,18 @@
   pointer-events: none !important;
 }
 
+/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
+/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
+/* Variants for adaptive components like input, select, notification, ... */
+.db-tab-list {
+  font: var(--db-type-body-md);
+  /* Those variables are only for components to calculate heights and change icons */
+  --db-icon-font-weight: var(--db-base-body-icon-weight-md);
+  --db-icon-font-size: var(--db-base-body-icon-font-size-md);
+}
+
 @media (prefers-reduced-motion: no-preference) {
-  .db-tab-list > ul::-webkit-scrollbar, .db-tab-list > ul::-webkit-scrollbar-corner {
+  .db-tab-list::-webkit-scrollbar, .db-tab-list::-webkit-scrollbar-corner {
     transition: outline var(--db-transition-duration-extra-fast), box-shadow var(--db-transition-duration-extra-fast), border-color var(--db-transition-straight-emotional), background-color var(--db-transition-straight-emotional);
   }
 }
@@ -38,86 +45,79 @@
     transform: rotate(1turn);
   }
 }
-.db-tab-list {
-  font: var(--db-type-body-md);
-  /* Those variables are only for components to calculate heights and change icons */
-  --db-icon-font-weight: var(--db-base-body-icon-weight-md);
-  --db-icon-font-size: var(--db-base-body-icon-font-size-md);
-}
-
 @supports (field-sizing: content) {
-  .db-tab-list > ul[data-field-sizing=content]:is([data-hide-resizer=true], [data-resize=none]) {
+  [data-field-sizing=content].db-tab-list:is([data-hide-resizer=true], [data-resize=none]) {
     /* We don't show a scrollbar if we use field-sizing: content and no resizer is available */
     scrollbar-width: none;
   }
 }
-.db-tab-list > ul::-webkit-scrollbar {
+.db-tab-list::-webkit-scrollbar {
   z-index: 3;
   inline-size: 0.5rem;
   block-size: 0.5rem;
   background-color: var(--db-adaptive-bg-basic-level-1-default);
   border-start-end-radius: var(--db-border-radius-xs);
 }
-.db-tab-list > ul:is(:hover, :focus)::-webkit-scrollbar-track, .db-tab-list > ul:is(:hover, :focus)::-webkit-scrollbar-button:single-button {
+.db-tab-list:is(:hover, :focus)::-webkit-scrollbar-track, .db-tab-list:is(:hover, :focus)::-webkit-scrollbar-button:single-button {
   background-color: var(--db-adaptive-bg-basic-transparent-full-hovered);
 }
-.db-tab-list > ul:read-only::-webkit-scrollbar-track, .db-tab-list > ul:read-only::-webkit-scrollbar-button:single-button {
+.db-tab-list:read-only::-webkit-scrollbar-track, .db-tab-list:read-only::-webkit-scrollbar-button:single-button {
   background-color: var(--db-adaptive-bg-basic-level-1-default);
 }
-.db-tab-list > ul::-webkit-scrollbar-track {
+.db-tab-list::-webkit-scrollbar-track {
   background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
 }
-.db-tab-list > ul::-webkit-scrollbar-thumb {
+.db-tab-list::-webkit-scrollbar-thumb {
   background-color: var(--db-adaptive-bg-basic-transparent-full-pressed);
 }
-.db-tab-list > ul {
+.db-tab-list {
   /* Buttons */
 }
-.db-tab-list > ul::-webkit-scrollbar-button:single-button {
+.db-tab-list::-webkit-scrollbar-button:single-button {
   background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
   background-size: 0.5rem;
   background-repeat: no-repeat;
   background-position: center;
   block-size: calc(var(--db-spacing-fixed-3xs) + var(--db-spacing-fixed-2xs) + var(--db-base-body-icon-font-size-2xs));
 }
-.db-tab-list > ul::-webkit-scrollbar-button:single-button:is(:hover, :focus) {
+.db-tab-list::-webkit-scrollbar-button:single-button:is(:hover, :focus) {
   background-color: var(--db-adaptive-bg-basic-transparent-full-hovered);
 }
-.db-tab-list > ul::-webkit-scrollbar-button:single-button:active {
+.db-tab-list::-webkit-scrollbar-button:single-button:active {
   background-color: var(--db-adaptive-bg-basic-transparent-full-pressed);
 }
-.db-tab-list > ul {
+.db-tab-list {
   /* Up */
 }
-.db-tab-list > ul::-webkit-scrollbar-button:single-button:vertical:decrement {
+.db-tab-list::-webkit-scrollbar-button:single-button:vertical:decrement {
   border-start-end-radius: var(--db-border-radius-xs);
   background-image: var(--db-scrollbar-button-vertical-decrement);
 }
-.db-tab-list > ul {
+.db-tab-list {
   /* Down */
 }
-.db-tab-list > ul::-webkit-scrollbar-button:single-button:vertical:increment {
+.db-tab-list::-webkit-scrollbar-button:single-button:vertical:increment {
   background-image: var(--db-scrollbar-button-vertical-increment);
 }
-.db-tab-list > ul {
+.db-tab-list {
   /* Left */
 }
-.db-tab-list > ul::-webkit-scrollbar-button:single-button:horizontal:decrement {
+.db-tab-list::-webkit-scrollbar-button:single-button:horizontal:decrement {
   background-image: var(--db-scrollbar-button-horizontal-decrement);
 }
-.db-tab-list > ul {
+.db-tab-list {
   /* Right */
 }
-.db-tab-list > ul::-webkit-scrollbar-button:single-button:horizontal:increment {
+.db-tab-list::-webkit-scrollbar-button:single-button:horizontal:increment {
   background-image: var(--db-scrollbar-button-horizontal-increment);
 }
-.db-tab-list > ul[data-variant=floating]::-webkit-resizer {
+[data-variant=floating].db-tab-list::-webkit-resizer {
   background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
 }
-.db-tab-list > ul[data-variant=floating]::-webkit-scrollbar-corner {
+[data-variant=floating].db-tab-list::-webkit-scrollbar-corner {
   background-color: var(--db-adaptive-bg-basic-level-1-default);
 }
-.db-tab-list > ul::-webkit-resizer {
+.db-tab-list::-webkit-resizer {
   background-color: var(--db-adaptive-bg-basic-transparent-full-default);
   background-size: 0.5rem;
   background-repeat: no-repeat;
@@ -125,17 +125,19 @@
   background-image: var(--db-textarea-resizer-image);
   border-end-end-radius: var(--db-border-radius-xs);
 }
-.db-tab-list > ul::-webkit-scrollbar-corner {
+.db-tab-list::-webkit-scrollbar-corner {
   border-end-end-radius: var(--db-border-radius-xs);
 }
 
 .db-tab-list {
   position: relative;
-}
-.db-tab-list > ul {
   display: flex;
-  gap: var(--db-spacing-fixed-sm);
+  gap: var(--db-spacing-fixed-2xs);
   scroll-behavior: smooth;
   padding: 0;
   margin: 0;
 }
+[data-orientation=vertical] .db-tab-list {
+  flex-direction: column;
+  align-items: stretch;
+}

package/build/components/tab-list/tab-list.scss

@@ -1,18 +1,20 @@
 @use "@db-ux/core-foundations/build/styles/variables";
+@use "@db-ux/core-foundations/build/styles/fonts";
 @use "../../styles/internal/scrollbar";
 
 .db-tab-list {
-	@extend %db-overwrite-font-size-md;
-
 	position: relative;
+	display: flex;
+	gap: variables.$db-spacing-fixed-2xs;
+	scroll-behavior: smooth;
+	padding: 0;
+	margin: 0;
 
-	> ul {
-		@extend %scrollbar;
+	@extend %db-overwrite-font-size-md;
+	@extend %scrollbar;
 
-		display: flex;
-		gap: variables.$db-spacing-fixed-sm;
-		scroll-behavior: smooth;
-		padding: 0;
-		margin: 0;
+	[data-orientation="vertical"] & {
+		flex-direction: column;
+		align-items: stretch;
 	}
 }