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

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

@@ -1,6 +1,32 @@
-/* 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-panel:not([hidden]) {
+.db-tab-panel {
+  padding: var(--db-spacing-fixed-xs);
+  position: relative;
+  z-index: 1;
+}
+
+.db-tabs[data-initial-selected-mode=manually]:not(:has(> .db-tab-panel[hidden])) > .db-tab-panel {
+  display: none;
+}
+
+.db-tabs:not([data-initial-selected-mode=manually],
+:has(> .db-tab-panel[hidden])) > .db-tab-panel ~ .db-tab-panel {
+  display: none;
+}
+
+.db-tabs[data-initial-selected-mode=manually]:not(:has(> db-tab-panel .db-tab-panel[hidden])) > db-tab-panel {
+  display: none;
+}
+
+.db-tabs:not([data-initial-selected-mode=manually],
+:has(> db-tab-panel .db-tab-panel[hidden])) > db-tab-panel ~ db-tab-panel {
+  display: none;
+}
+
+.db-tabs[data-initial-selected-mode=manually]:not(:has(> dbtabpanel .db-tab-panel[hidden])) > dbtabpanel {
+  display: none;
+}
+
+.db-tabs:not([data-initial-selected-mode=manually],
+:has(> dbtabpanel .db-tab-panel[hidden])) > dbtabpanel ~ dbtabpanel {
   display: none;
 }

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

@@ -1,6 +1,64 @@
 @use "@db-ux/core-foundations/build/styles/variables";
-@use "@db-ux/core-foundations/build/styles/helpers";
 
 .db-tab-panel {
-	@include helpers.display(none);
+	padding: variables.$db-spacing-fixed-xs;
+	position: relative;
+	z-index: 1;
+}
+
+// SSR / no-JS fallback for the composed API path:
+// When DBTabs renders children directly, panels do not receive the `hidden`
+// prop. Before JS sets `hidden` via syncSelection(), hide all panels except
+// the first to prevent a flash of all content at once.
+// The :not(:has(...[hidden])) guard ensures this rule is inert after
+// hydration — once JS sets `hidden` on at least one panel, native hidden
+// behavior takes over.
+// When initialSelectedMode="manually", hide ALL panels (no tab is active).
+.db-tabs[data-initial-selected-mode="manually"]:not(
+		:has(> .db-tab-panel[hidden])
+	)
+	> .db-tab-panel {
+	display: none;
+}
+
+.db-tabs:not(
+		[data-initial-selected-mode="manually"],
+		:has(> .db-tab-panel[hidden])
+	)
+	> .db-tab-panel
+	~ .db-tab-panel {
+	display: none;
+}
+
+// Angular/Stencil wrap each component in a custom element host.
+.db-tabs[data-initial-selected-mode="manually"]:not(
+		:has(> db-tab-panel .db-tab-panel[hidden])
+	)
+	> db-tab-panel {
+	display: none;
+}
+
+.db-tabs:not(
+		[data-initial-selected-mode="manually"],
+		:has(> db-tab-panel .db-tab-panel[hidden])
+	)
+	> db-tab-panel
+	~ db-tab-panel {
+	display: none;
+}
+
+.db-tabs[data-initial-selected-mode="manually"]:not(
+		:has(> dbtabpanel .db-tab-panel[hidden])
+	)
+	> dbtabpanel {
+	display: none;
+}
+
+.db-tabs:not(
+		[data-initial-selected-mode="manually"],
+		:has(> dbtabpanel .db-tab-panel[hidden])
+	)
+	> dbtabpanel
+	~ dbtabpanel {
+	display: none;
 }

package/build/components/table/table.css

@@ -204,10 +204,6 @@
 .db-table-row[data-interactive=true] {
   position: relative;
 }
-.db-table-row[data-interactive=true] td :not([data-table-row-trigger=true]) {
-  position: relative;
-  z-index: 1;
-}
 .db-table-row[data-interactive=true]:has(input:is([type=radio], [type=checkbox]):is([data-table-row-trigger=true]:is(button, input, textarea, summary, select, a[href], [tabindex]:not([tabindex="-1"])), [data-table-row-trigger=true] :is(input, textarea, select)):checked) {
   background-color: var(--db-adaptive-bg-basic-level-2-default);
 }

package/build/components/table-row/table-row.css

@@ -178,10 +178,6 @@
 .db-table-row[data-interactive=true] {
   position: relative;
 }
-.db-table-row[data-interactive=true] td :not([data-table-row-trigger=true]) {
-  position: relative;
-  z-index: 1;
-}
 .db-table-row[data-interactive=true]:has(input:is([type=radio], [type=checkbox]):is([data-table-row-trigger=true]:is(button, input, textarea, summary, select, a[href], [tabindex]:not([tabindex="-1"])), [data-table-row-trigger=true] :is(input, textarea, select)):checked) {
   background-color: var(--db-adaptive-bg-basic-level-2-default);
 }

package/build/components/table-row/table-row.scss

@@ -42,11 +42,6 @@ $interactive-child: ":is(#{$interactive-row-action}:is(#{helpers.$interactive-el
 	&[data-interactive="true"] {
 		position: relative;
 
-		td :not(#{$interactive-row-action}) {
-			position: relative;
-			z-index: 1;
-		}
-
 		@include table-row-interactive-checked {
 			@extend %db-informational-variables;
 

package/build/components/tabs/tabs.css

@@ -15,144 +15,54 @@
   pointer-events: none !important;
 }
 
-.db-tabs .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-tabs .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);
-  }
-}
-
-@keyframes popover-animation {
-  0% {
-    pointer-events: none;
-    opacity: 0;
-    transform: translate(var(--db-popover-center-x, var(--db-popover-translate-x, 0%)), var(--db-popover-center-y, var(--db-popover-translate-y, 0%)));
-  }
-  100% {
-    pointer-events: auto;
-    opacity: 1;
-    transform: translate(var(--db-popover-center-x, 0%), var(--db-popover-center-y, 0%));
-  }
-}
-@keyframes rotate {
-  100% {
-    transform: rotate(1turn);
-  }
-}
-.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);
   inset-inline-start: 50%;
   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%);
   inset-block: var(--indicator-vertical-inset-block-start, 50%) auto;
   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: var(--indicator-vertical-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);
@@ -166,208 +76,187 @@
   inline-size: 100%;
   position: relative;
 }
-.db-tabs .db-tab-panel {
-  padding: 0 var(--db-spacing-fixed-xs);
-}
 .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 {
-  /*
-  Variant Orientation HORIZONTAL
-  	*/
+.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 indicator */
-}
-.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 {
-  /*
-  Variant Orientation VERTICAL
-   */
-}
 .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;
 }
