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

package/build/components/tabs/tabs.css

@@ -18,85 +18,7 @@
   pointer-events: none !important;
 }
 
-.db-tabs .db-tab-item::after {
-  content: "";
-  position: absolute;
-  border-radius: var(--db-border-radius-xs);
-}
-@media (prefers-reduced-motion: no-preference) {
-  .db-tabs .db-tab-item::after {
-    transition: height var(--db-transition-duration-fast) var(--db-transition-timing-emotional), width var(--db-transition-duration-fast) var(--db-transition-timing-emotional);
-  }
-}
-
-.db-tabs db-tab-list:has([id$=-tab-0]:checked) ~ dbtabpanel > [id$=-tab-panel-0]:not([hidden]),
-.db-tabs db-tab-list:has([id$=-tab-0]:checked) ~ db-tab-panel > [id$=-tab-panel-0]:not([hidden]),
-.db-tabs dbtablist:has([id$=-tab-0]:checked) ~ dbtabpanel > [id$=-tab-panel-0]:not([hidden]),
-.db-tabs dbtablist:has([id$=-tab-0]:checked) ~ db-tab-panel > [id$=-tab-panel-0]:not([hidden]) {
-  display: block;
-}
-.db-tabs db-tab-list:has([id$=-tab-1]:checked) ~ dbtabpanel > [id$=-tab-panel-1]:not([hidden]),
-.db-tabs db-tab-list:has([id$=-tab-1]:checked) ~ db-tab-panel > [id$=-tab-panel-1]:not([hidden]),
-.db-tabs dbtablist:has([id$=-tab-1]:checked) ~ dbtabpanel > [id$=-tab-panel-1]:not([hidden]),
-.db-tabs dbtablist:has([id$=-tab-1]:checked) ~ db-tab-panel > [id$=-tab-panel-1]:not([hidden]) {
-  display: block;
-}
-.db-tabs db-tab-list:has([id$=-tab-2]:checked) ~ dbtabpanel > [id$=-tab-panel-2]:not([hidden]),
-.db-tabs db-tab-list:has([id$=-tab-2]:checked) ~ db-tab-panel > [id$=-tab-panel-2]:not([hidden]),
-.db-tabs dbtablist:has([id$=-tab-2]:checked) ~ dbtabpanel > [id$=-tab-panel-2]:not([hidden]),
-.db-tabs dbtablist:has([id$=-tab-2]:checked) ~ db-tab-panel > [id$=-tab-panel-2]:not([hidden]) {
-  display: block;
-}
-.db-tabs db-tab-list:has([id$=-tab-3]:checked) ~ dbtabpanel > [id$=-tab-panel-3]:not([hidden]),
-.db-tabs db-tab-list:has([id$=-tab-3]:checked) ~ db-tab-panel > [id$=-tab-panel-3]:not([hidden]),
-.db-tabs dbtablist:has([id$=-tab-3]:checked) ~ dbtabpanel > [id$=-tab-panel-3]:not([hidden]),
-.db-tabs dbtablist:has([id$=-tab-3]:checked) ~ db-tab-panel > [id$=-tab-panel-3]:not([hidden]) {
-  display: block;
-}
-.db-tabs db-tab-list:has([id$=-tab-4]:checked) ~ dbtabpanel > [id$=-tab-panel-4]:not([hidden]),
-.db-tabs db-tab-list:has([id$=-tab-4]:checked) ~ db-tab-panel > [id$=-tab-panel-4]:not([hidden]),
-.db-tabs dbtablist:has([id$=-tab-4]:checked) ~ dbtabpanel > [id$=-tab-panel-4]:not([hidden]),
-.db-tabs dbtablist:has([id$=-tab-4]:checked) ~ db-tab-panel > [id$=-tab-panel-4]:not([hidden]) {
-  display: block;
-}
-.db-tabs db-tab-list:has([id$=-tab-5]:checked) ~ dbtabpanel > [id$=-tab-panel-5]:not([hidden]),
-.db-tabs db-tab-list:has([id$=-tab-5]:checked) ~ db-tab-panel > [id$=-tab-panel-5]:not([hidden]),
-.db-tabs dbtablist:has([id$=-tab-5]:checked) ~ dbtabpanel > [id$=-tab-panel-5]:not([hidden]),
-.db-tabs dbtablist:has([id$=-tab-5]:checked) ~ db-tab-panel > [id$=-tab-panel-5]:not([hidden]) {
-  display: block;
-}
-.db-tabs db-tab-list:has([id$=-tab-6]:checked) ~ dbtabpanel > [id$=-tab-panel-6]:not([hidden]),
-.db-tabs db-tab-list:has([id$=-tab-6]:checked) ~ db-tab-panel > [id$=-tab-panel-6]:not([hidden]),
-.db-tabs dbtablist:has([id$=-tab-6]:checked) ~ dbtabpanel > [id$=-tab-panel-6]:not([hidden]),
-.db-tabs dbtablist:has([id$=-tab-6]:checked) ~ db-tab-panel > [id$=-tab-panel-6]:not([hidden]) {
-  display: block;
-}
-.db-tabs db-tab-list:has([id$=-tab-7]:checked) ~ dbtabpanel > [id$=-tab-panel-7]:not([hidden]),
-.db-tabs db-tab-list:has([id$=-tab-7]:checked) ~ db-tab-panel > [id$=-tab-panel-7]:not([hidden]),
-.db-tabs dbtablist:has([id$=-tab-7]:checked) ~ dbtabpanel > [id$=-tab-panel-7]:not([hidden]),
-.db-tabs dbtablist:has([id$=-tab-7]:checked) ~ db-tab-panel > [id$=-tab-panel-7]:not([hidden]) {
-  display: block;
-}
-.db-tabs db-tab-list:has([id$=-tab-8]:checked) ~ dbtabpanel > [id$=-tab-panel-8]:not([hidden]),
-.db-tabs db-tab-list:has([id$=-tab-8]:checked) ~ db-tab-panel > [id$=-tab-panel-8]:not([hidden]),
-.db-tabs dbtablist:has([id$=-tab-8]:checked) ~ dbtabpanel > [id$=-tab-panel-8]:not([hidden]),
-.db-tabs dbtablist:has([id$=-tab-8]:checked) ~ db-tab-panel > [id$=-tab-panel-8]:not([hidden]) {
-  display: block;
-}
-.db-tabs db-tab-list:has([id$=-tab-9]:checked) ~ dbtabpanel > [id$=-tab-panel-9]:not([hidden]),
-.db-tabs db-tab-list:has([id$=-tab-9]:checked) ~ db-tab-panel > [id$=-tab-panel-9]:not([hidden]),
-.db-tabs dbtablist:has([id$=-tab-9]:checked) ~ dbtabpanel > [id$=-tab-panel-9]:not([hidden]),
-.db-tabs dbtablist:has([id$=-tab-9]:checked) ~ db-tab-panel > [id$=-tab-panel-9]:not([hidden]) {
-  display: block;
-}
-.db-tabs db-tab-list:has([id$=-tab-10]:checked) ~ dbtabpanel > [id$=-tab-panel-10]:not([hidden]),
-.db-tabs db-tab-list:has([id$=-tab-10]:checked) ~ db-tab-panel > [id$=-tab-panel-10]:not([hidden]),
-.db-tabs dbtablist:has([id$=-tab-10]:checked) ~ dbtabpanel > [id$=-tab-panel-10]:not([hidden]),
-.db-tabs dbtablist:has([id$=-tab-10]:checked) ~ db-tab-panel > [id$=-tab-panel-10]:not([hidden]) {
-  display: block;
-}
-
-.db-tabs:not([data-orientation=vertical]) .db-tab-list > ul .db-tab-item::after {
+.db-tabs:not([data-orientation=vertical]) .db-tab-list .db-tab-item::after {
   block-size: var(--db-border-width-xs);
   inline-size: 0;
   transform: translate(-50%, 0);
@@ -104,20 +26,23 @@
   background-color: var(--db-brand-on-bg-basic-emphasis-70-default);
   inset-block: auto calc(-1 * var(--db-spacing-fixed-xs));
 }
-.db-tabs:not([data-orientation=vertical]) .db-tab-list > ul .db-tab-item:has(input:checked)::after {
+.db-tabs:not([data-orientation=vertical]) .db-tab-list .db-tab-item::after {
+  inset-block-end: calc(-1 * calc(var(--db-border-width-xs) + var(--db-spacing-fixed-2xs))) !important;
+}
+.db-tabs:not([data-orientation=vertical]) .db-tab-list .db-tab-item[aria-selected=true]::after {
   block-size: var(--db-border-width-xs);
   inline-size: 100%;
 }
 @media (forced-colors: active), print {
-  .db-tabs:not([data-orientation=vertical]) .db-tab-list > ul .db-tab-item:has(input:checked)::after {
+  .db-tabs:not([data-orientation=vertical]) .db-tab-list .db-tab-item[aria-selected=true]::after {
     border: calc(var(--db-border-width-xs) - 1px) solid var(--db-adaptive-on-bg-basic-emphasis-100-default);
   }
 }
-.db-tabs:not([data-orientation=vertical]) .db-tab-list > ul .db-tab-item:has(input:checked)::after {
-  inset-block-end: calc(-1 * (var(--db-spacing-fixed-2xs) + var(--db-border-width-xs)));
+.db-tabs:not([data-orientation=vertical]) .db-tab-list .db-tab-item[aria-selected=true]::after {
+  inline-size: 100%;
 }
 
-.db-tabs[data-orientation=vertical] .db-tab-list > ul .db-tab-item::after {
+.db-tabs[data-orientation=vertical] .db-tab-list .db-tab-item::after {
   block-size: 0;
   inline-size: var(--db-border-width-xs);
   transform: translate(0, -50%);
@@ -125,225 +50,291 @@
   background-color: var(--db-brand-on-bg-basic-emphasis-70-default);
   inset-inline-start: calc(-1 * var(--db-spacing-fixed-xs));
 }
-.db-tabs[data-orientation=vertical] .db-tab-list > ul .db-tab-item::after {
-  inset-inline-start: 0;
-  z-index: -2;
+.db-tabs[data-orientation=vertical] .db-tab-list .db-tab-item::after {
+  inset-inline: calc(-1 * var(--db-tabs-line-gap-vertical, 0px)) auto;
+  z-index: 5;
 }
-.db-tabs[data-orientation=vertical] .db-tab-list > ul .db-tab-item:has(input:checked)::after {
+.db-tabs[data-orientation=vertical] .db-tab-list .db-tab-item[aria-selected=true]::after {
   block-size: 100%;
   inline-size: var(--db-border-width-xs);
 }
 @media (forced-colors: active), print {
-  .db-tabs[data-orientation=vertical] .db-tab-list > ul .db-tab-item:has(input:checked)::after {
+  .db-tabs[data-orientation=vertical] .db-tab-list .db-tab-item[aria-selected=true]::after {
     border: calc(var(--db-border-width-xs) - 1px) solid var(--db-adaptive-on-bg-basic-emphasis-100-default);
   }
 }
+.db-tabs[data-orientation=vertical] .db-tab-list .db-tab-item[aria-selected=true]::after {
+  block-size: 100%;
+}
 
-.db-tabs[data-orientation=vertical] .db-tab-list::before, .db-tabs:not([data-orientation=vertical]) .db-tab-list::before {
+.db-tabs[data-orientation=vertical] .db-tab-list::before {
   background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
   content: "";
   border-radius: var(--db-border-radius-xs);
   position: absolute;
 }
 
+.db-tabs:not([hidden]) {
+  display: flex;
+}
 .db-tabs {
   inline-size: 100%;
   position: relative;
-  /*
-  Variant Orientation HORIZONTAL
-  	*/
-  /*
-  Variant Orientation VERTICAL
-   */
-}
-.db-tabs:not([hidden]) {
-  display: flex;
 }
 .db-tabs .db-tab-panel {
-  padding: 0 var(--db-spacing-fixed-xs);
+  padding: var(--db-spacing-fixed-xs);
+  position: relative;
+  z-index: 1;
 }
 .db-tabs .db-tab-list {
-  max-inline-size: 100%;
+  position: relative;
   z-index: 20;
 }
-.db-tabs .db-tab-list:has([id$=-tab-0]:checked) ~ [id$=-tab-panel-0]:not([hidden]) {
-  display: block;
-}
-.db-tabs .db-tab-list:has([id$=-tab-1]:checked) ~ [id$=-tab-panel-1]:not([hidden]) {
-  display: block;
-}
-.db-tabs .db-tab-list:has([id$=-tab-2]:checked) ~ [id$=-tab-panel-2]:not([hidden]) {
-  display: block;
-}
-.db-tabs .db-tab-list:has([id$=-tab-3]:checked) ~ [id$=-tab-panel-3]:not([hidden]) {
-  display: block;
-}
-.db-tabs .db-tab-list:has([id$=-tab-4]:checked) ~ [id$=-tab-panel-4]:not([hidden]) {
-  display: block;
-}
-.db-tabs .db-tab-list:has([id$=-tab-5]:checked) ~ [id$=-tab-panel-5]:not([hidden]) {
-  display: block;
-}
-.db-tabs .db-tab-list:has([id$=-tab-6]:checked) ~ [id$=-tab-panel-6]:not([hidden]) {
-  display: block;
-}
-.db-tabs .db-tab-list:has([id$=-tab-7]:checked) ~ [id$=-tab-panel-7]:not([hidden]) {
-  display: block;
-}
-.db-tabs .db-tab-list:has([id$=-tab-8]:checked) ~ [id$=-tab-panel-8]:not([hidden]) {
-  display: block;
-}
-.db-tabs .db-tab-list:has([id$=-tab-9]:checked) ~ [id$=-tab-panel-9]:not([hidden]) {
-  display: block;
-}
-.db-tabs .db-tab-list:has([id$=-tab-10]:checked) ~ [id$=-tab-panel-10]:not([hidden]) {
-  display: block;
+.db-tabs .db-tab-list db-tab-item,
+.db-tabs .db-tab-list dbtabitem {
+  display: contents;
 }
 .db-tabs:not([data-orientation=vertical]) {
   flex-flow: column wrap;
 }
-.db-tabs:not([data-orientation=vertical]) .db-tab-panel {
-  inline-size: 100%;
-}
 .db-tabs:not([data-orientation=vertical]) .db-tab-list {
-  /* horizontal track for pulse */
-}
-.db-tabs:not([data-orientation=vertical]) .db-tab-list::before {
-  block-size: var(--db-border-width-xs);
-  inset-inline: var(--db-spacing-fixed-xs);
-  /* top position equals sum of: margin xs + padding xs + line-height + padding xs + margin 2xs */
-  inset-block-start: calc(3 * var(--db-spacing-fixed-xs) + var(--db-spacing-fixed-2xs) + var(--db-icon-font-size));
-}
-.db-tabs:not([data-orientation=vertical]) .db-tab-list > ul {
-  overflow: auto hidden;
+  padding: var(--db-spacing-fixed-xs) var(--db-spacing-fixed-xs) 0 var(--db-spacing-fixed-xs);
+  background-image: linear-gradient(var(--db-adaptive-bg-basic-transparent-semi-default), var(--db-adaptive-bg-basic-transparent-semi-default));
+  background-position: left bottom;
+  background-repeat: no-repeat;
+  background-origin: content-box;
+  background-size: 100% var(--db-border-width-xs);
+}
+.db-tabs:not([data-orientation=vertical]) .db-tab-list .db-tab-item {
+  margin-block-end: calc(var(--db-border-width-xs) + var(--db-spacing-fixed-2xs));
+}
+.db-tabs:not([data-orientation=vertical]) .db-tab-list[role=tablist],
+.db-tabs:not([data-orientation=vertical]) .db-tab-list .db-tab-list {
+  display: flex;
+  align-items: stretch;
+  overflow: auto;
   inline-size: 100%;
 }
-.db-tabs:not([data-orientation=vertical]) .db-tab-list > ul .db-tab-item {
-  margin-block: var(--db-spacing-fixed-xs) calc(2 * var(--db-spacing-fixed-2xs) + var(--db-border-width-xs));
-}
-.db-tabs:not([data-orientation=vertical]) .db-tab-list > ul db-tab-item:first-of-type .db-tab-item,
-.db-tabs:not([data-orientation=vertical]) .db-tab-list > ul dbtabitem:first-of-type .db-tab-item {
-  margin-inline-start: var(--db-spacing-fixed-xs);
-}
-.db-tabs:not([data-orientation=vertical]) .db-tab-list > ul db-tab-item:last-of-type .db-tab-item,
-.db-tabs:not([data-orientation=vertical]) .db-tab-list > ul dbtabitem:last-of-type .db-tab-item {
-  margin-inline-end: var(--db-spacing-fixed-xs);
-}
-.db-tabs:not([data-orientation=vertical]) .db-tab-list > ul:not(:has(db-tab-item, dbtabitem)) .db-tab-item:first-of-type {
-  margin-inline-start: var(--db-spacing-fixed-xs);
-}
-.db-tabs:not([data-orientation=vertical]) .db-tab-list > ul:not(:has(db-tab-item, dbtabitem)) .db-tab-item:last-of-type {
-  margin-inline-end: var(--db-spacing-fixed-xs);
-}
 .db-tabs[data-orientation=vertical] {
   flex-direction: row;
 }
-.db-tabs[data-orientation=vertical] .db-tab-panel {
-  padding: var(--db-spacing-fixed-xs) 0;
-}
 .db-tabs[data-orientation=vertical] .db-tab-list {
+  --db-tabs-line-gap-vertical: calc(var(--db-border-width-xs) + var(--db-spacing-fixed-2xs));
   /*
   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: var(--db-tab-list-vertical-width, var(--db-sizing-3xl));
-  /* stylelint-disable-next-line db-ux/use-sizing */
-  max-inline-size: var(--db-tab-list-vertical-width, var(--db-sizing-3xl));
-  /* horizontal space to the tab panels */
-  padding-inline-end: var(--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: var(--db-sizing-3xl);
+  max-inline-size: var(--db-sizing-3xl);
+  padding-inline: var(--db-spacing-fixed-xs) var(--db-tabs-line-gap-vertical);
   margin-block-end: auto;
-  /* vertical track for pulse */
-}
-.db-tabs[data-orientation=vertical] .db-tab-list .db-tab-item label {
-  position: relative;
-}
-.db-tabs[data-orientation=vertical] .db-tab-list .db-tab-item:has(input:focus-visible), .db-tabs[data-orientation=vertical] .db-tab-list .db-tab-item:hover {
-  inline-size: fit-content;
-}
-.db-tabs[data-orientation=vertical] .db-tab-list .db-tab-item:has(input:focus-visible) label, .db-tabs[data-orientation=vertical] .db-tab-list .db-tab-item:hover label {
-  overflow: visible;
 }
 .db-tabs[data-orientation=vertical] .db-tab-list::before {
-  inline-size: var(--db-border-width-xs);
-  inset-block: var(--db-spacing-fixed-xs);
+  display: block;
   inset-inline-start: 0;
+  inset-block: 0;
+  inline-size: var(--db-border-width-xs);
+  z-index: 1;
 }
-.db-tabs[data-orientation=vertical] .db-tab-list > ul {
+.db-tabs[data-orientation=vertical] .db-tab-list[role=tablist],
+.db-tabs[data-orientation=vertical] .db-tab-list .db-tab-list {
+  display: flex;
   flex-direction: column;
-  block-size: 100%;
-}
-.db-tabs[data-orientation=vertical] .db-tab-list > ul:not(:has(db-tab-item, dbtabitem)) .db-tab-item:first-of-type {
-  margin-block-start: var(--db-spacing-fixed-xs);
+  align-items: flex-start;
 }
-.db-tabs[data-orientation=vertical] .db-tab-list > ul:not(:has(db-tab-item, dbtabitem)) .db-tab-item:last-of-type {
-  margin-block-end: var(--db-spacing-fixed-xs);
+.db-tabs[data-tab-item-width=full] .db-tab-list {
+  inline-size: 100%;
 }
-.db-tabs[data-orientation=vertical] .db-tab-item {
-  padding-inline-start: calc(var(--db-border-width-xs) + var(--db-spacing-fixed-2xs));
+.db-tabs[data-tab-item-width=full] .db-tab-item {
+  flex: 1 0 0;
+  inline-size: 0;
+  max-inline-size: none;
+  justify-content: flex-start;
 }
-.db-tabs[data-orientation=vertical] .db-tab-item input {
-  padding-inline-start: calc(var(--db-border-width-xs) + var(--db-spacing-fixed-2xs));
+.db-tabs[data-tab-item-width=full][data-tab-item-alignment=center] .db-tab-item {
+  text-align: center;
+  justify-content: center;
 }
-.db-tabs[data-orientation=vertical] db-tab-item:first-of-type .db-tab-item,
-.db-tabs[data-orientation=vertical] dbtabitem:first-of-type .db-tab-item {
-  margin-block-start: var(--db-spacing-fixed-xs);
+.db-tabs[data-tab-item-width=full][data-tab-item-alignment=end] .db-tab-item {
+  text-align: end;
+  justify-content: end;
 }
-.db-tabs[data-orientation=vertical] db-tab-item:last-of-type .db-tab-item,
-.db-tabs[data-orientation=vertical] dbtabitem:last-of-type .db-tab-item {
-  margin-block-end: var(--db-spacing-fixed-xs);
+.db-tabs[data-scroll-behavior=scrollbar]:not([data-orientation=vertical])::before {
+  content: "";
+  position: absolute;
+  z-index: 19;
+  inset-block-start: calc(var(--db-sizing-md) + var(--db-spacing-fixed-xs) + var(--db-border-width-xs));
+  inset-inline: var(--db-spacing-fixed-xs);
+  block-size: var(--db-border-width-xs);
+  background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
+  pointer-events: none;
 }
-.db-tabs[data-width=full] .db-tab-list {
-  inline-size: 100%;
+[data-density=functional] .db-tabs[data-scroll-behavior=scrollbar]:not([data-orientation=vertical])::before {
+  inset-block-start: calc(var(--db-sizing-sm) + var(--db-spacing-fixed-xs) + var(--db-border-width-xs));
 }
-.db-tabs[data-width=full] .db-tab-item,
-.db-tabs[data-width=full] .db-tab-item label {
-  inline-size: 100%;
+[data-density=expressive] .db-tabs[data-scroll-behavior=scrollbar]:not([data-orientation=vertical])::before {
+  inset-block-start: calc(var(--db-sizing-lg) + var(--db-spacing-fixed-xs) + var(--db-border-width-xs));
 }
-.db-tabs[data-width=full][data-alignment=center] .db-tab-item label {
-  text-align: center;
-  justify-content: center;
+.db-tabs[data-scroll-behavior=scrollbar]:not([data-orientation=vertical]) .db-tab-list {
+  background-image: none;
 }
-.db-tabs[data-scroll-behavior=arrows] {
-  /*
-   * Scroll left / right buttons
-   */
+.db-tabs[data-scroll-behavior=scrollbar]:not([data-orientation=vertical]) .db-tab-list::before {
+  content: none;
 }
-.db-tabs[data-scroll-behavior=arrows] .db-tab-list > ul::-webkit-scrollbar {
+.db-tabs[data-scroll-behavior=arrows] .db-tab-list::-webkit-scrollbar {
   display: none;
 }
-.db-tabs[data-scroll-behavior=arrows]:has(.tabs-scroll-left)::before {
+.db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical])::before {
   content: "";
+  position: absolute;
+  z-index: 19;
+  inset-block-start: calc(var(--db-sizing-md) + var(--db-border-width-2xs));
+  inset-inline: 0;
+  block-size: var(--db-border-width-xs);
+  background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
 }
-.db-tabs[data-scroll-behavior=arrows]:has(.tabs-scroll-right)::after {
-  content: "";
+[data-density=functional] .db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical])::before {
+  inset-block-start: calc(var(--db-sizing-sm) + var(--db-border-width-2xs));
+}
+[data-density=expressive] .db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical])::before {
+  inset-block-start: calc(var(--db-sizing-lg) + var(--db-border-width-2xs));
+}
+.db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .db-tab-list {
+  padding: 0 0 calc(var(--db-border-width-xs) + var(--db-spacing-fixed-2xs));
+  margin-block-start: 0;
+  background-image: none;
+}
+.db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .db-tab-list::before {
+  content: none;
+}
+.db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .db-tab-list .db-tab-item {
+  margin-block-end: 0;
+}
+.db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .db-tab-list .db-tab-item::after {
+  inset-block-end: calc(-1 * (var(--db-spacing-fixed-xs) - var(--db-border-width-2xs))) !important;
 }
-.db-tabs[data-scroll-behavior=arrows]:has(.db-button)::before, .db-tabs[data-scroll-behavior=arrows]:has(.db-button)::after {
+.db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-start,
+.db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-end {
   position: absolute;
-  z-index: 21;
+  z-index: 22;
+  inset-block-start: 0;
+  aspect-ratio: unset;
+  min-block-size: unset;
+  border-block-width: 0;
+  padding-block: var(--db-spacing-fixed-xs) calc(var(--db-spacing-fixed-xs) + calc(var(--db-border-width-xs) + var(--db-spacing-fixed-2xs)));
+  align-items: flex-start;
   background-color: var(--db-adaptive-bg-basic-level-1-default);
-  inline-size: var(--db-sizing-md);
-  block-size: calc(var(--db-spacing-fixed-sm) + var(--db-sizing-md));
-  flex: 0 0 auto;
+  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
+}
+.db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-start:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)),
+.db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-end:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) {
+  cursor: var(--db-overwrite-cursor, pointer);
+  background-color: var(--db-adaptive-bg-basic-level-1-hovered);
+}
+.db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-start:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-start:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input),
+.db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-end:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea),
+.db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-end:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
+  cursor: initial;
+}
+.db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-start:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-start:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)),
+.db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-end:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]),
+.db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-end:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
+  cursor: pointer;
+}
+.db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-start:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)),
+.db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-end:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) {
+  cursor: var(--db-overwrite-cursor, pointer);
+  background-color: var(--db-adaptive-bg-basic-level-1-pressed);
+}
+.db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-start:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-start:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input),
+.db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-end:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea),
+.db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-end:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
+  cursor: initial;
+}
+.db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-start:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-start:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)),
+.db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-end:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]),
+.db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-end:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
+  cursor: pointer;
+}
+@media screen and (forced-colors: active) {
+  .db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-start,
+  .db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-end {
+    border-block: var(--db-border-width-xs) solid transparent;
+    inset-block-start: calc(-1 * var(--db-border-width-xs));
+  }
 }
