@db-ux/core-components 3.0.2-copilot2-e7bf98b → 3.0.2-shell2-badc28f

package/build/components/shell/shell.scss

@@ -0,0 +1,84 @@
+@use "sass:string";
+@use "@db-ux/core-foundations/build/styles/variables";
+@use "@db-ux/core-foundations/build/styles/screen-sizes";
+@use "@db-ux/core-foundations/build/styles/colors";
+@use "@db-ux/core-foundations/build/styles/helpers";
+@use "../../styles/internal/control-panel-desktop";
+@use "../../styles/internal/control-panel-mobile";
+@use "../../styles/internal/custom-elements";
+@use "../../styles/internal/form-components";
+
+@forward "shell-desktop";
+@forward "shell-mobile";
+
+%fade-in-loading-fonts {
+	&[data-fade-in="true"] {
+		opacity: 0;
+
+		&:not([data-fonts-loaded]),
+		&[data-fonts-loaded="true"] {
+			opacity: 1;
+		}
+
+		@media screen and (prefers-reduced-motion: no-preference) {
+			transition: opacity variables.$db-transition-straight-emotional;
+		}
+	}
+}
+
+body {
+	overflow: hidden;
+}
+
+.db-shell {
+	@extend %fade-in-loading-fonts;
+
+	block-size: 100vh;
+	inline-size: 100vw;
+	display: grid;
+
+	> main {
+		grid-area: main;
+		overflow-y: auto;
+	}
+
+	> main,
+	> header {
+		max-inline-size: 100vw;
+	}
+
+	#{string.unquote(custom-elements.$control-panel-desktop)},
+	#{string.unquote(custom-elements.$control-panel-mobile)} {
+		grid-area: control-panel;
+	}
+
+	&[data-control-panel-desktop-position="left"] {
+		#{string.unquote(custom-elements.$control-panel-desktop)} {
+			@extend %control-panel-desktop-vertical-orientation;
+		}
+	}
+
+	&[data-control-panel-desktop-position="top"] {
+		#{string.unquote(custom-elements.$control-panel-desktop)} {
+			@extend %control-panel-desktop-horizontal-orientation;
+		}
+	}
+
+	&[data-control-panel-mobile-position="top"] {
+		#{string.unquote(custom-elements.$control-panel-mobile)} {
+			@extend %control-panel-mobile-position-top;
+		}
+	}
+
+	&[data-control-panel-mobile-position="bottom"] {
+		#{string.unquote(custom-elements.$control-panel-mobile)} {
+			@extend %control-panel-mobile-position-bottom;
+		}
+	}
+
+	&[data-show-sub-navigation="false"] {
+		#{string.unquote(custom-elements.$shell-sub-navigation)} {
+			display: none;
+		}
+	}
+}

package/build/components/shell-sub-navigation/shell-sub-navigation.css

@@ -0,0 +1,11 @@
+/* Sub components for shell */
+.db-shell-sub-navigation {
+  grid-area: sub-navigation;
+  overflow: hidden;
+}
+.db-shell-sub-navigation > .db-shell-sub-navigation-button {
+  grid-area: button;
+}
+.db-shell-sub-navigation .db-navigation {
+  grid-area: navigation;
+}

package/build/components/shell-sub-navigation/shell-sub-navigation.scss

@@ -0,0 +1,15 @@
+@use "sass:string";
+@use "../../styles/internal/custom-elements";
+
+.db-shell-sub-navigation {
+	grid-area: sub-navigation;
+	overflow: hidden;
+
+	> .db-shell-sub-navigation-button {
+		grid-area: button;
+	}
+
+	.db-navigation {
+		grid-area: navigation;
+	}
+}

package/build/components/stack/stack-web-component.css

