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

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

@@ -1,324 +1,22 @@
-@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/screen-sizes";
-@use "@db-ux/core-foundations/build/styles/helpers";
-@use "@db-ux/core-foundations/build/styles/animation";
-@use "@db-ux/core-foundations/build/styles/icons";
-@use "../../styles/internal/icon-passing";
-@use "../../styles/internal/component";
-
-%sub-navi-handler-desktop {
-	// show sub-navigation on hover
-	@include screen-sizes.screen("md") {
-		&:is(:hover, :focus-visible) {
-			~ .db-sub-navigation {
-				visibility: visible;
-			}
-		}
-	}
-}
-
-@mixin sub-navi-handler-mobile() {
-	// show/hide sub-navigation by click
-	&[aria-expanded="true"] {
-		~ .db-sub-navigation {
-			visibility: visible;
-
-			@media screen and (prefers-reduced-motion: no-preference) {
-				transition: visibility 0ms linear 0ms;
-				animation: show-right-to-left
-					#{variables.$db-transition-straight-show};
-			}
-
-			.db-sub-navigation {
-				inset-block: 0;
-			}
-		}
-	}
-
-	&:not(&[aria-expanded="true"]) {
-		@media screen and (prefers-reduced-motion: no-preference) {
-			~ .db-sub-navigation {
-				transition: visibility 0ms linear 410ms; // hide animation is 0.4s
-				animation: hide-right-to-left
-					#{variables.$db-transition-straight-hide};
-			}
-		}
-	}
-}
-
-%navigation-item {
-	@extend %default-interactive-component;
-	@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;
-	}
-
-	&:has(~ .db-sub-navigation:is(:hover, :focus)) {
-		background-color: colors.$db-adaptive-bg-basic-transparent-full-hovered;
-	}
-}
+@use "../../styles/internal/navigation-item";
 
 .db-navigation-item {
-	--db-has-before: 0;
-
-	@extend %db-overwrite-font-size-md;
-
-	@include icon-passing.icon-passing();
-
-	display: inline-flex;
-	position: relative;
-	inline-size: auto;
-
-	&[data-wrap="true"] {
-		:is(a, .db-navigation-item-expand-button):first-of-type {
-			white-space: normal;
-			text-align: start;
-		}
-	}
-
-	@include screen-sizes.screen("md", "max") {
-		&:not([data-width="full"]) {
-			.db-navigation-item-expand-button {
-				&::after {
-					--db-icon-margin-start: auto;
-				}
-			}
-		}
-	}
+	@extend %navigation-item;
 
 	a {
-		@extend %navigation-item;
+		@extend %navigation-item-interactive-element;
 
 		text-decoration: none;
 
 		&:focus-visible {
-			// We need to increase the z-index on focus-visible for the outline and box-shadow to appear above the pulse
+			// We need to increase the z-index on focus-visible for the outline and box-shadow to appear above the indicator
 			z-index: 1;
 		}
 	}
 
-	.db-navigation-item-expand-button {
-		@include screen-sizes.screen("md", "max") {
-			@include sub-navi-handler-mobile();
-		}
-
-		&:is(button),
-		> button {
-			@extend %sub-navi-handler-desktop;
-			@extend %navigation-item;
-
-			font-weight: inherit;
-
-			// default icon for navigation
-			@include icons.set-icon("chevron_right", "after");
-		}
-	}
-
-	&:has([aria-current="page"]),
-	&:has([data-active="true"]),
-	&[aria-current="page"],
-	&[data-active="true"] {
-		> :is(a, button) {
-			font-weight: 700;
-		}
+	.db-tooltip {
+		// We don't show the tooltip unless user uses DBShell with controlPanelDesktopPosition="left"
+		// and collapsed navigation
+		--db-show-popover-visibility: hidden;
 	}
-
-	&:not([data-width="full"]) {
-		.db-navigation-item-expand-button {
-			&::after {
-				--db-icon-margin-start: #{variables.$db-spacing-fixed-sm};
-			}
-		}
-	}
-
-	&[data-width="full"] {
-		inline-size: 100%;
-
-		.db-navigation-item-expand-button {
-			&::after {
-				--db-icon-margin-start: auto;
-			}
-		}
-	}
-
-	&[aria-disabled="true"] {
-		opacity: variables.$db-opacity-md;
-		pointer-events: none;
-	}
-}
-
-@mixin sub-navigation-mobile() {
-	padding: variables.$db-spacing-fixed-md;
-	inline-size: 100%;
-	position: fixed;
-	overflow: hidden auto;
-	// additional #{$db-spacing-fixed-3xs} for border
-	inset-block: calc(
-			#{component.$min-mobile-header-height} +
-				#{variables.$db-spacing-fixed-3xs}
-		)
-		calc(
-			#{variables.$db-sizing-md} + #{variables.$db-spacing-fixed-xs} * 2 +
-				#{variables.$db-spacing-fixed-3xs}
-		);
-}
-
-.db-sub-navigation {
-	@extend %component-border;
-
-	margin: 0;
-	display: flex;
-	flex-direction: column;
-	z-index: 70;
-	inset-inline-start: 0;
-	background-color: colors.$db-adaptive-bg-basic-level-1-default;
-	visibility: hidden;
-
-	@include screen-sizes.screen("md", "max") {
-		@include sub-navigation-mobile();
-	}
-
-	@include screen-sizes.screen("md") {
-		.db-mobile-navigation-back {
-			display: none;
-		}
-	}
-
-	@include screen-sizes.screen("md") {
-		border-radius: variables.$db-border-radius-sm;
-		box-shadow: variables.$db-elevation-md;
-		padding: variables.$db-spacing-fixed-sm;
-		position: absolute;
-		min-inline-size: 328px; // We should get this value from UX
-		inset-block-start: calc(100% + #{variables.$db-spacing-fixed-md});
-		transition: visibility 1ms linear; // workaround to enable focus with keyboard
-
-		&[data-outside-vx="true"] {
-			transform: translateX(-100%);
-			inset-inline-start: 100%;
-		}
-
-		&:is(:hover, :focus-within):not([data-force-close="true"]) {
-			visibility: visible;
-		}
-
-		&[data-force-close="true"] {
-			pointer-events: none;
-		}
-
-		&::before {
-			content: "";
-			position: absolute;
-			inset-inline-start: 0;
-			inline-size: 100%;
-			// #{$db-spacing-fixed--3xs} for shadows
-			block-size: calc(
-				#{variables.$db-spacing-fixed-3xs} +
-					#{variables.$db-spacing-fixed-md}
-			);
-			inset-block-start: calc(
-				-1 * #{variables.$db-spacing-fixed-md} -
-					#{variables.$db-spacing-fixed-3xs}
-			);
-		}
-
-		.db-sub-navigation {
-			// 1px for box shadow
-			inset-block-start: calc(
-				-50% + #{variables.$db-spacing-fixed-xs} + 1px
-			);
-			inset-inline-start: calc(100% + #{variables.$db-spacing-fixed-xs});
-
-			&[data-outside-vy="bottom"] {
-				inset-block-start: calc(
-					100% + #{variables.$db-spacing-fixed-md}
-				);
-				transform: translateY(-100%);
-			}
-
-			&[data-outside-vx="right"] {
-				transform: translateX(-100%);
-				inset-inline-start: calc(
-					-1 * #{variables.$db-spacing-fixed-xs}
-				);
-
-				&[data-outside-vy="bottom"] {
-					transform: translate(-100%, -100%);
-				}
-
-				&::before {
-					inset-block: auto 0;
-					// inline-size: calc(var(--db-navigation-item-inline-size, 100%) - #{variables.$db-spacing-fixed-xs} - 2px);
-					transform: translateX(100%) scaleX(-1);
-				}
-			}
-
-			&::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: 100%;
-				inline-size: variables.$db-spacing-fixed-xs;
-			}
-		}
-	}
-
-	&:empty {
-		display: none;
-	}
-
-	.db-navigation-item {
-		inline-size: 100%;
-
-		&::after {
-			margin-inline-start: auto;
-		}
-	}
-}
-
-.db-mobile-navigation-back {
-	display: flex;
-	font-weight: normal;
-	background-color: colors.$db-adaptive-bg-basic-level-1-default;
-	padding-block-end: variables.$db-spacing-fixed-md;
-	margin-block-end: variables.$db-spacing-fixed-md;
-
-	@include helpers.divider("bottom");
 }

package/build/components/navigation-item-group/navigation-item-group-menu-popover.css

@@ -0,0 +1,189 @@
+/* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
+/* Use fixed spacings for all kind of distances (margin, padding, ...) */
+/* The primary use-case for responsive spacings are
+paddings/gaps in an application e.g. the <main> should have a responsive padding. */
+/* Elevation */
+/* Border */
+/* Opacity */
+/* Transitions */
+/* Screen sizes */
+/* Container sizes */
+/* Variants for adaptive components like input, select, notification, ... */
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+/**
+ * @mixin screen-min-max
+ * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
+ */
+@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);
+  }
+}
+/**
+	Generates 3 types of placeholders, e.g:
+	- %db-component-variables-md
+	- %db-font-size-md
+	- %db-overwrite-font-size-md
+ */
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+/* Sub components for shell */

