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

package/build/styles/index.scss

@@ -4,9 +4,9 @@
 @forward "../components/divider/divider";
 @forward "../components/card/card";
 @forward "../components/input/input";
-@forward "../components/brand/brand";
-@forward "../components/header/header";
-@forward "../components/page/page";
+@forward "../components/control-panel-brand/control-panel-brand";
+@forward "../components/control-panel-desktop/control-panel-desktop";
+@forward "../components/shell/shell";
 @forward "../components/link/link";
 @forward "../components/section/section";
 @forward "../components/infotext/infotext";
@@ -35,3 +35,11 @@
 @forward "../components/custom-select-dropdown/custom-select-dropdown";
 @forward "../components/custom-select-list/custom-select-list";
 @forward "../components/custom-select-list-item/custom-select-list-item";
+@forward "../components/control-panel-mobile/control-panel-mobile";
+@forward "../components/control-panel-meta-navigation/control-panel-meta-navigation";
+@forward "../components/control-panel-primary-actions/control-panel-primary-actions";
+@forward "../components/control-panel-secondary-actions/control-panel-secondary-actions";
+@forward "../components/navigation-item-group/navigation-item-group";
+@forward "../components/shell-sub-navigation/shell-sub-navigation";
+@forward "../components/control-panel-flat-icon-navigation/control-panel-flat-icon-navigation";
+

package/build/styles/internal/_control-panel-desktop.scss

