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

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";
@@ -16,12 +16,13 @@
 @forward "../components/tag/tag";
 @forward "../components/drawer/drawer";
 @forward "../components/select/select";
-@forward "../components/navigation-item/navigation-item";
 @forward "../components/textarea/textarea";
 @forward "../components/badge/badge";
 @forward "../components/accordion/accordion";
 @forward "../components/accordion-item/accordion-item";
-@forward "../components/navigation/navigation";
+@forward "../components/control-panel-navigation/control-panel-navigation";
+@forward "../components/control-panel-navigation-item/control-panel-navigation-item";
+@forward "../components/control-panel-navigation-item-group/control-panel-navigation-item-group";
 @forward "../components/popover/popover";
 @forward "../components/tooltip/tooltip";
 @forward "../components/tab-item/tab-item";
@@ -44,3 +45,13 @@
 @forward "../components/table-header-cell/table-header-cell";
 @forward "../components/table-data-cell/table-data-cell";
 @forward "../components/custom-button/custom-button";
+@forward "../components/control-panel-mobile/control-panel-mobile";
+@forward "../components/control-panel-meta/control-panel-meta";
+@forward "../components/control-panel-primary-actions/control-panel-primary-actions";
+@forward "../components/control-panel-secondary-actions/control-panel-secondary-actions";
+@forward "../components/shell-sub-navigation/shell-sub-navigation";
+@forward "../components/control-panel-flat-icon/control-panel-flat-icon";
+@forward "../components/shell-content/shell-content";
+@forward "../components/drawer-header/drawer-header";
+@forward "../components/drawer-footer/drawer-footer";
+@forward "../components/control-panel-skip-navigation/control-panel-skip-navigation";

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

