@db-ux/core-components 4.12.0 → 4.13.0-shell-f221975

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

@@ -3,27 +3,35 @@
 
 $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}) {
 			/* 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 +46,7 @@ $interactive-button-selectors: "label,button,a";
 			z-index: 1;
 		}
 
-		#{$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/{_db-puls.scss → _indicator.scss}

@@ -2,33 +2,54 @@
 @use "@db-ux/core-foundations/build/styles/screen-sizes";
 @use "@db-ux/core-foundations/build/styles/colors";
 
-@mixin set-db-puls-horizontal() {
+$indicator-background: linear-gradient(
+	135deg,
+	var(--db-pride-red, #{colors.$db-brand-on-bg-basic-emphasis-70-default})
+		16.7%,
+	var(--db-pride-orange, #{colors.$db-brand-on-bg-basic-emphasis-70-default})
+		0,
+	var(--db-pride-orange, #{colors.$db-brand-on-bg-basic-emphasis-70-default})
+		33.4%,
+	var(--db-pride-yellow, #{colors.$db-brand-on-bg-basic-emphasis-70-default})
+		0,
+	var(--db-pride-yellow, #{colors.$db-brand-on-bg-basic-emphasis-70-default})
+		50.1%,
+	var(--db-pride-green, #{colors.$db-brand-on-bg-basic-emphasis-70-default}) 0,
+	var(--db-pride-green, #{colors.$db-brand-on-bg-basic-emphasis-70-default})
+		66.8%,
+	var(--db-pride-blue, #{colors.$db-brand-on-bg-basic-emphasis-70-default}) 0,
+	var(--db-pride-blue, #{colors.$db-brand-on-bg-basic-emphasis-70-default})
+		83.5%,
+	var(--db-pride-violet, #{colors.$db-brand-on-bg-basic-emphasis-70-default})
+		0
+);
+
+@mixin set-indicator-horizontal() {
 	&::after {
 		block-size: variables.$db-border-width-xs;
 		inline-size: 0;
 		transform: translate(-50%, 0);
 		inset-inline-start: 50%;
-		background-color: colors.$db-brand-on-bg-basic-emphasis-70-default;
 		inset-block: auto calc(-1 * #{variables.$db-spacing-fixed-xs});
 	}
 }
 
-@mixin set-db-puls-vertical() {
+@mixin set-indicator-vertical() {
 	&::after {
 		block-size: 0;
 		inline-size: variables.$db-border-width-xs;
 		transform: translate(0, -50%);
-		inset-block: 50% auto;
-		background-color: colors.$db-brand-on-bg-basic-emphasis-70-default;
+		inset-block: var(--indicator-vertical-inset-block-start, 50%) auto;
 		inset-inline-start: calc(-1 * #{variables.$db-spacing-fixed-xs});
 	}
 }
 
-%db-puls {
+%indicator {
 	&::after {
 		content: "";
 		position: absolute;
 		border-radius: variables.$db-border-radius-xs;
+		background: $indicator-background;
 
 		@media (prefers-reduced-motion: no-preference) {
 			transition:
@@ -40,16 +61,16 @@
 	}
 }
 
-%db-puls-auto {
-	@extend %db-puls;
-	@include set-db-puls-vertical;
+%indicator-auto {
+	@extend %indicator;
+	@include set-indicator-vertical;
 
 	@include screen-sizes.screen("md") {
-		@include set-db-puls-horizontal;
+		@include set-indicator-horizontal;
 	}
 }
 
-@mixin show-db-puls-horizontal() {
+@mixin show-indicator-horizontal() {
 	&::after {
 		block-size: variables.$db-border-width-xs;
 		inline-size: 100%;
@@ -61,9 +82,9 @@
 	}
 }
 
-@mixin show-db-puls-vertical() {
+@mixin show-indicator-vertical() {
 	&::after {
-		block-size: 100%;
+		block-size: var(--indicator-vertical-block-size, 100%);
 		inline-size: variables.$db-border-width-xs;
 
 		@media (forced-colors: active), print {
@@ -73,10 +94,10 @@
 	}
 }
 
-%show-db-puls-auto {
-	@include show-db-puls-vertical;
+%show-indicator-auto {
+	@include show-indicator-vertical;
 
 	@include screen-sizes.screen("md") {
-		@include show-db-puls-horizontal;
+		@include show-indicator-horizontal;
 	}
 }

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

@@ -5,7 +5,9 @@
 @use "./component";
 
 %db-link-height {
-	@include helpers.display(inline-block);
+	@include helpers.display(inline-flex);
+
+	align-items: center;
 
 	&:not([data-wrap="true"]) {
 		block-size: variables.$db-sizing-sm;
@@ -64,4 +66,8 @@
 		opacity: variables.$db-opacity-md;
 		pointer-events: none;
 	}
+
+	&::after {
+		text-decoration: none;
+	}
 }

package/build/styles/internal/_navigation-item.scss

@@ -0,0 +1,122 @@
+@use "sass:string";
+@use "@db-ux/core-foundations/build/styles/screen-sizes";
+@use "@db-ux/core-foundations/build/styles/variables";
+@use "@db-ux/core-foundations/build/styles/colors";
+@use "@db-ux/core-foundations/build/styles/fonts";
+@use "@db-ux/core-foundations/build/styles/helpers";
+@use "@db-ux/core-foundations/build/styles/icons";
+@use "../../styles/internal/custom-elements";
+@use "../../styles/internal/icon-passing";
+@use "../../styles/internal/component";
+
+@mixin direct-navigation-items {
+	#{string.unquote(custom-elements.$control-panel-navigation-item)},
+	#{string.unquote(custom-elements.$control-panel-navigation-item-group)} {
+		@content;
+	}
+}
+
+@mixin active-navigation-item() {
+	&:has([aria-current="page"]),
+	&:has([data-active="true"]),
+	&[aria-current="page"],
+	&[data-active="true"] {
+		@content;
+	}
+}
+
+@mixin navigation-item-group-menu-triangle-vertical() {
+	&::before {
+		content: "";
+		position: absolute;
+		inset-block-start: 0;
+		inset-inline-start: 0;
+		block-size: 100%;
+		inline-size: var(--db-control-panel-navigation-item-inline-size, 100%);
+		background-color: transparent;
+		transform: translateX(-100%);
+		clip-path: var(
+			--db-control-panel-navigation-item-clip-path,
+			polygon(
+				10% calc(1lh + #{variables.$db-spacing-fixed-2xs}),
+				100% 0,
+				100% 100%
+			)
+		);
+	}
+
+	&::after {
+		content: "";
+		position: absolute;
+		padding: variables.$db-spacing-fixed-xs;
+
+		// #{$db-spacing-fixed-3xs} for box shadow
+		inset-block-start: #{variables.$db-spacing-fixed-3xs};
+		inset-inline-end: calc(-1 * #{variables.$db-spacing-fixed-xs});
+		block-size: calc(100% - 2 * #{variables.$db-spacing-fixed-3xs});
+		inline-size: variables.$db-spacing-fixed-xs;
+	}
+}
+
+%navigation-item-interactive-element {
+	@extend %transparent-border;
+	@extend %db-overwrite-font-size-md;
+
+	background-color: colors.$db-adaptive-bg-basic-transparent-full-default;
+	cursor: pointer;
+	inline-size: 100%;
+	display: inline-flex;
+	border-radius: variables.$db-border-radius-sm;
+	padding: variables.$db-spacing-fixed-xs variables.$db-spacing-fixed-sm;
+	text-align: start;
+	align-items: center; // Centering the content vertically and horizontally
+	min-block-size: variables.$db-sizing-md;
+
+	@include helpers.hover {
+		background-color: colors.$db-adaptive-bg-basic-transparent-full-hovered;
+	}
+
+	@include helpers.active {
+		background-color: colors.$db-adaptive-bg-basic-transparent-full-pressed;
+	}
+}
+
+%navigation-item {
+	@extend %db-overwrite-font-size-md;
+
+	position: relative;
+	display: flex;
+	block-size: fit-content;
+
+	// Mobile
+	@include screen-sizes.screen-min-max(
+		(
+			max: "sm"
+		)
+	) {
+		inline-size: 100%;
+	}
+
+	// Desktop
+	@include screen-sizes.screen-min-max(
+		(
+			min: "sm"
+		)
+	) {
+		inline-size: fit-content;
+	}
+
+	&:has([aria-current="page"]),
+	&:has([data-active="true"]),
+	&[aria-current="page"],
+	&[data-active="true"] {
+		> :is(a, button) {
+			font-weight: 700;
+		}
+	}
+
+	&[aria-disabled="true"] {
+		opacity: variables.$db-opacity-md;
+		pointer-events: 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}
+			);
+		}
+	}
+}

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

@@ -32,16 +32,10 @@ $interactive-selectors: "label, button:not(.db-tab-remove-button), a";
 
 %set-interactive-weak {
 	@include get-weak;
-
-	@include helpers.not-disabled {
-		@include helpers.hover {
-			background-color: colors.$db-adaptive-bg-basic-level-1-hovered;
-		}
-
-		@include helpers.active {
-			background-color: colors.$db-adaptive-bg-basic-level-1-pressed;
-		}
-	}
+	@include helpers.interactive-bg(
+		colors.$db-adaptive-bg-basic-level-1-hovered,
+		colors.$db-adaptive-bg-basic-level-1-pressed
+	);
 }
 
 @mixin get-tag-colors($htmlTag: "tag") {