@@ -43,6 +43,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+/* Sub components for shell */
 .db-stack {
   display: flex;
   gap: var(--db-spacing-fixed-sm);

package/build/components/stack/stack.css

@@ -43,6 +43,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+/* Sub components for shell */
 .db-stack {
   display: flex;
   gap: var(--db-spacing-fixed-sm);

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

@@ -3,7 +3,6 @@
 @use "@db-ux/core-foundations/build/styles/icons";
 @use "@db-ux/core-foundations/build/styles/helpers";
 @use "../../styles/internal/component";
-@use "../../styles/internal/db-puls";
 @use "../../styles/internal/form-components";
 
 $with-icon-padding-calc: calc(

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

@@ -63,7 +63,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 @layer variables {}
 
 .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);
+  transition: outline var(--db-transition-duration-extra-fast), background-color var(--db-transition-straight-emotional);
 }
 
 @keyframes show-right-to-left {

package/build/components/tabs/tabs.css

@@ -130,6 +130,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   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 screen and (prefers-reduced-motion: no-preference) {
   .db-tabs .db-tab-item::after {
@@ -137,6 +138,85 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   }
 }
 
+@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 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%));
+  }
+}
+@keyframes rotate {
+  100% {
+    transform: rotate(1turn);
+  }
+}
 .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],
@@ -209,7 +289,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   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 {
@@ -229,8 +308,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   block-size: 0;
   inline-size: var(--db-border-width-xs);
   transform: translate(0, -50%);
-  inset-block: 50% auto;
-  background-color: var(--db-brand-on-bg-basic-emphasis-70-default);
+  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 {
@@ -238,7 +316,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   z-index: -2;
 }
 .db-tabs[data-orientation=vertical] .db-tab-list > ul .db-tab-item:has(input:checked)::after {
-  block-size: 100%;
+  block-size: var(--indicator-vertical-block-size, 100%);
   inline-size: var(--db-border-width-xs);
 }
 @media (forced-colors: active) {
@@ -312,7 +390,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   inline-size: 100%;
 }
 .db-tabs:not([data-orientation=vertical]) .db-tab-list {
-  /* horizontal track for pulse */
+  /* horizontal track for indicator */
 }
 .db-tabs:not([data-orientation=vertical]) .db-tab-list::before {
   block-size: var(--db-border-width-xs);
@@ -359,7 +437,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   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 */
+  /* vertical track for indicator */
 }
 .db-tabs[data-orientation=vertical] .db-tab-list .db-tab-item label {
   position: relative;
@@ -415,13 +493,31 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
    * Scroll left / right buttons
    */
 }
+.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=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] .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) {
+  position: absolute;
+  z-index: 22;
+  inset-block: var(--db-overflow-scroll-button-inset-block, var(--db-spacing-fixed-xs));
+}
+@supports (scrollbar-width: none) {
+  .db-tabs[data-scroll-behavior=arrows] .db-tab-list > ul {
+    scrollbar-width: none;
+  }
+}
 .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 {
+.db-tabs[data-scroll-behavior=arrows]:has(.overflow-scroll-left-button)::before {
   content: "";
 }
-.db-tabs[data-scroll-behavior=arrows]:has(.tabs-scroll-right)::after {
+.db-tabs[data-scroll-behavior=arrows]:has(.overflow-scroll-right-button)::after {
   content: "";
 }
 .db-tabs[data-scroll-behavior=arrows]:has(.db-button)::before, .db-tabs[data-scroll-behavior=arrows]:has(.db-button)::after {
@@ -429,25 +525,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   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));
+  block-size: calc(var(--db-overflow-scroll-button-background-block-size, 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;
+  inset-inline-start: var(--db-overflow-scroll-button-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);
-}

package/build/components/tabs/tabs.scss

@@ -1,7 +1,8 @@
 @use "@db-ux/core-foundations/build/styles/variables";
 @use "@db-ux/core-foundations/build/styles/colors";
 @use "../../styles/internal/form-components";
-@use "../../styles/internal/db-puls";
+@use "../../styles/internal/indicator";
+@use "../../styles/internal/scrollbar";
 
 $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 
@@ -19,12 +20,12 @@ $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 	}
 }
 
