@db-ux/core-components 4.13.1-angular-signal-forms12-ac097f6 → 4.14.0

package/build/styles/internal/_icon-passing.scss

@@ -3,27 +3,36 @@
 
 $interactive-button-selectors: "label,button,a";
 
-@mixin icon-passing($inline-start: variables.$db-spacing-fixed-sm) {
+@mixin icon-passing(
+	$inline-start: variables.$db-spacing-fixed-sm,
+	$block-start: calc(50% - 0.5em)
+) {
 	&[data-icon-leading]:not([data-show-icon-leading="false"]),
 	&[data-icon]:not([data-show-icon="false"]) {
 		&::before {
 			position: absolute;
-			inset-block-start: calc(50% - 0.5em);
+			inset-block-start: var(
+				--db-icon-passing-inset-block-start,
+				#{$block-start}
+			);
 			inset-inline-start: var(
-				--db-icon-passing-inline-start,
+				--db-icon-passing-inset-inline-start,
 				#{$inline-start}
 			);
 			pointer-events: none;
 			z-index: 1;
 		}
 
-		#{$interactive-button-selectors} {
-			--db-padding-inline-start: calc(
-				#{$inline-start} + #{icons.$default-icon-margin-end} + 1lh
-			);
-
+		> :is(#{$interactive-button-selectors}),
+		> * > :is(#{$interactive-button-selectors}) {
 			/* 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(
+					#{$inline-start} + #{icons.$default-icon-margin-end} +
+						var(--db-icon-font-size)
+				)
+			);
 		}
 	}
 }
@@ -38,7 +47,8 @@ $interactive-button-selectors: "label,button,a";
 			z-index: 1;
 		}
 
-		#{$interactive-button-selectors} {
+		> :is(#{$interactive-button-selectors}),
+		> * > :is(#{$interactive-button-selectors}) {
 			padding-inline-end: calc(
 				#{$inline-end} + #{icons.$default-icon-margin-end} +
 					var(--db-icon-font-size)

package/build/styles/internal/_link-components.scss

@@ -8,7 +8,10 @@
 	@include helpers.display(inline-block);
 
 	&:not([data-wrap="true"]) {
-		block-size: variables.$db-sizing-sm;
+		@include helpers.display(inline-flex);
+
+		block-size: 1lh;
+		align-items: center;
 	}
 }
 
@@ -64,4 +67,8 @@
 		opacity: variables.$db-opacity-md;
 		pointer-events: none;
 	}
+
+	&::after {
+		text-decoration: none;
+	}
 }

package/build/styles/internal/_scrollbar.scss

@@ -111,3 +111,74 @@ $scrollbar-width: helpers.px-to-rem(8);
 		border-end-end-radius: variables.$db-border-radius-xs;
 	}
 }
+
+@mixin angular-button-workaround() {
+	> .db-button,
+	&:is(.db-button) {
+		@content;
+	}
+}
+
+$db-overflow-scroll-buttons-background: 21;
+$db-overflow-scroll-buttons-button: 22;
+
+@mixin set-overflow-scroll-button-backgrounds {
+	&::before,
+	&::after {
+		position: absolute;
+		z-index: $db-overflow-scroll-buttons-background;
+		background-color: colors.$db-adaptive-bg-basic-level-1-default;
+		inline-size: variables.$db-sizing-md;
+		block-size: calc(
+			var(
+					--db-overflow-scroll-button-background-block-size,
+					#{variables.$db-spacing-fixed-sm}
+				) +
+				#{variables.$db-sizing-md}
+		);
+		flex: 0 0 auto;
+	}
+
+	&::before {
+		inset-inline-start: var(
+			--db-overflow-scroll-button-inset-inline-start,
+			0
+		);
+	}
+
+	&::after {
+		inset-inline-end: 0;
+	}
+}
+
+@mixin set-overflow-scroll-buttons {
+	/*
+	 * Scroll left / right buttons
+	 */
+	.overflow-scroll-left-button {
+		@include angular-button-workaround {
+			inset-inline-start: var(
+				--db-overflow-scroll-button-inset-inline-start,
+				0
+			);
+		}
+	}
+
+	.overflow-scroll-right-button {
+		@include angular-button-workaround {
+			inset-inline-end: 0;
+		}
+	}
+
+	.overflow-scroll-left-button,
+	.overflow-scroll-right-button {
+		@include angular-button-workaround {
+			position: absolute;
+			z-index: $db-overflow-scroll-buttons-button;
+			inset-block: var(
+				--db-overflow-scroll-button-inset-block,
+				#{variables.$db-spacing-fixed-xs}
+			);
+		}
+	}
+}