@@ -20,15 +20,10 @@
 %button-outlined-ghost-colors {
 	background-color: colors.$db-adaptive-bg-basic-transparent-full-default;
 
-	@include helpers.not-disabled {
-		@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;
-		}
-	}
+	@include helpers.interactive-bg(
+		colors.$db-adaptive-bg-basic-transparent-full-hovered,
+		colors.$db-adaptive-bg-basic-transparent-full-pressed
+	);
 }
 
 %button-brand-colors {

package/build/styles/internal/_component.scss

@@ -6,6 +6,10 @@
 $min-mobile-header-height: calc(
 	#{variables.$db-sizing-md} + 2 * #{variables.$db-spacing-fixed-xs}
 );
+$drawer-content-padding-inline: max(
+	#{variables.$db-spacing-fixed-sm},
+	max(env(safe-area-inset-left), env(safe-area-inset-right))
+);
 $component-border: variables.$db-border-width-3xs solid
 	colors.$db-adaptive-on-bg-basic-emphasis-60-default;
 
@@ -59,6 +63,7 @@ $default-spacings: (
 	"none": 0
 );
 
+// jscpd:ignore-start
 @mixin get-data-spacing($type: padding, $spacings: $default-spacings) {
 	@each $name, $spacing in $spacings {
 		@if $name == "default" {
@@ -74,3 +79,5 @@ $default-spacings: (
 		}
 	}
 }
+
+// jscpd:ignore-end

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

@@ -0,0 +1,11 @@
+@use "@db-ux/core-foundations/build/styles/variables";
+
+%control-panel-actions {
+	display: flex;
+	gap: variables.$db-spacing-fixed-xs;
+	align-items: center;
+
+	&:empty {
+		display: none;
+	}
+}

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

@@ -0,0 +1,412 @@
+@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";
+
+$control-panel-desktop-horizontal-padding-block: calc(
+	#{variables.$db-spacing-fixed-md} + env(safe-area-inset-top)
+);
+$control-panel-desktop-horizontal-padding-inline: #{variables.$db-spacing-fixed-sm};
+$control-panel-desktop-vertical-padding-block: #{variables.$db-spacing-fixed-sm};
+$control-panel-desktop-vertical-padding-inline: calc(
+	#{variables.$db-spacing-fixed-sm} + env(safe-area-inset-left)
+);
+
+@mixin horizontal-navigation($scroll-buttons: true) {
+	--db-control-panel-navigation-horizontal: 1;
+
+	@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;
+		flex-direction: row;
+
+		#{string.unquote(custom-elements.$control-panel-navigation-item-group)},
+		#{string.unquote(custom-elements.$control-panel-navigation-item)} {
+			white-space: nowrap; // we don't want to break
+		}
+
+		#{string.unquote(custom-elements.$control-panel-navigation-item-group)} {
+			> .db-control-panel-navigation-item-group-expand-button {
+				> .db-control-panel-navigation-item-group-expand-button-end-slot-container {
+					&::after {
+						--db-icon-trailing: "chevron_down";
+					}
+				}
+			}
+
+			> .db-control-panel-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: $control-panel-desktop-vertical-padding-block;
+	}
+
+	&:not([data-variant]),
+	&[data-variant="popover"] {
+		> menu {
+			.db-control-panel-navigation-item-group {
+				.db-control-panel-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: $control-panel-desktop-vertical-padding-inline;
+
+		.db-control-panel-navigation-item-group,
+		.db-control-panel-navigation-item {
+			inline-size: 100%;
+		}
+
+		.db-control-panel-navigation-item-end-slot-container {
+			inset-inline-end: #{variables.$db-spacing-fixed-sm};
+		}
+	}
+}
+
+%control-panel-desktop-horizontal-orientation {
+	border-block-end: variables.$db-border-width-3xs solid
+		colors.$db-adaptive-on-bg-basic-emphasis-60-default;
+	column-gap: $control-panel-desktop-horizontal-padding-inline;
+	grid-template:
+		[meta]
+		"meta meta meta meta meta meta" auto
+		[padding-top]
+		". . navigation . . ." #{$control-panel-desktop-horizontal-padding-block}
+		[others]
+		". brand navigation primary secondary ." auto
+		[padding-bottom]
+		". . navigation . . ." #{$control-panel-desktop-horizontal-padding-block} /
+		[padding-left] 0
+		[brand] max-content
+		[navigation] 1fr
+		[primary] max-content
+		[secondary] max-content
+		[padding-right] 0;
+
+	> .db-control-panel-desktop-scroll-container {
+		display: contents;
+	}
+
+	.db-control-panel-brand {
+		padding-inline: $control-panel-desktop-horizontal-padding-inline;
+	}
+
+	.db-control-panel-primary-actions,
+	.db-control-panel-secondary-actions {
+		block-size: variables.$db-sizing-md;
+	}
+
+	> .db-control-panel-desktop-button {
+		display: none;
+	}
+
+	.db-control-panel-secondary-actions {
+		padding-inline-start: $control-panel-desktop-horizontal-padding-inline;
+
+		@include helpers.divider("left");
+	}
+
+	.db-control-panel-navigation {
+		@include helpers.divider("left");
+
+		&::before {
+			inset-block: #{$control-panel-desktop-horizontal-padding-block};
+		}
+
+		.overflow-scroll-left-button,
+		.overflow-scroll-right-button {
+			display: flex;
+		}
+	}
+
+	&[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-control-panel-navigation {
+		--db-overflow-scroll-button-inset-block: #{$control-panel-desktop-horizontal-padding-block};
+		--db-overflow-scroll-button-inset-inline-start: calc(
+			#{$control-panel-desktop-horizontal-padding-inline} / 2
+		);
+
+		display: grid;
+
+		@include horizontal-navigation;
+
+		> menu {
+			padding-block: $control-panel-desktop-horizontal-padding-block;
+
+			/* workaround for showing correct scrolling and focus */
+			padding-inline-start: calc(
+				#{$control-panel-desktop-horizontal-padding-inline} / 2
+			);
+			margin-inline-start: calc(
+				#{$control-panel-desktop-horizontal-padding-inline} / 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:
+		[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 {
+				&::before {
+					@media screen and (prefers-reduced-motion: no-preference) {
+						transition: transform
+							#{variables.$db-transition-straight-functional};
+					}
+				}
+			}
+		}
+	}
+
+	/* jscpd:ignore-start */
+	&[data-open="false"] {
+		inline-size: auto;
+		/* stylelint-disable-next-line declaration-property-value-no-unknown */
+		inline-size: calc-size(auto, size);
+
+		.db-control-panel-navigation-item-group,
+		.db-control-panel-navigation-item,
+		.db-control-panel-primary-actions,
+		.db-control-panel-secondary-actions,
+		.db-control-panel-meta {
+			display: none;
+		}
+
+		.db-control-panel-brand {
+			inline-size: variables.$db-sizing-md;
+			overflow: hidden;
+
+			&::before {
+				margin: auto;
+				aspect-ratio: var(
+					--db-logo-aspect-ratio-short,
+					var(--db-logo-aspect-ratio)
+				);
+				background-image: var(--db-logo-url-short, var(--db-logo-url));
+			}
+		}
+
+		> .db-control-panel-desktop-button {
+			justify-content: center;
+
+			.db-button {
+				&::before {
+					transform: form-components.$dropdown-icon-transform;
+				}
+			}
+		}
+	}
+
+	/* jscpd:ignore-end */
+
+	&[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: flex-end;
+
+		@include helpers.divider("top");
+	}
+
+	.db-control-panel-primary-actions,
+	.db-control-panel-secondary-actions,
+	> .db-control-panel-desktop-button {
+		padding: $control-panel-desktop-vertical-padding-block
+			$control-panel-desktop-vertical-padding-inline;
+	}
+
+	.db-control-panel-desktop-brand-container {
+		inline-size: 100%;
+		padding: $control-panel-desktop-vertical-padding-block
+			$control-panel-desktop-vertical-padding-inline;
+
+		@include helpers.divider("bottom", "after");
+
+		&::before {
+			flex-direction: column;
+			overflow: hidden;
+		}
+	}
+
+	> .db-control-panel-desktop-scroll-container {
+		display: grid;
+		overflow: hidden auto;
+		grid-area: scroll;
+		grid-template-areas: "navigation" "meta";
+
+		.db-control-panel-meta {
+			margin-block-start: auto;
+			flex-flow: column nowrap;
+
+			@include helpers.divider("top");
+		}
+	}
+
+	.db-control-panel-primary-actions,
+	.db-control-panel-secondary-actions {
+		@include helpers.divider("top");
+	}
+
+	.db-control-panel-navigation {
+		@include vertical-navigation;
+
+		/* jscpd:ignore-start */
+		> 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;
+					}
+				}
+			}
+		}
+
+		/* jscpd:ignore-end */
+	}
+}

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

@@ -0,0 +1,107 @@
+@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;
+	padding-block: calc(
+			#{variables.$db-spacing-fixed-xs} + env(safe-area-inset-top)
+		)
+		variables.$db-spacing-fixed-xs;
+
+	.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;
+		}
+	}
+}
+
+%control-panel-mobile-position-bottom {
+	border-block-start: variables.$db-border-width-3xs solid
+		colors.$db-adaptive-on-bg-basic-emphasis-60-default;
+	grid-template-areas: "brand drawer-button primary";
+	grid-template-columns:
+		minmax(#{variables.$db-sizing-md}, min-content)
+		1fr minmax(#{variables.$db-sizing-md}, min-content);
+	justify-content: space-evenly;
+	padding-block: variables.$db-spacing-fixed-xs
+		calc(#{variables.$db-spacing-fixed-xs} + env(safe-area-inset-bottom));
+
+	/* jscpd:ignore-start */
+	.db-control-panel-brand {
+		inline-size: variables.$db-sizing-md;
+		overflow: hidden;
+
+		&::before {
+			aspect-ratio: var(
+				--db-logo-aspect-ratio-short,
+				var(--db-logo-aspect-ratio)
+			);
+			background-image: var(--db-logo-url-short, var(--db-logo-url));
+		}
+	}
+
+	/* jscpd:ignore-end */
+
+	> db-button > .db-control-panel-mobile-button,
+	> .db-control-panel-mobile-button {
+		place-self: center;
+	}
+
+	// Override drawer to use direction-up settings
+	.db-drawer:has(.db-control-panel-mobile-drawer-scroll-container) {
+		--db-drawer-max-height: 67lvh;
+
+		> .db-drawer-container {
+			@extend %direction-from-bottom-to-top;
+
+			border-block-start: component.$component-border;
+			border-inline-end: 0; // revert the default setting
+			inline-size: 100lvw;
+			max-inline-size: 100lvw;
+		}
+
+		&[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};
+					}
+				}
+			}
+		}
+	}
+}

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

