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

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

@@ -1,138 +1,140 @@
 @use "@db-ux/core-foundations/build/styles/variables";
 @use "@db-ux/core-foundations/build/styles/colors";
-@use "@db-ux/core-foundations/build/styles/icons";
 @use "@db-ux/core-foundations/build/styles/helpers";
-@use "../../styles/internal/component";
+@use "@db-ux/core-foundations/build/styles/icons";
+@use "@db-ux/core-foundations/build/styles/fonts";
 @use "../../styles/internal/db-puls";
-@use "../../styles/internal/form-components";
 
-$with-icon-padding-calc: calc(
-	#{variables.$db-spacing-fixed-xs} + #{variables.$db-spacing-fixed-sm} +
-		#{form-components.$font-size-height}
-);
+db-tab-item,
+dbtabitem {
+	display: contents;
+	vertical-align: top; // fallback if display: contents fails: prevents baseline gap
+}
 
 .db-tab-item {
 	position: relative;
-
-	@include helpers.display(inline-flex);
-
-	list-style-type: "";
+	background-color: colors.$db-adaptive-bg-basic-transparent-full-default;
+	padding: variables.$db-spacing-fixed-xs;
+	overflow: visible;
+	align-items: center;
+	justify-content: center;
+	white-space: nowrap;
+	border: 0;
 	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;
+	}
 
-	&:has(input:disabled) {
-		opacity: variables.$db-opacity-md;
+	@media screen and (prefers-reduced-motion: no-preference) {
+		transition: background-color variables.$db-transition-duration-fast;
 	}
 
-	label {
-		background-color: colors.$db-adaptive-bg-basic-transparent-full-default;
-		padding: variables.$db-spacing-fixed-xs;
-		align-items: center;
+	.db-tab-label {
+		max-inline-size: 100%;
 
-		@include helpers.display(inline-block);
+		@include helpers.display(block);
 
-		white-space: nowrap;
-		border: 0;
-		border-radius: variables.$db-border-radius-sm;
-		overflow: hidden;
-		text-overflow: ellipsis;
+		&: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;
+		}
 
-		@include helpers.hover {
-			&:has(:not(input:disabled)) {
-				background-color: colors.$db-adaptive-bg-basic-transparent-full-hovered;
-			}
+		&[data-icon]:not([data-show-icon="false"]) {
+			&::before {
+				@extend %icon;
 
-			&:has(input:disabled) {
-				cursor: initial;
+				margin-inline-end: variables.$db-spacing-fixed-xs;
+				vertical-align: middle;
 			}
 		}
+	}
 
-		@include helpers.hover {
-			&:has(:not(input:disabled)) {
-				background-color: colors.$db-adaptive-bg-basic-transparent-full-hovered;
-			}
-
-			&:has(input:disabled) {
-				cursor: initial;
-			}
+	&[data-no-text="true"] .db-tab-label {
+		&[data-icon]::before {
+			margin-inline-end: 0;
 		}
 
-		&:has(input:checked) {
-			font-weight: 700;
+		&::after {
+			content: none;
 		}
+	}
+
+	[data-orientation="vertical"] & .db-tab-label {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
 
-		&[data-icon] {
-			padding-inline-start: $with-icon-padding-calc;
+	@extend %db-puls;
+	@include helpers.display(flex);
 
-			&::before {
-				position: absolute;
-				transform: translateY(-50%);
-				inset-block-start: 50%;
-				inset-inline-start: calc(
-					0% + #{variables.$db-spacing-fixed-xs}
-				);
-			}
-		}
+	[data-density="functional"] & {
+		padding: variables.$db-spacing-fixed-2xs;
 
-		&[data-icon-trailing] {
-			padding-inline-end: $with-icon-padding-calc;
+		@extend %db-overwrite-font-size-sm;
+	}
 
-			&::after {
-				position: absolute;
-				transform: translateY(-50%);
-				inset-block-start: 50%;
-				inset-inline-end: calc(0% + #{variables.$db-spacing-fixed-xs});
-			}
-		}
+	[data-density="expressive"] & {
+		padding: variables.$db-spacing-fixed-sm;
 
-		&:is([data-no-text], [data-no-text="true"]) {
-			@include icons.is-icon-text-replace;
+		@extend %db-overwrite-font-size-lg;
+	}
 
-			padding: 0;
-			inline-size: calc(
-				#{$with-icon-padding-calc} - #{variables.$db-spacing-fixed-2xs}
-			);
-			block-size: calc(
-				#{form-components.$font-size-height} +
-					#{variables.$db-spacing-fixed-xs}
-			);
+	&::after {
+		inline-size: 0;
+		block-size: variables.$db-border-width-xs;
 
-			&::before {
-				margin-inline-end: 0;
-			}
+		@media screen and (prefers-reduced-motion: no-preference) {
+			transition:
+				block-size variables.$db-transition-duration-fast
+					variables.$db-transition-timing-emotional,
+				inline-size variables.$db-transition-duration-fast
+					variables.$db-transition-timing-emotional !important; // overrides physical `width`/`height` transition from %db-puls in _db-puls.scss
+		}
+
+		[data-orientation="vertical"] & {
+			inline-size: variables.$db-border-width-xs;
+			block-size: 0;
 		}
 	}
 
-	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;
-			}
+	[data-orientation="vertical"] & {
+		max-inline-size: 100%;
+		flex-shrink: 1;
+	}
 
-			&::before {
-				@extend %focus-placeholder;
-
-				content: "";
-				position: absolute;
-				inset: 0;
-				border-radius: variables.$db-border-radius-sm;
-				z-index: 10;
-				pointer-events: none;
-			}
-		}
+	&[aria-selected="true"],
+	&[data-active="true"] {
+		font-weight: 700;
+	}
+
+	&:disabled {
+		opacity: variables.$db-opacity-md;
+		cursor: initial;
+	}
+
+	// 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;
 	}
 }

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

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

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

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

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

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

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

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