@@ -0,0 +1,455 @@
+@use "sass:string";
+@use "@db-ux/core-foundations/build/styles/variables";
+@use "@db-ux/core-foundations/build/styles/helpers";
+@use "@db-ux/core-foundations/build/styles/colors";
+@use "@db-ux/core-foundations/build/styles/screen-sizes";
+@use "./form-components";
+@use "./custom-elements";
+@use "./component";
+@use "./navigation-item";
+@use "./indicator";
+@use "./scrollbar";
+
+@mixin horizontal-navigation($scroll-buttons: true) {
+	@if ($scroll-buttons) {
+		@include scrollbar.set-overflow-scroll-buttons;
+
+		&:has(.overflow-scroll-left-button) {
+			> menu {
+				&::before {
+					content: "";
+				}
+			}
+		}
+
+		&:has(.overflow-scroll-right-button) {
+			> menu {
+				&::after {
+					content: "";
+				}
+			}
+		}
+	}
+
+	&:has(.db-button) {
+		> menu {
+			@if ($scroll-buttons) {
+				@include scrollbar.set-overflow-scroll-button-backgrounds;
+			}
+
+			@supports (scrollbar-width: none) {
+				scrollbar-width: none;
+			}
+
+			&::-webkit-scrollbar {
+				display: none;
+			}
+
+			&::before,
+			&::after {
+				block-size: calc(100% - #{variables.$db-border-width-3xs});
+				inset-block: 0;
+				flex: none;
+			}
+		}
+	}
+
+	> menu {
+		overflow: auto hidden;
+		scrollbar-gutter: stable both-edges;
+		flex-direction: row;
+
+		#{string.unquote(custom-elements.$navigation-item-group)} {
+			&:is(button),
+			> button {
+				&::after {
+					--db-icon-trailing: "chevron_down";
+				}
+			}
+
+			> .db-navigation-item-group-menu {
+				inset-block-start: calc(
+					100% +
+						var(
+							--db-popover-distance,
+							#{variables.$db-spacing-fixed-md}
+						)
+				);
+
+				&::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}
+					);
+				}
+			}
+		}
+	}
+}
+
+@mixin vertical-navigation($main-navigation: true) {
+	@if ($main-navigation) {
+		padding-block: variables.$db-spacing-fixed-md;
+	}
+
+	#{string.unquote(custom-elements.$overflow-scroll-left-button)},
+	#{string.unquote(custom-elements.$overflow-scroll-right-button)} {
+		display: none;
+	}
+
+	&:not([data-variant]),
+	&[data-variant="popover"] {
+		> menu {
+			.db-navigation-item-group {
+				.db-navigation-item-group-menu {
+					inset-inline-start: calc(
+						100% + #{variables.$db-spacing-fixed-xs}
+					);
+
+					@include navigation-item.navigation-item-group-menu-triangle-vertical;
+				}
+			}
+		}
+	}
+
+	> menu {
+		flex-direction: column;
+		padding-inline: variables.$db-spacing-fixed-lg;
+
+		.db-navigation-item-group,
+		.db-navigation-item {
+			inline-size: 100%;
+		}
+	}
+}
+
+%control-panel-desktop-horizontal-orientation {
+	border-block-end: variables.$db-border-width-3xs solid
+		colors.$db-adaptive-on-bg-basic-emphasis-60-default;
+	grid-template:
+		[meta]
+		"meta meta meta meta meta meta" auto
+		[padding-top]
+		". . navigation . . ." #{variables.$db-spacing-fixed-md}
+		[others]
+		". brand navigation primary secondary ." auto
+		[padding-bottom]
+		". . navigation . . ." #{variables.$db-spacing-fixed-md} /
+		[padding-left] #{variables.$db-spacing-fixed-lg}
+		[brand] max-content
+		[navigation] 1fr
+		[primary] max-content
+		[secondary] max-content
+		[padding-right] #{variables.$db-spacing-fixed-lg};
+
+	> .db-control-panel-desktop-scroll-container {
+		display: contents;
+	}
+
+	.db-control-panel-brand {
+		padding-inline-end: variables.$db-spacing-fixed-lg;
+	}
+
+	.db-control-panel-primary-actions,
+	.db-control-panel-secondary-actions {
+		block-size: variables.$db-sizing-md;
+	}
+
+	.db-control-panel-primary-actions {
+		margin-inline-start: variables.$db-spacing-fixed-sm;
+	}
+
+	> .db-control-panel-desktop-button {
+		display: none;
+	}
+
+	&:has(.db-control-panel-primary-actions, .db-navigation) {
+		.db-control-panel-secondary-actions {
+			padding-inline-start: variables.$db-spacing-fixed-sm;
+
+			@include helpers.divider("left");
+		}
+	}
+
+	&:has(.db-navigation) {
+		.db-control-panel-brand {
+			@include helpers.divider("right", "after");
+		}
+	}
+
+	&:has(.db-control-panel-secondary-actions) {
+		.db-control-panel-primary-actions {
+			margin-inline-end: variables.$db-spacing-fixed-sm;
+		}
+	}
+
+	&[data-width="small"] {
+		margin-inline: auto;
+		max-inline-size: screen-sizes.$db-breakpoint-sm;
+	}
+
+	&[data-width="medium"] {
+		margin-inline: auto;
+		max-inline-size: screen-sizes.$db-breakpoint-md;
+	}
+
+	&[data-width="large"] {
+		margin-inline: auto;
+		max-inline-size: screen-sizes.$db-breakpoint-lg;
+	}
+
+	.db-navigation {
+		--db-overflow-scroll-button-inset-block: #{variables.$db-spacing-fixed-md};
+		--db-overflow-scroll-button-inset-inline-start: calc(
+			#{variables.$db-spacing-fixed-lg} / 2
+		);
+
+		display: grid;
+
+		@include horizontal-navigation;
+
+		> menu {
+			padding-block: variables.$db-spacing-fixed-md;
+
+			/* workaround for showing correct scrolling and focus */
+			padding-inline-start: calc(#{variables.$db-spacing-fixed-lg} / 2);
+			margin-inline-start: calc(#{variables.$db-spacing-fixed-lg} / 2);
+
+			@include navigation-item.direct-navigation-items {
+				@extend %indicator;
+
+				@include indicator.set-indicator-horizontal();
+
+				@include navigation-item.active-navigation-item {
+					@include indicator.show-indicator-horizontal();
+				}
+
+				@include navigation-item.direct-navigation-items {
+					/* Workaround for custom-elements */
+					&::after {
+						content: none;
+					}
+				}
+			}
+		}
+	}
+}
+
+%control-panel-desktop-vertical-orientation {
+	border-inline-end: variables.$db-border-width-3xs solid
+		colors.$db-adaptive-on-bg-basic-emphasis-60-default;
+	block-size: 100%;
+	grid-template:
+		[padding-top] "." #{variables.$db-spacing-fixed-md}
+		[brand] "brand" auto
+		[scroll] "scroll" 1fr
+		[primary] "primary" auto
+		[secondary] "secondary" auto
+		[button] "button" auto;
+
+	@media screen and (prefers-reduced-motion: no-preference) {
+		transition: inline-size #{variables.$db-transition-straight-functional};
+
+		> .db-control-panel-desktop-button {
+			.db-button {
+				@media screen and (prefers-reduced-motion: reduce) {
+					&::before {
+						transition: none;
+					}
+				}
+
+				&::before {
+					transition: transform
+						#{variables.$db-transition-straight-functional};
+				}
+			}
+		}
+	}
+
+	&[data-open="false"] {
+		inline-size: auto;
+		/* stylelint-disable-next-line declaration-property-value-no-unknown */
+		inline-size: calc-size(auto, size);
+
+		.db-control-panel-primary-actions,
+		.db-control-panel-secondary-actions,
+		.db-control-panel-meta-navigation {
+			display: none;
+		}
+
+		.db-navigation {
+			> menu {
+				// Don't show navigation items for collapsed state (only icons)
+				@include navigation-item.direct-navigation-items {
+					--db-icon-margin-end: 0;
+
+					inline-size: variables.$db-sizing-md;
+					aspect-ratio: 1;
+					justify-content: center;
+					align-items: center;
+
+					&::before {
+						position: initial;
+					}
+
+					a {
+						font-size: 0;
+						position: absolute;
+						inset: 0;
+					}
+				}
+
+				#{string.unquote(custom-elements.$navigation-item)} {
+					.db-tooltip {
+						// We show tooltip for collapsed state
+						--db-show-popover-visibility: visible;
+					}
+				}
+			}
+		}
+
+		/* Hide navigation only if we have navigation-item-group */
+
+		.db-navigation-item-group,
+		.db-navigation-item:not([data-icon]) {
+			display: none;
+		}
+
+		&:not(:has(.db-navigation-item[data-icon])) {
+			.db-control-panel-brand {
+				&::after {
+					display: none;
+				}
+			}
+		}
+
+		.db-control-panel-brand {
+			font-size: 0;
+			gap: 0;
+			place-self: center;
+		}
+
+		> .db-control-panel-desktop-button {
+			justify-content: center;
+
+			.db-button {
+				&::before {
+					transform: form-components.$dropdown-icon-transform;
+				}
+			}
+		}
+	}
+
+	&[data-open="true"] {
+		/// Sets the inline-size (width) of the control-panel-desktop
+		/// @propertyname inline-size
+		/// @cssprop --db-control-panel-desktop-inline-size
+		/// @default var(--db-container-xs)
+		inline-size: var(
+			--db-control-panel-desktop-inline-size,
+			#{variables.$db-container-xs}
+		);
+	}
+
+	> .db-control-panel-desktop-button {
+		grid-area: button;
+		padding-block: variables.$db-spacing-fixed-xs;
+		display: flex;
+		justify-content: end;
+
+		@include helpers.divider("top");
+	}
+
+	.db-control-panel-brand,
+	.db-control-panel-primary-actions,
+	.db-control-panel-secondary-actions,
+	> .db-control-panel-desktop-button {
+		padding-inline: variables.$db-spacing-fixed-lg;
+	}
+
+	.db-control-panel-brand,
+	.db-control-panel-primary-actions,
+	.db-control-panel-secondary-actions {
+		margin-block-end: variables.$db-spacing-fixed-md;
+	}
+
+	> .db-control-panel-desktop-scroll-container {
+		display: grid;
+		overflow: hidden auto;
+		grid-area: scroll;
+		grid-template-areas: "navigation" "meta";
+
+		.db-control-panel-meta-navigation {
+			margin-block-start: auto;
+
+			@include helpers.divider("top");
+		}
+	}
+
+	&:has(
+		.db-control-panel-brand,
+		.db-control-panel-primary-actions,
+		.db-navigation,
+		.db-control-panel-meta-navigation
+	) {
+		.db-control-panel-secondary-actions {
+			padding-block-start: variables.$db-spacing-fixed-sm;
+
+			@include helpers.divider("top");
+		}
+	}
+
+	&:has(.db-navigation) {
+		.db-control-panel-brand {
+			@include helpers.divider("bottom", "after");
+
+			&::after {
+				inset-block-end: calc(-1 * #{variables.$db-spacing-fixed-md});
+			}
+		}
+	}
+
+	&:has(
+		.db-control-panel-brand,
+		.db-navigation,
+		.db-control-panel-meta-navigation
+	) {
+		.db-control-panel-primary-actions {
+			padding-block-start: variables.$db-spacing-fixed-sm;
+
+			@include helpers.divider("top");
+		}
+	}
+
+	.db-navigation {
+		@include vertical-navigation;
+
+		> menu {
+			@include navigation-item.direct-navigation-items {
+				@extend %indicator;
+
+				@include indicator.set-indicator-vertical();
+
+				@include navigation-item.active-navigation-item {
+					@include indicator.show-indicator-vertical();
+				}
+
+				@include navigation-item.direct-navigation-items {
+					/* Workaround for custom-elements */
+					&::after {
+						content: none;
+					}
+				}
+			}
+		}
+	}
+}

package/build/styles/internal/_control-panel-mobile.scss

@@ -0,0 +1,130 @@
+@use "sass:string";
+@use "@db-ux/core-foundations/build/styles/variables";
+@use "@db-ux/core-foundations/build/styles/helpers";
+@use "@db-ux/core-foundations/build/styles/colors";
+@use "./component";
+@use "./custom-elements";
+@use "../../components/drawer/drawer";
+
+@mixin has-empty-drawer {
+	&:has(.db-control-panel-mobile-drawer-scroll-container:empty):not(
+			:has(.db-control-panel-secondary-actions)
+		) {
+		@content;
+	}
+}
+
+%control-panel-mobile-position-top {
+	border-block-end: variables.$db-border-width-3xs solid
+		colors.$db-adaptive-on-bg-basic-emphasis-60-default;
+	grid-template-areas: var(
+		--db-control-panel-mobile-position-top-grid-areas,
+		"brand primary drawer-button"
+	);
+	grid-template-columns: var(
+		--db-control-panel-mobile-position-top-grid-columns,
+		[brand] 1fr [primary] min-content [drawer-button] min-content
+	);
+	justify-items: center;
+
+	.db-control-panel-primary-actions {
+		// fake divider margin
+		padding-inline-end: variables.$db-spacing-fixed-xs;
+
+		@include helpers.divider("right");
+
+		&::before {
+			margin-inline-start: variables.$db-spacing-fixed-xs;
+		}
+	}
+
+	.db-drawer {
+		> .db-drawer-container {
+			@extend %direction-right;
+
+			border-inline-start: component.$component-border;
+		}
+
+		&[open] {
+			.db-drawer-container {
+				@media screen and (prefers-reduced-motion: no-preference) {
+					animation: show-right-to-left
+						#{variables.$db-transition-straight-show};
+				}
+
+				&[hidden] {
+					@media screen and (prefers-reduced-motion: no-preference) {
+						animation: hide-right-to-left
+							#{variables.$db-transition-straight-hide};
+					}
+				}
+			}
+		}
+	}
+}
+
+%control-panel-mobile-position-bottom {
+	border-block-start: variables.$db-border-width-3xs solid
+		colors.$db-adaptive-on-bg-basic-emphasis-60-default;
+
+	.db-control-panel-brand {
+		font-size: 0;
+		gap: 0;
+		place-self: center;
+	}
+
+	> db-button > .db-control-panel-mobile-button,
+	> .db-control-panel-mobile-button {
+		place-self: center;
+	}
+
+	.db-drawer {
+		> .db-drawer-container {
+			@extend %direction-up;
+
+			border-block-start: component.$component-border;
+		}
+
+		&[open] {
+			.db-drawer-container {
+				@media screen and (prefers-reduced-motion: no-preference) {
+					animation: show-bottom-to-top
+						#{variables.$db-transition-straight-show};
+				}
+
+				&[hidden] {
+					@media screen and (prefers-reduced-motion: no-preference) {
+						animation: hide-bottom-to-top
+							#{variables.$db-transition-straight-hide};
+					}
+				}
+			}
+		}
+	}
+
+	&:not([data-variant="flat-icon"]) {
+		grid-template-areas: "brand drawer-button primary";
+		grid-template-columns: min-content 1fr minmax(
+				#{variables.$db-sizing-md},
+				min-content
+			);
+		justify-content: space-evenly;
+	}
+
+	// Flat icon variant
+	&[data-variant="flat-icon"] {
+		.db-drawer,
+		.db-control-panel-brand,
+		.db-control-panel-primary-actions,
+		.db-control-panel-secondary-actions,
+		.db-control-panel-mobile-button,
+		.overflow-scroll-right-button,
+		.overflow-scroll-left-button {
+			display: none;
+		}
+
+		.db-control-panel-flat-icon-navigation {
+			display: initial;
+		}
+	}
+}

package/build/styles/internal/_custom-elements.scss

@@ -1,10 +1,28 @@
 $custom-elements: //hygen-insert
 
-	db-custom-select-list-item, db-custom-select-list,
+	db-control-panel-flat-icon-navigation, db-shell-sub-navigation,
+	db-navigation-item-group, db-control-panel-secondary-actions,
+	db-control-panel-primary-actions, db-control-panel-meta-navigation,
+	db-control-panel-mobile, db-custom-select-list-item, db-custom-select-list,
 	db-custom-select-dropdown, db-custom-select-form-field, db-custom-select,
 	db-stack, db-switch, db-tab-panel, db-tabs, db-tab-list, db-tab-item,
 	db-tab-bar, db-tooltip, db-popover, db-textarea, db-navigation,
 	db-accordion-item, db-accordion, db-badge, db-navigation-item, db-tag,
-	db-radio, db-select, db-notification, db-brand, db-button, db-card,
-	db-checkbox, db-divider, db-drawer, db-header, db-icon, db-infotext,
-	db-input, db-link, db-page, db-section, db-tab;
+	db-radio, db-select, db-notification, db-control-panel-brand, db-button,
+	db-card, db-checkbox, db-divider, db-drawer, db-control-panel-desktop,
+	db-icon, db-infotext, db-input, db-link, db-shell, db-section, db-tab;
+
+/* Sub components for shell */
+
+@function get-sub-component($selector) {
+	@return "> * > #{$selector} > .#{$selector}, > #{$selector} > .#{$selector}, > .#{$selector}";
+}
+
+$control-panel-desktop: get-sub-component(db-control-panel-desktop);
+$control-panel-mobile: get-sub-component(db-control-panel-mobile);
+$navigation: get-sub-component(db-navigation);
+$navigation-item: get-sub-component(db-navigation-item);
+$navigation-item-group: get-sub-component(db-navigation-item-group);
+$shell-sub-navigation: get-sub-component(db-shell-sub-navigation);
+$overflow-scroll-right-button: "> .overflow-scroll-right-button, > db-button > .overflow-scroll-right-button";
+$overflow-scroll-left-button: "> .overflow-scroll-left-button, > db-button > .overflow-scroll-left-button";

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

@@ -1,12 +1,21 @@
 @use "@db-ux/core-foundations/build/styles/variables";
 @use "@db-ux/core-foundations/build/styles/icons";
 
-@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]:not([data-show-icon="false"]) {
 		&::before {
 			position: absolute;
-			inset-block-start: calc(50% - 0.5em);
-			inset-inline-start: $inline-start;
+			inset-block-start: var(
+				--db-icon-passing-inset-block-start,
+				#{$block-start}
+			);
+			inset-inline-start: var(
+				--db-icon-passing-inset-inline-start,
+				#{$inline-start}
+			);
 			pointer-events: none;
 			z-index: 1;
 		}
@@ -14,13 +23,14 @@
 		a,
 		button,
 		label {
-			--db-padding-inline-start: calc(
-				#{$inline-start} + #{icons.$default-icon-margin-end} +
-					var(--db-icon-font-size)
-			);
-
 			/* 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)
+				)
+			);
 		}
 	}
 }