@@ -1,12 +1,36 @@
 $custom-elements: //hygen-insert
 
-	db-table-data-cell, db-table-header-cell, db-table-row, db-table-footer,
-	db-table-body, db-table-head, db-table-caption, db-table, db-custom-button,
+	db-control-panel-skip-navigation, db-shell-sub-navigation,
+	db-control-panel-flat-icon, db-drawer-footer, db-drawer-header,
+	db-shell-content, db-control-panel-navigation-item-group,
+	db-control-panel-secondary-actions, db-control-panel-primary-actions,
+	db-control-panel-meta, db-control-panel-mobile, db-table-data-cell,
+	db-table-header-cell, db-table-row, db-table-footer, db-table-body,
+	db-table-head, db-table-caption, db-table, db-custom-button,
 	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-tab-bar, db-tooltip, db-popover, db-textarea,
+	db-control-panel-navigation, db-accordion-item, db-accordion, db-badge,
+	db-control-panel-navigation-item, db-tag, 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-flat-icon: get-sub-component(db-control-panel-flat-icon);
+$control-panel-mobile: get-sub-component(db-control-panel-mobile);
+$control-panel-navigation: get-sub-component(db-control-panel-navigation);
+$control-panel-navigation-item: get-sub-component(
+	db-control-panel-navigation-item
+);
+$control-panel-navigation-item-group: get-sub-component(
+	db-control-panel-navigation-item-group
+);
+$shell-sub-navigation: get-sub-component(db-shell-sub-navigation);

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