-.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 {
-  /* vertical track for indicator */
-}
 .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%;
+  align-items: flex-start;
 }
-.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);
+.db-tabs[data-orientation=vertical] .db-tab-list .db-tab-item-label {
+  inline-size: 100%;
 }
-.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-orientation=vertical] .db-tab-list .db-tab-item-label-end-slot {
+  margin-inline-start: auto;
 }
-.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-list {
+  inline-size: 100%;
 }
-.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]:not([data-orientation=vertical]) .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: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=center] .db-tab-item {
+  text-align: center;
+  justify-content: center;
 }
-.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-tab-item-width=full][data-tab-item-alignment=end] .db-tab-item {
+  text-align: end;
+  justify-content: end;
 }
-.db-tabs[data-width=full] .db-tab-list {
-  inline-size: 100%;
+.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-item,
-.db-tabs[data-width=full] .db-tab-item label {
-  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][data-alignment=center] .db-tab-item label {
-  text-align: center;
-  justify-content: center;
+[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-scroll-behavior=arrows] {
-  /*
-   * Scroll left / right buttons
-   */
+.db-tabs[data-scroll-behavior=scrollbar]:not([data-orientation=vertical]) .db-tab-list {
+  background-image: none;
 }
-.db-tabs[data-scroll-behavior=arrows] .overflow-scroll-left-button > .db-button, .db-tabs[data-scroll-behavior=arrows] .overflow-scroll-left-button:is(.db-button) {
-  inset-inline-start: var(--db-overflow-scroll-button-inset-inline-start, 0);
+.db-tabs[data-scroll-behavior=scrollbar]:not([data-orientation=vertical]) .db-tab-list::before {
+  content: none;
 }
-.db-tabs[data-scroll-behavior=arrows] .overflow-scroll-right-button > .db-button, .db-tabs[data-scroll-behavior=arrows] .overflow-scroll-right-button:is(.db-button) {
-  inset-inline-end: 0;
+.db-tabs[data-scroll-behavior=arrows] .db-tab-list {
+  scrollbar-width: none;
 }
-.db-tabs[data-scroll-behavior=arrows] .overflow-scroll-left-button > .db-button, .db-tabs[data-scroll-behavior=arrows] .overflow-scroll-left-button:is(.db-button),
-.db-tabs[data-scroll-behavior=arrows] .overflow-scroll-right-button > .db-button,
-.db-tabs[data-scroll-behavior=arrows] .overflow-scroll-right-button:is(.db-button) {
+.db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical])::before {
+  content: "";
   position: absolute;
-  z-index: 22;
-  inset-block: var(--db-overflow-scroll-button-inset-block, var(--db-spacing-fixed-xs));
+  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);
 }
-@supports (scrollbar-width: none) {
-  .db-tabs[data-scroll-behavior=arrows] .db-tab-list > ul {
-    scrollbar-width: none;
-  }
+[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));
 }
-.db-tabs[data-scroll-behavior=arrows] .db-tab-list > ul::-webkit-scrollbar {
-  display: none;
+[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]:has(.overflow-scroll-left-button)::before {
-  content: "";
+.db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .db-tab-list {
+  padding: calc(var(--db-border-width-xs) + var(--db-border-width-2xs)) 0 calc(var(--db-border-width-xs) + var(--db-spacing-fixed-2xs));
+  margin-block-start: calc(-1 * calc(var(--db-border-width-xs) + var(--db-border-width-2xs)));
+  background-image: none;
 }
-.db-tabs[data-scroll-behavior=arrows]:has(.overflow-scroll-right-button)::after {
-  content: "";
+.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]:has(.db-button)::before, .db-tabs[data-scroll-behavior=arrows]:has(.db-button)::after {
+.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]: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-overflow-scroll-button-background-block-size, 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,
+.db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-end:hover {
+  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:active,
+.db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-end:active {
+  cursor: var(--db-overwrite-cursor, pointer);
+  background-color: var(--db-adaptive-bg-basic-level-1-pressed);
+}
+@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));
+  }
+}
+[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)::before {
-  inset-inline-start: var(--db-overflow-scroll-button-inset-inline-start, 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]:has(.db-button)::after {
+.db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-start {
+  inset-inline-start: 0;
+}
+.db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-start:dir(rtl) {
+  --db-icon: "chevron_right";
+}
+.db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-end {
   inset-inline-end: 0;
 }
+.db-tabs[data-scroll-behavior=arrows]:not([data-orientation=vertical]) .tabs-scroll-end:dir(rtl) {
+  --db-icon: "chevron_left";
+}