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

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

@@ -1,140 +1,138 @@
 @use "@db-ux/core-foundations/build/styles/variables";
 @use "@db-ux/core-foundations/build/styles/colors";
-@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 "@db-ux/core-foundations/build/styles/helpers";
+@use "../../styles/internal/component";
 @use "../../styles/internal/db-puls";
+@use "../../styles/internal/form-components";
 
-db-tab-item,
-dbtabitem {
-	display: contents;
-	vertical-align: top; // fallback if display: contents fails: prevents baseline gap
-}
+$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;
-	background-color: colors.$db-adaptive-bg-basic-transparent-full-default;
-	padding: variables.$db-spacing-fixed-xs;
-	overflow: visible;
-	align-items: center;
-	justify-content: center;
-	white-space: nowrap;
-	border: 0;
+
+	@include helpers.display(inline-flex);
+
+	list-style-type: "";
 	border-radius: variables.$db-border-radius-sm;
-	cursor: pointer;
-	font: inherit;
-	color: inherit;
-	flex-shrink: 0;
-	z-index: 2;
-	max-inline-size: variables.$db-sizing-2xl;
-
-	@media screen and (forced-colors: active) {
-		// Windows High Contrast mode forces transparent borders to become visible,
-		// creating boundaries for the button when backgrounds are stripped.
-		border: variables.$db-border-width-xs solid transparent;
-	}
 