@@ -235,6 +235,7 @@ $db-min-inline-size: var(
 		@extend %db-#{$variant}-variables;
 		/* stylelint-disable-next-line at-rule-empty-line-before */
 	} @else {
+		// jscpd:ignore-start
 		// this is a workaround for the textarea scrollbar
 		--db-textarea-read-only: var(--db-#{$variant}-bg-basic-level-1-default);
 		--db-adaptive-bg-basic-transparent-full-default: var(
@@ -258,6 +259,8 @@ $db-min-inline-size: var(
 		--db-adaptive-on-bg-basic-emphasis-100-default: var(
 			--db-#{$variant}-on-bg-basic-emphasis-100-default
 		);
+
+		// jscpd:ignore-end
 		--db-adaptive-on-bg-basic-emphasis-60-default: var(
 			--db-#{$variant}-on-bg-basic-emphasis-60-default
 		);
@@ -583,6 +586,7 @@ $input-valid-types:
 
 	@include get-validity-message($key);
 
+	// jscpd:ignore-start
 	input {
 		&:not(:checked) {
 			--db-adaptive-bg-basic-transparent-full-default: var(
@@ -596,6 +600,8 @@ $input-valid-types:
 			);
 		}
 
+		// jscpd:ignore-end
+
 		&:checked {
 			--db-adaptive-bg-basic-transparent-full-default: var(
 				--db-#{$variant}-bg-inverted-contrast-low-default