package/build/components/navigation-item-group/navigation-item-group-menu-popover.scss

@@ -0,0 +1,105 @@
+@use "@db-ux/core-foundations/build/styles/screen-sizes";
+@use "@db-ux/core-foundations/build/styles/variables";
+@use "@db-ux/core-foundations/build/styles/animation";
+@use "@db-ux/core-foundations/build/styles/colors";
+@use "../../styles/internal/component";
+@use "../../styles/internal/navigation-item";
+
+$outside-position: calc(-200% + #{variables.$db-spacing-fixed-xs});
+
+%db-navigation-item-group-menu-popover {
+	--db-popover-distance: #{variables.$db-spacing-fixed-xs};
+
+	@extend %component-border;
+
+	margin: 0;
+	display: flex;
+	flex-direction: column;
+	z-index: 70;
+	inset-inline-start: 0;
+	background-color: colors.$db-adaptive-bg-basic-level-1-default;
+	visibility: hidden;
+	max-block-size: 100vh;
+
+	&:empty {
+		display: none;
+	}
+
+	.db-navigation-item,
+	.db-navigation-item-group {
+		inline-size: 100%;
+
+		&::after {
+			margin-inline-start: auto;
+		}
+	}
+
+	// Mobile
+	@include screen-sizes.screen("md", "max") {
+		--db-navigation-item-group-menu-mobile: 1;
+
+		padding: variables.$db-spacing-fixed-md;
+		border: 0;
+		inline-size: 100%;
+		position: fixed;
+		overflow: hidden auto;
+		inset-block: calc(#{component.$min-mobile-header-height})
+			calc(
+				#{variables.$db-sizing-md} + #{variables.$db-spacing-fixed-xs} *
+					2
+			);
+	}
+
+	// Desktop
+	@include screen-sizes.screen("md") {
+		border-radius: variables.$db-border-radius-sm;
+		box-shadow: variables.$db-elevation-md;
+		padding: variables.$db-spacing-fixed-sm;
+		block-size: fit-content;
+		inline-size: fit-content;
+		position: absolute;
+		min-inline-size: variables.$db-container-xs;
+		// TODO: This causes some flash for angular navigation item group
+		transition: visibility 1ms linear; // workaround to enable focus with keyboard
+
+		.db-navigation-item-group-back-button {
+			display: none;
+		}
+
+		&:is(:hover, :focus-within):not([data-force-close="true"]) {
+			visibility: visible;
+		}
+
+		&[data-force-close="true"] {
+			pointer-events: none;
+		}
+
+		.db-navigation-item-group-menu {
+			// 1px for box shadow
+			inset-block-start: calc(
+				-50% + #{variables.$db-spacing-fixed-xs} + 1px
+			);
+			inset-inline-start: calc(100% + #{variables.$db-spacing-fixed-xs});
+
+			@include navigation-item.navigation-item-group-menu-triangle-vertical;
+
+			&[data-outside-vy="bottom"] {
+				transform: translateY($outside-position);
+			}
+
+			&[data-outside-vx="right"] {
+				transform: translateX($outside-position);
+
+				&[data-outside-vy="bottom"] {
+					transform: translate($outside-position, $outside-position);
+				}
+
+				&::before {
+					inset-block: auto 0;
+					// inline-size: calc(var(--db-navigation-item-inline-size, 100%) - #{variables.$db-spacing-fixed-xs} - 2px);
+					transform: translateX(100%) scaleX(-1);
+				}
+			}
+		}
+	}
+}