@db-ux/core-components 3.0.2-shell4-bdb351c → 3.0.3

package/build/components/tabs/tabs.scss

@@ -1,8 +1,7 @@
 @use "@db-ux/core-foundations/build/styles/variables";
 @use "@db-ux/core-foundations/build/styles/colors";
 @use "../../styles/internal/form-components";
-@use "../../styles/internal/indicator";
-@use "../../styles/internal/scrollbar";
+@use "../../styles/internal/db-puls";
 
 $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 
@@ -20,12 +19,12 @@ $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 	}
 }
 
-%horizontal-indicator {
+%horizontal-pulse {
 	.db-tab-item {
-		@include indicator.set-indicator-horizontal;
+		@include db-puls.set-db-puls-horizontal;
 
 		&:has(input:checked) {
-			@include indicator.show-indicator-horizontal;
+			@include db-puls.show-db-puls-horizontal;
 
 			&::after {
 				inset-block-end: calc(
@@ -40,9 +39,9 @@ $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 	}
 }
 
-%vertical-indicator {
+%vertical-pulse {
 	.db-tab-item {
-		@include indicator.set-indicator-vertical;
+		@include db-puls.set-db-puls-vertical;
 
 		&::after {
 			inset-inline-start: 0;
@@ -50,20 +49,29 @@ $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 		}
 
 		&:has(input:checked) {
-			@include indicator.show-indicator-vertical;
+			@include db-puls.show-db-puls-vertical;
 		}
 	}
 }
 
-%indicator-track {
+%pulse-track {
 	background-color: colors.$db-adaptive-bg-basic-transparent-semi-default;
 	content: "";
 	border-radius: variables.$db-border-radius-xs;
 	position: absolute;
 }
 
+@mixin angular-button-workaround() {
+	> .db-button,
+	&:is(.db-button) {
+		@content;
+	}
+}
+
 .db-tabs {
 	$db-tabs-z-index-tab-list: 20;
+	$db-tabs-z-index-button-background: 21;
+	$db-tabs-z-index-button: 22;
 
 	@extend %angular-workaround;
 
@@ -88,7 +96,7 @@ $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 	}
 
 	.db-tab-item {
-		@extend %indicator;
+		@extend %db-puls;
 	}
 
 	/*
@@ -102,9 +110,9 @@ $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 		}
 
 		.db-tab-list {
-			/* horizontal track for indicator */
+			/* horizontal track for pulse */
 			&::before {
-				@extend %indicator-track;
+				@extend %pulse-track;
 
 				block-size: variables.$db-border-width-xs;
 				inset-inline: variables.$db-spacing-fixed-xs;
@@ -118,7 +126,7 @@ $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 			}
 
 			> ul {
-				@extend %horizontal-indicator;
+				@extend %horizontal-pulse;
 
 				overflow: auto hidden;
 				inline-size: 100%;
@@ -206,9 +214,9 @@ $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 				}
 			}
 
-			/* vertical track for indicator */
+			/* vertical track for pulse */
 			&::before {
-				@extend %indicator-track;
+				@extend %pulse-track;
 
 				inline-size: variables.$db-border-width-xs;
 				inset-block: variables.$db-spacing-fixed-xs;
@@ -216,7 +224,7 @@ $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 			}
 
 			> ul {
-				@extend %vertical-indicator;
+				@extend %vertical-pulse;
 
 				flex-direction: column;
 				block-size: 100%;
@@ -283,34 +291,71 @@ $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 	}
 
 	&[data-scroll-behavior="arrows"] {
-		@include scrollbar.set-overflow-scroll-buttons;
-
 		.db-tab-list {
 			> ul {
-				@supports (scrollbar-width: none) {
-					scrollbar-width: none;
-				}
-
 				&::-webkit-scrollbar {
 					display: none;
 				}
 			}
 		}
 
-		&:has(.overflow-scroll-left-button) {
+		&:has(.tabs-scroll-left) {
 			&::before {
 				content: "";
 			}
 		}
 
-		&:has(.overflow-scroll-right-button) {
+		&:has(.tabs-scroll-right) {
 			&::after {
 				content: "";
 			}
 		}
 
 		&:has(.db-button) {
-			@include scrollbar.set-overflow-scroll-button-backgrounds;
+			&::before,
+			&::after {
+				position: absolute;
+				z-index: $db-tabs-z-index-button-background;
+				background-color: colors.$db-adaptive-bg-basic-level-1-default;
+				inline-size: variables.$db-sizing-md;
+				block-size: calc(
+					#{variables.$db-spacing-fixed-sm} +
+						#{variables.$db-sizing-md}
+				);
+				flex: 0 0 auto;
+			}
+
+			&::before {
+				inset-inline-start: 0;
+			}
+
+			&::after {
+				inset-inline-end: 0;
+			}
+		}
+
+		/*
+		 * Scroll left / right buttons
+		 */
+		.tabs-scroll-left {
+			@include angular-button-workaround() {
+				inset-inline-start: 0;
+			}
+		}
+
+		.tabs-scroll-right {
+			@include angular-button-workaround() {
+				inset-inline-end: 0;
+			}
+		}
+
+		.tabs-scroll-left,
+		.tabs-scroll-right {
+			@include angular-button-workaround() {
+				position: absolute;
+				z-index: $db-tabs-z-index-button;
+				inset-block: variables.$db-spacing-fixed-xs;
+			}
 		}
 	}
 }

package/build/components/tag/tag.css

@@ -9,7 +9,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 /* Screen sizes */
 /* Container sizes */
 .db-tag label, .db-tag a {
-  transition: outline var(--db-transition-duration-extra-fast), background-color var(--db-transition-straight-emotional);
+  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 {
@@ -1229,7 +1229,9 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-icon-margin-end: 0;
 }
 .db-tag:not([data-no-text=true]) {
-  padding-inline: var(--db-spacing-fixed-2xs);
+  --db-padding-inline-start: var(--db-spacing-fixed-2xs);
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  padding-inline: var(--db-padding-inline-start) var(--db-spacing-fixed-2xs);
 }
 .db-tag:not([data-no-text=true]):has(.db-tab-remove-button) {
   padding-inline-end: 0;
@@ -1373,16 +1375,20 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 }
 .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-icon]:not([data-show-icon=false])::before {
   position: absolute;
-  inset-block-start: var(--db-icon-passing-inset-block-start, calc(50% - 0.5em));
-  inset-inline-start: var(--db-icon-passing-inset-inline-start, var(--db-spacing-fixed-2xs));
+  inset-block-start: calc(50% - 0.5em);
+  inset-inline-start: var(--db-spacing-fixed-2xs);
   pointer-events: none;
   z-index: 1;
 }
 .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-icon]:not([data-show-icon=false]) a,
 .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-icon]:not([data-show-icon=false]) button,
 .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-icon]:not([data-show-icon=false]) label {
+  --db-padding-inline-start: calc(
+  	var(--db-spacing-fixed-2xs) + var(--db-icon-margin-end, var(--db-spacing-fixed-xs)) +
+  		var(--db-icon-font-size)
+  );
   /* stylelint-disable-next-line db-ux/use-spacings */
-  padding-inline-start: var(--db-icon-passing-padding-inline-start, calc(var(--db-spacing-fixed-2xs) + var(--db-icon-margin-end, var(--db-spacing-fixed-xs)) + var(--db-icon-font-size)));
+  padding-inline-start: var(--db-padding-inline-start);
 }
 .db-tag:has(label, button:not(.db-tab-remove-button), a) input:checked {
   background-color: transparent;

package/build/components/tag/tag.scss

@@ -25,7 +25,11 @@
 	}
 
 	&:not([data-no-text="true"]) {
-		padding-inline: variables.$db-spacing-fixed-2xs;
+		--db-padding-inline-start: #{variables.$db-spacing-fixed-2xs};
+
+		/* stylelint-disable-next-line db-ux/use-spacings */
+		padding-inline: var(--db-padding-inline-start)
+			#{variables.$db-spacing-fixed-2xs};
 
 		&:has(.db-tab-remove-button) {
 			padding-inline-end: 0;

package/build/components/textarea/textarea.css

@@ -196,7 +196,7 @@ input[type=radio]:checked) > label {
 }
 
 .db-textarea[data-variant=floating]:has(textarea:is(:focus-within, :not(:placeholder-shown)))::before, .db-textarea textarea::-webkit-scrollbar, .db-textarea textarea::-webkit-scrollbar-corner {
-  transition: outline var(--db-transition-duration-extra-fast), background-color var(--db-transition-straight-emotional);
+  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 {

package/build/components/tooltip/tooltip.css

@@ -409,7 +409,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   visibility: hidden;
   z-index: 1337;
   white-space: normal;
-  max-inline-size: var(--db-container-xs);
+  max-inline-size: min(var(--db-container-xs), 100vw - 2 * var(--db-spacing-fixed-md));
   block-size: fit-content;
   inline-size: fit-content;
 }