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

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 screen and (prefers-reduced-motion: no-preference) {
 			transition:
@@ -40,17 +61,17 @@
 	}
 }
 
-%db-puls-auto {
-	@extend %db-puls;
+%indicator-auto {
+	@extend %indicator;
 
-	@include set-db-puls-vertical();
+	@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%;
@@ -62,9 +83,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) {
@@ -74,10 +95,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/_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.$navigation-item)},
+	#{string.unquote(custom-elements.$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-navigation-item-inline-size, 100%);
+		background: transparent;
+		transform: translateX(-100%);
+		clip-path: var(
+			--db-navigation-item-clip-path,
+			polygon(10% 30px, 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;
+	white-space: nowrap; // we don't want to break
+	text-align: center;
+	align-items: center; // Centering the content vertically and horizontally
+	justify-content: space-between;
+
+	@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;
+	}
+
+	:is(a, .db-navigation-item-expand-button):first-of-type {
+		white-space: normal;
+		text-align: start;
+	}
+
+	&: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}
+			);
+		}
+	}
+}