-.db-tabs[data-scroll-behavior=arrows]:has(.db-button)::before {
-  inset-inline-start: 0;
+[data-density=functional] .db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-start,
+[data-density=functional] .db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-end {
+  padding-block: var(--db-spacing-fixed-2xs) calc(var(--db-spacing-fixed-2xs) + calc(var(--db-border-width-xs) + var(--db-spacing-fixed-2xs)));
 }
-.db-tabs[data-scroll-behavior=arrows]:has(.db-button)::after {
-  inset-inline-end: 0;
+[data-density=expressive] .db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-start,
+[data-density=expressive] .db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-end {
+  padding-block: var(--db-spacing-fixed-sm) calc(var(--db-spacing-fixed-sm) + calc(var(--db-border-width-xs) + var(--db-spacing-fixed-2xs)));
 }
-.db-tabs[data-scroll-behavior=arrows] .tabs-scroll-left > .db-button, .db-tabs[data-scroll-behavior=arrows] .tabs-scroll-left:is(.db-button) {
+.db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-start {
   inset-inline-start: 0;
 }
-.db-tabs[data-scroll-behavior=arrows] .tabs-scroll-right > .db-button, .db-tabs[data-scroll-behavior=arrows] .tabs-scroll-right:is(.db-button) {
+.db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-end {
   inset-inline-end: 0;
 }
-.db-tabs[data-scroll-behavior=arrows] .tabs-scroll-left > .db-button, .db-tabs[data-scroll-behavior=arrows] .tabs-scroll-left:is(.db-button),
-.db-tabs[data-scroll-behavior=arrows] .tabs-scroll-right > .db-button,
-.db-tabs[data-scroll-behavior=arrows] .tabs-scroll-right:is(.db-button) {
-  position: absolute;
-  z-index: 22;
-  inset-block: var(--db-spacing-fixed-xs);
-}