-	@media screen and (prefers-reduced-motion: no-preference) {
-		transition: background-color variables.$db-transition-duration-fast;
+	&:has(input:disabled) {
+		opacity: variables.$db-opacity-md;
 	}
 
-	.db-tab-label {
-		max-inline-size: 100%;
+	label {
+		background-color: colors.$db-adaptive-bg-basic-transparent-full-default;
+		padding: variables.$db-spacing-fixed-xs;
+		align-items: center;
 
-		@include helpers.display(block);
+		@include helpers.display(inline-block);
 
-		&:not([data-icon-trailing])::after {
-			content: attr(data-label);
-			font-weight: 700;
-			display: block;
-			block-size: 0;
-			font-size: 0;
-			line-height: 0;
-			padding: 0;
-			margin: 0;
-			overflow: hidden;
-			visibility: hidden;
-		}
+		white-space: nowrap;
+		border: 0;
+		border-radius: variables.$db-border-radius-sm;
+		overflow: hidden;
+		text-overflow: ellipsis;
 
-		&[data-icon]:not([data-show-icon="false"]) {
-			&::before {
-				@extend %icon;
+		@include helpers.hover {
+			&:has(:not(input:disabled)) {
+				background-color: colors.$db-adaptive-bg-basic-transparent-full-hovered;
+			}
 
-				margin-inline-end: variables.$db-spacing-fixed-xs;
-				vertical-align: middle;
+			&:has(input:disabled) {
+				cursor: initial;
 			}
 		}
-	}
 
-	&[data-no-text="true"] .db-tab-label {
-		&[data-icon]::before {
-			margin-inline-end: 0;
-		}
+		@include helpers.hover {
+			&:has(:not(input:disabled)) {
+				background-color: colors.$db-adaptive-bg-basic-transparent-full-hovered;
+			}
 
-		&::after {
-			content: none;
+			&:has(input:disabled) {
+				cursor: initial;
+			}
 		}
-	}
-
-	[data-orientation="vertical"] & .db-tab-label {
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-
-	@extend %db-puls;
-	@include helpers.display(flex);
-
-	[data-density="functional"] & {
-		padding: variables.$db-spacing-fixed-2xs;
 
-		@extend %db-overwrite-font-size-sm;
-	}
+		&:has(input:checked) {
+			font-weight: 700;
+		}
 
-	[data-density="expressive"] & {
-		padding: variables.$db-spacing-fixed-sm;
+		&[data-icon] {
+			padding-inline-start: $with-icon-padding-calc;
 
-		@extend %db-overwrite-font-size-lg;
-	}
+			&::before {
+				position: absolute;
+				transform: translateY(-50%);
+				inset-block-start: 50%;
+				inset-inline-start: calc(
+					0% + #{variables.$db-spacing-fixed-xs}
+				);
+			}
+		}
 
-	&::after {
-		inline-size: 0;
-		block-size: variables.$db-border-width-xs;
+		&[data-icon-trailing] {
+			padding-inline-end: $with-icon-padding-calc;
 
-		@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 !important; // overrides physical `width`/`height` transition from %db-puls in _db-puls.scss
+			&::after {
+				position: absolute;
+				transform: translateY(-50%);
+				inset-block-start: 50%;
+				inset-inline-end: calc(0% + #{variables.$db-spacing-fixed-xs});
+			}
 		}
 
-		[data-orientation="vertical"] & {
-			inline-size: variables.$db-border-width-xs;
-			block-size: 0;
-		}
-	}
+		&:is([data-no-text], [data-no-text="true"]) {
+			@include icons.is-icon-text-replace;
 
-	[data-orientation="vertical"] & {
-		max-inline-size: 100%;
-		flex-shrink: 1;
-	}
+			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}
+			);
 
-	&[aria-selected="true"],
-	&[data-active="true"] {
-		font-weight: 700;
+			&::before {
+				margin-inline-end: 0;
+			}
+		}
 	}
 
-	&:disabled {
-		opacity: variables.$db-opacity-md;
-		cursor: initial;
-	}
+	input {
+		position: absolute;
+		appearance: none;
+		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;
+			}
 
-	// TODO: Investigate why helpers.hover mixin doesn't work here
-	// Other components use @include helpers.hover directly, but for tab-item
-	// it doesn't apply the hover effect. Using native pseudo-classes as workaround.
-	&:not(:disabled):hover,
-	&:not(:disabled):focus-visible {
-		background-color: colors.$db-adaptive-bg-basic-transparent-full-hovered;
+			&::before {
+				@extend %focus-placeholder;
+
+				content: "";
+				position: absolute;
+				inset: 0;
+				border-radius: variables.$db-border-radius-sm;
+				z-index: 10;
+				pointer-events: none;
+			}
+		}
 	}
 }

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

@@ -1,3 +1,4 @@
+/* Variants for adaptive components like input, select, notification, ... */
 .db-visually-hidden,
 [data-visually-hidden=true] {
   clip: rect(0, 0, 0, 0) !important;
@@ -17,15 +18,7 @@
   pointer-events: none !important;
 }
 
-/* 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);
-}
-
-.db-tab-list::-webkit-scrollbar, .db-tab-list::-webkit-scrollbar-corner {
+.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);
 }
 
@@ -46,79 +39,86 @@
     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) {
-  [data-field-sizing=content].db-tab-list:is([data-hide-resizer=true], [data-resize=none]) {
+  .db-tab-list > ul[data-field-sizing=content]: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::-webkit-scrollbar {
+.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:is(:hover, :focus)::-webkit-scrollbar-track, .db-tab-list:is(:hover, :focus)::-webkit-scrollbar-button:single-button {
+.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-full-hovered);
 }
-.db-tab-list:read-only::-webkit-scrollbar-track, .db-tab-list:read-only::-webkit-scrollbar-button:single-button {
+.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);
 }
-.db-tab-list::-webkit-scrollbar-track {
+.db-tab-list > ul::-webkit-scrollbar-track {
   background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
 }
-.db-tab-list::-webkit-scrollbar-thumb {
+.db-tab-list > ul::-webkit-scrollbar-thumb {
   background-color: var(--db-adaptive-bg-basic-transparent-full-pressed);
 }
-.db-tab-list {
+.db-tab-list > ul {
   /* Buttons */
 }
-.db-tab-list::-webkit-scrollbar-button:single-button {
+.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) + var(--db-base-body-icon-font-size-2xs));
 }
