@db-ux/core-components 1.0.0-test-13b991d

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

@@ -0,0 +1,202 @@
+/* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
+/* Use fixed spacings for all kind of distances (margin, padding, ...) */
+/* The primary use-case for responsive spacings are
+paddings/gaps in an application e.g. the <main> should have a responsive padding. */
+/* Elevation */
+/* Border */
+/* Transitions */
+/* Variants for adaptive components like input, select, notification, ... */
+.db-visually-hidden,
+[data-visually-hidden=true] {
+  clip: rect(0, 0, 0, 0) !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  font-size: 0 !important;
+  all: initial;
+  inset-block-start: 0 !important;
+  block-size: 1px !important;
+  position: absolute !important;
+  inline-size: 1px !important;
+  border-width: 0 !important;
+  border-style: initial !important;
+  border-color: initial !important;
+  border-image: initial !important;
+  padding: 0 !important;
+  pointer-events: none !important;
+}
+
+.db-tab-list > ul::-webkit-scrollbar, .db-tab-list > ul::-webkit-scrollbar-corner {
+  transition: outline var(--db-transition-duration-extra-fast), border-color var(--db-transition-straight-emotional), background-color var(--db-transition-straight-emotional);
+}
+
+@keyframes show-right-to-left {
+  from {
+    transform: translateX(110%);
+  }
+  to {
+    transform: translateX(0%);
+  }
+}
+@keyframes hide-right-to-left {
+  from {
+    transform: translateX(0%);
+  }
+  to {
+    transform: translateX(110%);
+  }
+}
+@keyframes show-left-to-right {
+  from {
+    transform: translateX(-110%);
+  }
+  to {
+    transform: translateX(0%);
+  }
+}
+@keyframes hide-left-to-right {
+  from {
+    transform: translateX(0%);
+  }
+  to {
+    transform: translateX(-110%);
+  }
+}
+@keyframes show-bottom-to-top {
+  from {
+    transform: translateY(110%);
+  }
+  to {
+    transform: translateY(0%);
+  }
+}
+@keyframes hide-bottom-to-top {
+  from {
+    transform: translateY(0%);
+  }
+  to {
+    transform: translateY(110%);
+  }
+}
+@keyframes show-top-to-bottom {
+  from {
+    transform: translateY(-110%);
+  }
+  to {
+    transform: translateY(0%);
+  }
+}
+@keyframes hide-top-to-bottom {
+  from {
+    transform: translateY(0%);
+  }
+  to {
+    transform: translateY(-110%);
+  }
+}
+@keyframes accordion-open {
+  0% {
+    opacity: 0;
+    transform: translateY(-10%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0%);
+  }
+}
+@keyframes popover-animation {
+  0% {
+    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% {
+    opacity: 1;
+    transform: translate(var(--db-popover-center-x, 0%), var(--db-popover-center-y, 0%));
+  }
+}
+/**
+	Generates 3 types of placeholders, e.g:
+	- %db-component-variables-md
+	- %db-font-size-md
+	- %db-overwrite-font-size-md
+ */
+.db-tab-list {
+  /* 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);
+  --db-base-line-height: var(--db-type-body-line-height-md);
+  --db-base-font-size: var(--db-type-body-font-size-md);
+  line-height: var(--db-type-body-line-height-md);
+  font-size: var(--db-type-body-font-size-md);
+}
+
+.db-tab-list > ul {
+  /* Buttons */
+  /* Up */
+  /* Down */
+}
+.db-tab-list > ul::-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 {
+  background-color: var(--db-adaptive-bg-basic-transparent-hovered);
+}
+.db-tab-list > ul:read-only::-webkit-scrollbar-track, .db-tab-list > ul:read-only::-webkit-scrollbar-button:single-button {
+  background-color: var(--db-adaptive-bg-basic-level-1-default) !important;
+}
+.db-tab-list > ul::-webkit-scrollbar-track {
+  background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
+}
+.db-tab-list > ul::-webkit-scrollbar-thumb {
+  background-color: var(--db-adaptive-bg-basic-transparent-pressed);
+}
+.db-tab-list > ul::-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) + calc(var(--db-type-body-font-size-2xs) * var(--db-type-body-line-height-2xs)));
+}
+.db-tab-list > ul::-webkit-scrollbar-button:single-button:is(:hover, :focus) {
+  background-color: var(--db-adaptive-bg-basic-transparent-hovered);
+}
+.db-tab-list > ul::-webkit-scrollbar-button:single-button:active {
+  background-color: var(--db-adaptive-bg-basic-transparent-pressed);
+}
+.db-tab-list > ul::-webkit-scrollbar-button:single-button:vertical:decrement {
+  background-image: var(--db-textarea-scrollbar-button-decrement);
+}
+.db-tab-list > ul::-webkit-scrollbar-button:single-button:vertical:increment {
+  background-image: var(--db-textarea-scrollbar-button-increment);
+}
+.db-tab-list > ul[data-variant=floating]::-webkit-resizer {
+  background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
+}
+.db-tab-list > ul[data-variant=floating]::-webkit-scrollbar-corner {
+  background-color: var(--db-adaptive-bg-basic-level-1-default);
+}
+.db-tab-list > ul::-webkit-resizer {
+  background-color: var(--db-adaptive-bg-basic-transparent-full-default);
+  background-size: 0.5rem;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-image: var(--db-textarea-resizer-image);
+  border-end-end-radius: var(--db-border-radius-xs);
+}
+.db-tab-list > ul::-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);
+  scroll-behavior: smooth;
+  padding: 0;
+  margin: 0;
+}

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