-%horizontal-pulse {
+%horizontal-indicator {
 	.db-tab-item {
-		@include db-puls.set-db-puls-horizontal;
+		@include indicator.set-indicator-horizontal;
 
 		&:has(input:checked) {
-			@include db-puls.show-db-puls-horizontal;
+			@include indicator.show-indicator-horizontal;
 
 			&::after {
 				inset-block-end: calc(
@@ -39,9 +40,9 @@ $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 	}
 }
 
-%vertical-pulse {
+%vertical-indicator {
 	.db-tab-item {
-		@include db-puls.set-db-puls-vertical;
+		@include indicator.set-indicator-vertical;
 
 		&::after {
 			inset-inline-start: 0;
@@ -49,29 +50,20 @@ $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 		}
 
 		&:has(input:checked) {
-			@include db-puls.show-db-puls-vertical;
+			@include indicator.show-indicator-vertical;
 		}
 	}
 }
 
-%pulse-track {
+%indicator-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;
 
@@ -96,7 +88,7 @@ $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 	}
 
 	.db-tab-item {
-		@extend %db-puls;
+		@extend %indicator;
 	}
 
 	/*
@@ -110,9 +102,9 @@ $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 		}
 
 		.db-tab-list {
-			/* horizontal track for pulse */
+			/* horizontal track for indicator */
 			&::before {
-				@extend %pulse-track;
+				@extend %indicator-track;
 
 				block-size: variables.$db-border-width-xs;
 				inset-inline: variables.$db-spacing-fixed-xs;
@@ -126,7 +118,7 @@ $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 			}
 
 			> ul {
-				@extend %horizontal-pulse;
+				@extend %horizontal-indicator;
 
 				overflow: auto hidden;
 				inline-size: 100%;
@@ -214,9 +206,9 @@ $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 				}
 			}
 
-			/* vertical track for pulse */
+			/* vertical track for indicator */
 			&::before {
-				@extend %pulse-track;
+				@extend %indicator-track;
 
 				inline-size: variables.$db-border-width-xs;
 				inset-block: variables.$db-spacing-fixed-xs;
@@ -224,7 +216,7 @@ $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 			}
 
 			> ul {
-				@extend %vertical-pulse;
+				@extend %vertical-indicator;
 
 				flex-direction: column;
 				block-size: 100%;
@@ -291,71 +283,34 @@ $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(.tabs-scroll-left) {
+		&:has(.overflow-scroll-left-button) {
 			&::before {
 				content: "";
 			}
 		}
 
-		&:has(.tabs-scroll-right) {
+		&:has(.overflow-scroll-right-button) {
 			&::after {
 				content: "";
 			}
 		}
 
 		&:has(.db-button) {
-			&::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;
-			}
+			@include scrollbar.set-overflow-scroll-button-backgrounds;
 		}
 	}
 }

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), border-color var(--db-transition-straight-emotional), background-color var(--db-transition-straight-emotional);
+  transition: outline var(--db-transition-duration-extra-fast), background-color var(--db-transition-straight-emotional);
 }
 
 @keyframes show-right-to-left {
@@ -1229,9 +1229,7 @@ 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]) {
-  --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);
+  padding-inline: var(--db-spacing-fixed-2xs);
 }
 .db-tag:not([data-no-text=true]):has(.db-tab-remove-button) {
   padding-inline-end: 0;
@@ -1375,20 +1373,16 @@ 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: calc(50% - 0.5em);
-  inset-inline-start: var(--db-spacing-fixed-2xs);
+  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));
   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-padding-inline-start);
+  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)));
 }
 .db-tag:has(label, button:not(.db-tab-remove-button), a) input:checked {
   background-color: transparent;

package/build/components/tag/tag.scss

@@ -25,11 +25,7 @@
 	}
 
 	&:not([data-no-text="true"]) {
-		--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};
+		padding-inline: 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), border-color var(--db-transition-straight-emotional), background-color var(--db-transition-straight-emotional);
+  transition: outline var(--db-transition-duration-extra-fast), background-color var(--db-transition-straight-emotional);
 }
 
 @keyframes show-right-to-left {