-.db-tab-list::-webkit-scrollbar-button:single-button:is(:hover, :focus) {
+.db-tab-list > ul::-webkit-scrollbar-button:single-button:is(:hover, :focus) {
   background-color: var(--db-adaptive-bg-basic-transparent-full-hovered);
 }
-.db-tab-list::-webkit-scrollbar-button:single-button:active {
+.db-tab-list > ul::-webkit-scrollbar-button:single-button:active {
   background-color: var(--db-adaptive-bg-basic-transparent-full-pressed);
 }
-.db-tab-list {
+.db-tab-list > ul {
   /* Up */
 }
-.db-tab-list::-webkit-scrollbar-button:single-button:vertical:decrement {
+.db-tab-list > ul::-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 {
+.db-tab-list > ul {
   /* Down */
 }
-.db-tab-list::-webkit-scrollbar-button:single-button:vertical:increment {
+.db-tab-list > ul::-webkit-scrollbar-button:single-button:vertical:increment {
   background-image: var(--db-scrollbar-button-vertical-increment);
 }
-.db-tab-list {
+.db-tab-list > ul {
   /* Left */
 }
-.db-tab-list::-webkit-scrollbar-button:single-button:horizontal:decrement {
+.db-tab-list > ul::-webkit-scrollbar-button:single-button:horizontal:decrement {
   background-image: var(--db-scrollbar-button-horizontal-decrement);
 }
-.db-tab-list {
+.db-tab-list > ul {
   /* Right */
 }
-.db-tab-list::-webkit-scrollbar-button:single-button:horizontal:increment {
+.db-tab-list > ul::-webkit-scrollbar-button:single-button:horizontal:increment {
   background-image: var(--db-scrollbar-button-horizontal-increment);
 }
-[data-variant=floating].db-tab-list::-webkit-resizer {
+.db-tab-list > ul[data-variant=floating]::-webkit-resizer {
   background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
 }
-[data-variant=floating].db-tab-list::-webkit-scrollbar-corner {
+.db-tab-list > ul[data-variant=floating]::-webkit-scrollbar-corner {
   background-color: var(--db-adaptive-bg-basic-level-1-default);
 }
-.db-tab-list::-webkit-resizer {
+.db-tab-list > ul::-webkit-resizer {
   background-color: var(--db-adaptive-bg-basic-transparent-full-default);
   background-size: 0.5rem;
   background-repeat: no-repeat;
@@ -126,19 +126,17 @@
   background-image: var(--db-textarea-resizer-image);
   border-end-end-radius: var(--db-border-radius-xs);
 }
-.db-tab-list::-webkit-scrollbar-corner {
+.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-2xs);
+  gap: var(--db-spacing-fixed-sm);
   scroll-behavior: smooth;
   padding: 0;
   margin: 0;
 }
-[data-orientation=vertical] .db-tab-list {
-  flex-direction: column;
-  align-items: flex-start;
-}

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

@@ -1,20 +1,18 @@
 @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;
 
-	@extend %db-overwrite-font-size-md;
-	@extend %scrollbar;
+	> ul {
+		@extend %scrollbar;
 
-	[data-orientation="vertical"] & {
-		flex-direction: column;
-		align-items: flex-start;
+		display: flex;
+		gap: variables.$db-spacing-fixed-sm;
+		scroll-behavior: smooth;
+		padding: 0;
+		margin: 0;
 	}
 }

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

@@ -1,3 +1,4 @@
+/* Variants for adaptive components like input, select, notification, ... */
 .db-tab-panel:not([hidden]) {
-  display: block;
+  display: none;
 }

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

@@ -1,3 +1,6 @@
-.db-tab-panel:not([hidden]) {
-	display: block;
+@use "@db-ux/core-foundations/build/styles/variables";
+@use "@db-ux/core-foundations/build/styles/helpers";
+
+.db-tab-panel {
+	@include helpers.display(none);
 }