@db-ux/core-components 4.13.1-angular-signal-forms13-577b861 → 4.14.0-shell-52d18db

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

@@ -5,10 +5,15 @@
 @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;
+		@include helpers.display(inline-flex);
+
+		block-size: 1lh;
+		align-items: center;
 	}
 }
 
@@ -64,4 +69,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}
+			);
+		}
+	}
+}