@@ -0,0 +1,18 @@
+@use "@db-ux/core-foundations/build/styles/variables";
+@use "../../styles/internal/scrollbar";
+
+.db-tab-list {
+	@extend %db-overwrite-font-size-md;
+
+	position: relative;
+
+	> ul {
+		@extend %scrollbar;
+
+		display: flex;
+		gap: variables.$db-spacing-fixed-sm;
+		scroll-behavior: smooth;
+		padding: 0;
+		margin: 0;
+	}
+}

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

@@ -0,0 +1,10 @@
+/* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
+/* Use fixed spacings for all kind of distances (margin, padding, ...) */
+/* The primary use-case for responsive spacings are
+paddings/gaps in an application e.g. the <main> should have a responsive padding. */
+/* Elevation */
+/* Border */
+/* Transitions */
+.db-tab-panel {
+  display: none;
+}

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

@@ -0,0 +1,5 @@
+@use "@db-ux/core-foundations/build/styles/variables";
+
+.db-tab-panel {
+	display: none;
+}

package/build/components/tabs/tabs.css

@@ -0,0 +1,358 @@
+/* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
+/* Use fixed spacings for all kind of distances (margin, padding, ...) */
+/* The primary use-case for responsive spacings are
+paddings/gaps in an application e.g. the <main> should have a responsive padding. */
+/* Elevation */
+/* Border */
+/* Transitions */
+/* Variants for adaptive components like input, select, notification, ... */
+.db-visually-hidden,
+[data-visually-hidden=true] {
+  clip: rect(0, 0, 0, 0) !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  font-size: 0 !important;
+  all: initial;
+  inset-block-start: 0 !important;
+  block-size: 1px !important;
+  position: absolute !important;
+  inline-size: 1px !important;
+  border-width: 0 !important;
+  border-style: initial !important;
+  border-color: initial !important;
+  border-image: initial !important;
+  padding: 0 !important;
+  pointer-events: none !important;
+}
+
+/**
+	Generates 3 types of placeholders, e.g:
+	- %db-component-variables-md
+	- %db-font-size-md
+	- %db-overwrite-font-size-md
+ */
+.db-tabs .db-tab-item::after {
+  content: "";
+  position: absolute;
+  border-radius: var(--db-border-radius-xs);
+}
+@media screen and (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],
+.db-tabs db-tab-list:has([id$=-tab-0]:checked) ~ db-tab-panel > [id$=-tab-panel-0],
+.db-tabs dbtablist:has([id$=-tab-0]:checked) ~ dbtabpanel > [id$=-tab-panel-0],
+.db-tabs dbtablist:has([id$=-tab-0]:checked) ~ db-tab-panel > [id$=-tab-panel-0] {
+  display: block;
+}
+.db-tabs db-tab-list:has([id$=-tab-1]:checked) ~ dbtabpanel > [id$=-tab-panel-1],
+.db-tabs db-tab-list:has([id$=-tab-1]:checked) ~ db-tab-panel > [id$=-tab-panel-1],
+.db-tabs dbtablist:has([id$=-tab-1]:checked) ~ dbtabpanel > [id$=-tab-panel-1],
+.db-tabs dbtablist:has([id$=-tab-1]:checked) ~ db-tab-panel > [id$=-tab-panel-1] {
+  display: block;
+}
+.db-tabs db-tab-list:has([id$=-tab-2]:checked) ~ dbtabpanel > [id$=-tab-panel-2],
+.db-tabs db-tab-list:has([id$=-tab-2]:checked) ~ db-tab-panel > [id$=-tab-panel-2],
+.db-tabs dbtablist:has([id$=-tab-2]:checked) ~ dbtabpanel > [id$=-tab-panel-2],
+.db-tabs dbtablist:has([id$=-tab-2]:checked) ~ db-tab-panel > [id$=-tab-panel-2] {
+  display: block;
+}
+.db-tabs db-tab-list:has([id$=-tab-3]:checked) ~ dbtabpanel > [id$=-tab-panel-3],
+.db-tabs db-tab-list:has([id$=-tab-3]:checked) ~ db-tab-panel > [id$=-tab-panel-3],
+.db-tabs dbtablist:has([id$=-tab-3]:checked) ~ dbtabpanel > [id$=-tab-panel-3],
+.db-tabs dbtablist:has([id$=-tab-3]:checked) ~ db-tab-panel > [id$=-tab-panel-3] {
+  display: block;
+}
+.db-tabs db-tab-list:has([id$=-tab-4]:checked) ~ dbtabpanel > [id$=-tab-panel-4],
+.db-tabs db-tab-list:has([id$=-tab-4]:checked) ~ db-tab-panel > [id$=-tab-panel-4],
+.db-tabs dbtablist:has([id$=-tab-4]:checked) ~ dbtabpanel > [id$=-tab-panel-4],
+.db-tabs dbtablist:has([id$=-tab-4]:checked) ~ db-tab-panel > [id$=-tab-panel-4] {
+  display: block;
+}
+.db-tabs db-tab-list:has([id$=-tab-5]:checked) ~ dbtabpanel > [id$=-tab-panel-5],
+.db-tabs db-tab-list:has([id$=-tab-5]:checked) ~ db-tab-panel > [id$=-tab-panel-5],
+.db-tabs dbtablist:has([id$=-tab-5]:checked) ~ dbtabpanel > [id$=-tab-panel-5],
+.db-tabs dbtablist:has([id$=-tab-5]:checked) ~ db-tab-panel > [id$=-tab-panel-5] {
+  display: block;
+}
+.db-tabs db-tab-list:has([id$=-tab-6]:checked) ~ dbtabpanel > [id$=-tab-panel-6],
+.db-tabs db-tab-list:has([id$=-tab-6]:checked) ~ db-tab-panel > [id$=-tab-panel-6],
+.db-tabs dbtablist:has([id$=-tab-6]:checked) ~ dbtabpanel > [id$=-tab-panel-6],
+.db-tabs dbtablist:has([id$=-tab-6]:checked) ~ db-tab-panel > [id$=-tab-panel-6] {
+  display: block;
+}
+.db-tabs db-tab-list:has([id$=-tab-7]:checked) ~ dbtabpanel > [id$=-tab-panel-7],
+.db-tabs db-tab-list:has([id$=-tab-7]:checked) ~ db-tab-panel > [id$=-tab-panel-7],
+.db-tabs dbtablist:has([id$=-tab-7]:checked) ~ dbtabpanel > [id$=-tab-panel-7],
+.db-tabs dbtablist:has([id$=-tab-7]:checked) ~ db-tab-panel > [id$=-tab-panel-7] {
+  display: block;
+}
+.db-tabs db-tab-list:has([id$=-tab-8]:checked) ~ dbtabpanel > [id$=-tab-panel-8],
+.db-tabs db-tab-list:has([id$=-tab-8]:checked) ~ db-tab-panel > [id$=-tab-panel-8],
+.db-tabs dbtablist:has([id$=-tab-8]:checked) ~ dbtabpanel > [id$=-tab-panel-8],
+.db-tabs dbtablist:has([id$=-tab-8]:checked) ~ db-tab-panel > [id$=-tab-panel-8] {
+  display: block;
+}
+.db-tabs db-tab-list:has([id$=-tab-9]:checked) ~ dbtabpanel > [id$=-tab-panel-9],
+.db-tabs db-tab-list:has([id$=-tab-9]:checked) ~ db-tab-panel > [id$=-tab-panel-9],
+.db-tabs dbtablist:has([id$=-tab-9]:checked) ~ dbtabpanel > [id$=-tab-panel-9],
+.db-tabs dbtablist:has([id$=-tab-9]:checked) ~ db-tab-panel > [id$=-tab-panel-9] {
+  display: block;
+}
+.db-tabs db-tab-list:has([id$=-tab-10]:checked) ~ dbtabpanel > [id$=-tab-panel-10],
+.db-tabs db-tab-list:has([id$=-tab-10]:checked) ~ db-tab-panel > [id$=-tab-panel-10],
+.db-tabs dbtablist:has([id$=-tab-10]:checked) ~ dbtabpanel > [id$=-tab-panel-10],
+.db-tabs dbtablist:has([id$=-tab-10]:checked) ~ db-tab-panel > [id$=-tab-panel-10] {
+  display: block;
+}
+
+.db-tabs:not([data-orientation=vertical]) .db-tab-list > ul .db-tab-item::after {
+  block-size: var(--db-border-height-xs);
+  inline-size: 0;
+  transform: translate(-50%, 0);
+  inset-inline-start: 50%;
+  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 {
+  block-size: var(--db-border-height-xs);
+  inline-size: 100%;
+}
+@media (forced-colors: active) {
+  .db-tabs:not([data-orientation=vertical]) .db-tab-list > ul .db-tab-item:has(input:checked)::after {
+    border: calc(var(--db-border-height-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-height-xs)));
+}
+
+.db-tabs[data-orientation=vertical] .db-tab-list > ul .db-tab-item::after {
+  block-size: 0;
+  inline-size: var(--db-border-height-xs);
+  transform: translate(0, -50%);
+  inset-block: 50% auto;
+  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 > ul .db-tab-item:has(input:checked)::after {
+  block-size: 100%;
+  inline-size: var(--db-border-height-xs);
+}
+@media (forced-colors: active) {
+  .db-tabs[data-orientation=vertical] .db-tab-list > ul .db-tab-item:has(input:checked)::after {
+    border: calc(var(--db-border-height-xs) - 1px) solid var(--db-adaptive-on-bg-basic-emphasis-100-default);
+  }
+}
+
+.db-tabs[data-orientation=vertical] .db-tab-list::before, .db-tabs:not([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 {
+  display: flex;
+  inline-size: 100%;
+  position: relative;
+  /*
+  Variant Orientation HORIZONTAL
+  	*/
+  /*
+  Variant Orientation VERTICAL
+   */
+}
+.db-tabs .db-tab-panel {
+  padding: 0 var(--db-spacing-fixed-xs);
+}
+.db-tabs .db-tab-list {
+  max-inline-size: 100%;
+  z-index: 20;
+}
+.db-tabs .db-tab-list:has([id$=-tab-0]:checked) ~ [id$=-tab-panel-0] {
+  display: block;
+}
+.db-tabs .db-tab-list:has([id$=-tab-1]:checked) ~ [id$=-tab-panel-1] {
+  display: block;
+}
+.db-tabs .db-tab-list:has([id$=-tab-2]:checked) ~ [id$=-tab-panel-2] {
+  display: block;
+}
+.db-tabs .db-tab-list:has([id$=-tab-3]:checked) ~ [id$=-tab-panel-3] {
+  display: block;
+}
+.db-tabs .db-tab-list:has([id$=-tab-4]:checked) ~ [id$=-tab-panel-4] {
+  display: block;
+}
+.db-tabs .db-tab-list:has([id$=-tab-5]:checked) ~ [id$=-tab-panel-5] {
+  display: block;
+}
+.db-tabs .db-tab-list:has([id$=-tab-6]:checked) ~ [id$=-tab-panel-6] {
+  display: block;
+}
+.db-tabs .db-tab-list:has([id$=-tab-7]:checked) ~ [id$=-tab-panel-7] {
+  display: block;
+}
+.db-tabs .db-tab-list:has([id$=-tab-8]:checked) ~ [id$=-tab-panel-8] {
+  display: block;
+}
+.db-tabs .db-tab-list:has([id$=-tab-9]:checked) ~ [id$=-tab-panel-9] {
+  display: block;
+}
+.db-tabs .db-tab-list:has([id$=-tab-10]:checked) ~ [id$=-tab-panel-10] {
+  display: block;
+}
+.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-height-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) + calc(var(--db-base-font-size) * var(--db-base-line-height)));
+}
+.db-tabs:not([data-orientation=vertical]) .db-tab-list > ul {
+  overflow: auto hidden;
+  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-height-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 {
+  /*
+  min and nominal size must both be set to ensure
+  - min-inline-size: tab-list is not displayed narrower than defined
+  - max-inline-size: tab-list is not displayed wider than defined
+   */
+  min-inline-size: var(--db-tab-list-vertical-width, var(--db-sizing-3xl));
+  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 */
+  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-height-xs);
+  inset-block: var(--db-spacing-fixed-xs);
+  inset-inline-start: 0;
+}
+.db-tabs[data-orientation=vertical] .db-tab-list > ul {
+  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);
+}
+.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-item {
+  padding-inline-start: calc(var(--db-border-height-xs) + var(--db-spacing-fixed-2xs));
+}
+.db-tabs[data-orientation=vertical] .db-tab-item input {
+  padding-inline-start: calc(var(--db-border-height-xs) + var(--db-spacing-fixed-2xs));
+}
+.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-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-width=full] .db-tab-list {
+  inline-size: 100%;
+}
+.db-tabs[data-width=full] .db-tab-item,
+.db-tabs[data-width=full] .db-tab-item label {
+  inline-size: 100%;
+}
+.db-tabs[data-width=full][data-alignment=center] .db-tab-item label {
+  text-align: center;
+  justify-content: center;
+}
+.db-tabs[data-scroll-behavior=arrows] {
+  /*
+   * Scroll left / right buttons
+   */
+}
+.db-tabs[data-scroll-behavior=arrows] .db-tab-list > ul::-webkit-scrollbar {
+  display: none;
+}
+.db-tabs[data-scroll-behavior=arrows]:has(.tabs-scroll-left)::before {
+  content: "";
+}
+.db-tabs[data-scroll-behavior=arrows]:has(.tabs-scroll-right)::after {
+  content: "";
+}
+.db-tabs[data-scroll-behavior=arrows]:has(.db-button)::before, .db-tabs[data-scroll-behavior=arrows]:has(.db-button)::after {
+  position: absolute;
+  z-index: 21;
+  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;
+}
+.db-tabs[data-scroll-behavior=arrows]:has(.db-button)::before {
+  inset-inline-start: 0;
+}
+.db-tabs[data-scroll-behavior=arrows]:has(.db-button)::after {
+  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) {
+  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) {
+  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);
+}