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

package/build/components/shell/shell.scss

@@ -0,0 +1,70 @@
+@use "sass:string";
+@use "@db-ux/core-foundations/build/styles/variables";
+@use "@db-ux/core-foundations/build/styles/screen-sizes";
+@use "@db-ux/core-foundations/build/styles/colors";
+@use "@db-ux/core-foundations/build/styles/helpers";
+@use "../../styles/internal/control-panel-desktop";
+@use "../../styles/internal/control-panel-mobile";
+@use "../../styles/internal/custom-elements";
+@use "../../styles/internal/form-components";
+@forward "shell-desktop";
+@forward "shell-mobile";
+
+%fade-in-loading-fonts {
+	&[data-fade-in="true"] {
+		opacity: 0;
+
+		&:not([data-fonts-loaded]),
+		&[data-fonts-loaded="true"] {
+			opacity: 1;
+		}
+
+		@media screen and (prefers-reduced-motion: no-preference) {
+			transition: opacity variables.$db-transition-straight-emotional;
+		}
+	}
+}
+
+// This global rule locks body scrolling when the shell has loaded fonts.
+// On SSR pages, scrolling is possible until hydration sets data-fonts-loaded="true".
+body:has(.db-shell[data-fonts-loaded="true"]) {
+	overflow: hidden;
+}
+
+.db-shell {
+	@extend %fade-in-loading-fonts;
+
+	block-size: 100lvh;
+	inline-size: 100lvw;
+	display: grid;
+
+	&[data-control-panel-desktop-position="left"] {
+		#{string.unquote(custom-elements.$control-panel-desktop)} {
+			@extend %control-panel-desktop-vertical-orientation;
+		}
+	}
+
+	&[data-control-panel-desktop-position="top"] {
+		#{string.unquote(custom-elements.$control-panel-desktop)} {
+			@extend %control-panel-desktop-horizontal-orientation;
+		}
+	}
+
+	&[data-control-panel-mobile-position="top"] {
+		#{string.unquote(custom-elements.$control-panel-mobile)} {
+			@extend %control-panel-mobile-position-top;
+		}
+	}
+
+	&[data-control-panel-mobile-position="bottom"] {
+		#{string.unquote(custom-elements.$control-panel-mobile)} {
+			@extend %control-panel-mobile-position-bottom;
+		}
+	}
+
+	&[data-show-sub-navigation="false"] {
+		#{string.unquote(custom-elements.$shell-sub-navigation)} {
+			display: none;
+		}
+	}
+}

package/build/components/shell-content/shell-content.css

@@ -0,0 +1,31 @@
+.db-shell-content[data-variant=fixed] .db-main, .db-shell-content:not([data-variant=fixed]) {
+  overflow-y: auto;
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
+}
+
+.db-shell-content {
+  grid-area: shell-content;
+  overflow-x: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.db-shell-content[data-variant=fixed] {
+  overflow-y: hidden;
+}
+.db-shell-content[data-variant=fixed] .db-main {
+  flex: 1 1 0;
+  min-block-size: 0;
+}
+@media all and (display-mode: standalone) {
+  .db-shell-content[data-variant=fixed]:not(:has(.db-main + *)) .db-main {
+    /* stylelint-disable-next-line db-ux/use-spacings */
+    margin-block-end: env(safe-area-inset-bottom);
+  }
+}
+@media all and (display-mode: standalone) {
+  .db-shell-content:has(.db-main + *) .db-main + *:last-child {
+    /* stylelint-disable-next-line db-ux/use-spacings */
+    padding-block-end: env(safe-area-inset-bottom);
+  }
+}

package/build/components/shell-content/shell-content.scss

@@ -0,0 +1,49 @@
+%shell-content-overflow {
+	overflow-y: auto;
+	/* stylelint-disable-next-line db-ux/use-spacings */
+	padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
+}
+
+.db-shell-content {
+	grid-area: shell-content;
+	overflow-x: hidden;
+	display: flex;
+	flex-direction: column;
+
+	&:not([data-variant="fixed"]) {
+		@extend %shell-content-overflow;
+	}
+
+	&[data-variant="fixed"] {
+		overflow-y: hidden;
+
+		.db-main {
+			@extend %shell-content-overflow;
+
+			flex: 1 1 0;
+			min-block-size: 0;
+		}
+
+		@media all and (display-mode: standalone) {
+			&:not(:has(.db-main + *)) {
+				.db-main {
+					// jscpd:ignore-start
+					/* stylelint-disable-next-line db-ux/use-spacings */
+					margin-block-end: env(safe-area-inset-bottom);
+
+					// jscpd:ignore-end
+				}
+			}
+		}
+	}
+
+	@media all and (display-mode: standalone) {
+		&:has(.db-main + *) {
+			// in this case there is some footer etc.
+			.db-main + *:last-child {
+				/* stylelint-disable-next-line db-ux/use-spacings */
+				padding-block-end: env(safe-area-inset-bottom);
+			}
+		}
+	}
+}

package/build/components/shell-sub-navigation/shell-sub-navigation.css

@@ -0,0 +1,51 @@
+.db-visually-hidden,
+[data-visually-hidden=true] {
+  position: absolute !important;
+  inset-block-start: 0 !important;
+  inline-size: 1px !important;
+  block-size: 1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+  padding: 0 !important;
+  pointer-events: none !important;
+}
+
+/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
+/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
+/* Variants for adaptive components like input, select, notification, ... */
+/* Sub components for shell */
+@keyframes popover-animation {
+  0% {
+    pointer-events: none;
+    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% {
+    pointer-events: auto;
+    opacity: 1;
+    transform: translate(var(--db-popover-center-x, 0%), var(--db-popover-center-y, 0%));
+  }
+}
+@keyframes rotate {
+  100% {
+    transform: rotate(1turn);
+  }
+}
+.db-shell-sub-navigation {
+  grid-area: sub-navigation;
+  overflow: hidden;
+}
+.db-shell-sub-navigation > .db-shell-sub-navigation-button {
+  grid-area: button;
+  display: flex;
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .db-shell-sub-navigation > .db-shell-sub-navigation-button .db-button::before {
+    transition: transform var(--db-transition-straight-functional);
+  }
+}
+.db-shell-sub-navigation .db-control-panel-navigation {
+  grid-area: navigation;
+}

package/build/components/shell-sub-navigation/shell-sub-navigation.scss

@@ -0,0 +1,184 @@
+@use "sass:string";
+@use "@db-ux/core-foundations/build/styles/variables";
+@use "@db-ux/core-foundations/build/styles/screen-sizes";
+@use "@db-ux/core-foundations/build/styles/colors";
+@use "@db-ux/core-foundations/build/styles/helpers";
+@use "../../styles/internal/control-panel-desktop";
+@use "../../styles/internal/custom-elements";
+@use "../../styles/internal/form-components";
+
+.db-shell-sub-navigation {
+	grid-area: sub-navigation;
+	overflow: hidden;
+
+	> .db-shell-sub-navigation-button {
+		grid-area: button;
+		display: flex;
+
+		@media screen and (prefers-reduced-motion: no-preference) {
+			.db-button::before {
+				transition: transform
+					#{variables.$db-transition-straight-functional};
+			}
+		}
+	}
+
+	.db-control-panel-navigation {
+		grid-area: navigation;
+	}
+}
+
+@mixin sub-navigation-top {
+	#{string.unquote(custom-elements.$shell-sub-navigation)} {
+		@include helpers.divider("bottom", after);
+
+		.db-control-panel-navigation {
+			--db-overflow-scroll-button-inset-inline-start: calc(
+				#{variables.$db-spacing-fixed-sm} / 2
+			);
+			--db-overflow-scroll-button-inset-block: #{variables.$db-spacing-fixed-sm};
+
+			display: grid;
+
+			@include control-panel-desktop.horizontal-navigation;
+
+			> menu {
+				/* workaround for showing correct scrolling and focus */
+				padding-inline: calc(#{variables.$db-spacing-fixed-sm} / 2);
+				margin-inline: calc(#{variables.$db-spacing-fixed-sm} / 2);
+				/* stylelint-disable-next-line db-ux/use-spacings */
+				padding-block: var(--db-overflow-scroll-button-inset-block);
+			}
+		}
+
+		> .db-shell-sub-navigation-button {
+			display: none;
+		}
+	}
+}
+
+@mixin sub-navigation-left {
+	#{string.unquote(custom-elements.$shell-sub-navigation)} {
+		display: grid;
+
+		@include helpers.divider("right", after);
+
+		.db-control-panel-navigation {
+			max-inline-size: screen-sizes.$db-breakpoint-xs;
+			padding: variables.$db-spacing-fixed-md;
+		}
+
+		/* jscpd:ignore-start */
+		&[data-open="false"] {
+			inline-size: auto;
+			/* stylelint-disable-next-line declaration-property-value-no-unknown */
+			inline-size: calc-size(auto, size);
+			grid-template-areas: "button";
+			grid-template-rows: [button] 1fr;
+
+			/* jscpd:ignore-end */
+
+			.db-control-panel-navigation {
+				display: none;
+			}
+
+			> .db-shell-sub-navigation-button {
+				justify-content: center;
+
+				.db-button {
+					block-size: 100%;
+					border-radius: 0;
+
+					&::before {
+						transform: form-components.$dropdown-icon-transform;
+					}
+				}
+			}
+		}
+
+		&[data-open="true"] {
+			grid-template-areas:
+				"navigation"
+				"button";
+			grid-template-rows:
+				[navigation] 1fr
+				[button] auto;
+
+			/// Sets the inline-size (width) of the sub-navigation
+			inline-size: var(
+				--db-shell-sub-navigation-inline-size,
+				#{variables.$db-container-xs}
+			);
+
+			.db-control-panel-navigation {
+				overflow: hidden auto;
+
+				@include control-panel-desktop.vertical-navigation(false);
+
+				> menu {
+					padding-inline: 0;
+				}
+			}
+
+			> .db-shell-sub-navigation-button {
+				padding-block: variables.$db-spacing-fixed-xs;
+				padding-inline: variables.$db-spacing-fixed-lg;
+				justify-content: flex-end;
+				margin-block-start: auto;
+
+				@include helpers.divider("top");
+			}
+		}
+	}
+}
+
+@mixin sub-navigation-mobile {
+	#{string.unquote(custom-elements.$shell-sub-navigation)} {
+		> .db-shell-sub-navigation-button {
+			display: none;
+		}
+
+		.db-control-panel-navigation-item-group {
+			// We don't allow complex sub-navigation in mobile
+			// Users should add a custom implementation for this scenario or
+			// They should use another mobile navigation
+			display: none !important;
+		}
+
+		.db-control-panel-navigation-item {
+			inline-size: fit-content;
+			white-space: nowrap;
+		}
+
+		.db-control-panel-navigation {
+			--db-overflow-scroll-button-inset-block: #{variables.$db-spacing-fixed-xs};
+			--db-overflow-scroll-button-inset-inline-start: 0;
+			--db-control-panel-sub-navigation-mobile: 1;
+
+			display: grid;
+
+			@include control-panel-desktop.horizontal-navigation(false);
+
+			> menu {
+				padding-block: variables.$db-spacing-fixed-xs;
+
+				/* workaround for showing correct scrolling and focus */
+				padding-inline-start: calc(
+					#{variables.$db-spacing-fixed-sm} / 2
+				);
+				margin-inline-start: calc(
+					#{variables.$db-spacing-fixed-sm} / 2
+				);
+			}
+
+			&[data-variant="tree"] {
+				// If a users passes tree, we hide the circle icon
+				.db-control-panel-navigation-item a {
+					&::before {
+						display: none;
+					}
+				}
+			}
+		}
+	}
+}

package/build/components/stack/stack-web-component.css

@@ -1,6 +1,7 @@
 /* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
 /* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
 /* Variants for adaptive components like input, select, notification, ... */
+/* Sub components for shell */
 .db-stack:not([hidden]) {
   display: flex;
 }

package/build/components/stack/stack.css

@@ -1,6 +1,7 @@
 /* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
 /* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
 /* Variants for adaptive components like input, select, notification, ... */
+/* Sub components for shell */
 .db-stack:not([hidden]) {
   display: flex;
 }

package/build/components/switch/switch.css

@@ -4,19 +4,14 @@
 /* Variants for adaptive components like input, select, notification, ... */
 .db-visually-hidden,
 [data-visually-hidden=true] {
-  clip: rect(0, 0, 0, 0) !important;
-  overflow: hidden !important;
-  white-space: nowrap !important;
-  font-size: 0 !important;
-  all: initial;
-  inset-block-start: 0 !important;
-  block-size: 1px !important;
   position: absolute !important;
+  inset-block-start: 0 !important;
   inline-size: 1px !important;
-  border-width: 0 !important;
-  border-style: initial !important;
-  border-color: initial !important;
-  border-image: initial !important;
+  block-size: 1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
   padding: 0 !important;
   pointer-events: none !important;
 }

package/build/components/switch/switch.scss

@@ -47,6 +47,7 @@ $switch-inline-size: calc(2lh + #{$switch-fixed-padding});
 		}
 	}
 
+	// jscpd:ignore-start
 	@include form-components.get-validity(check) {
 		&:has(.db-infotext[data-semantic="successful"]) {
 			@include form-components.get-validity-color-checkbox("valid");
@@ -57,6 +58,8 @@ $switch-inline-size: calc(2lh + #{$switch-fixed-padding});
 		@include form-components.get-validity-color-checkbox("invalid");
 	}
 
+	// jscpd:ignore-end
+
 	input {
 		--db-icon-margin-start: 0;
 		--thumb-offset-x: #{$switch-fixed-padding};
@@ -131,6 +134,8 @@ $switch-inline-size: calc(2lh + #{$switch-fixed-padding});
 		/* positioned at the end of the track: track length - 100% (thumb width) */
 		&:checked {
 			--thumb-offset-x: calc(100% + #{$switch-fixed-padding});
+
+			// jscpd:ignore-start
 			--db-icon-color: var(--db-adaptive-on-bg-inverted-default);
 			--db-adaptive-bg-basic-transparent-full-default: var(
 				--db-adaptive-bg-inverted-contrast-max-default
@@ -142,6 +147,8 @@ $switch-inline-size: calc(2lh + #{$switch-fixed-padding});
 				--db-adaptive-bg-inverted-contrast-max-pressed
 			);
 
+			// jscpd:ignore-end
+
 			&::after {
 				--db-icon-color: #{colors.$db-adaptive-on-bg-inverted-default};
 			}

package/build/components/tab-item/tab-item.css

@@ -3,19 +3,14 @@
 /* Variants for adaptive components like input, select, notification, ... */
 .db-visually-hidden,
 [data-visually-hidden=true] {
-  clip: rect(0, 0, 0, 0) !important;
-  overflow: hidden !important;
-  white-space: nowrap !important;
-  font-size: 0 !important;
-  all: initial;
-  inset-block-start: 0 !important;
-  block-size: 1px !important;
   position: absolute !important;
+  inset-block-start: 0 !important;
   inline-size: 1px !important;
-  border-width: 0 !important;
-  border-style: initial !important;
-  border-color: initial !important;
-  border-image: initial !important;
+  block-size: 1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
   padding: 0 !important;
   pointer-events: none !important;
 }

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

@@ -3,7 +3,6 @@
 @use "@db-ux/core-foundations/build/styles/icons";
 @use "@db-ux/core-foundations/build/styles/helpers";
 @use "../../styles/internal/component";
-@use "../../styles/internal/db-puls";
 @use "../../styles/internal/form-components";
 
 $with-icon-padding-calc: calc(
@@ -40,15 +39,10 @@ $with-icon-padding-calc: calc(
 			--db-overwrite-cursor: initial;
 		}
 
-		@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
+		);
 
 		&:has(input:checked) {
 			font-weight: 700;

package/build/components/tab-list/tab-list.css

@@ -3,19 +3,14 @@
 /* Variants for adaptive components like input, select, notification, ... */
 .db-visually-hidden,
 [data-visually-hidden=true] {
-  clip: rect(0, 0, 0, 0) !important;
-  overflow: hidden !important;
-  white-space: nowrap !important;
-  font-size: 0 !important;
-  all: initial;
-  inset-block-start: 0 !important;
-  block-size: 1px !important;
   position: absolute !important;
+  inset-block-start: 0 !important;
   inline-size: 1px !important;
-  border-width: 0 !important;
-  border-style: initial !important;
-  border-color: initial !important;
-  border-image: initial !important;
+  block-size: 1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
   padding: 0 !important;
   pointer-events: none !important;
 }

package/build/components/table/table.css

@@ -2,19 +2,14 @@
 /* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
 /* Variants for adaptive components like input, select, notification, ... */
 .db-table:not([data-show-caption=true]) caption {
-  clip: rect(0, 0, 0, 0) !important;
-  overflow: hidden !important;
-  white-space: nowrap !important;
-  font-size: 0 !important;
-  all: initial;
-  inset-block-start: 0 !important;
-  block-size: 1px !important;
   position: absolute !important;
+  inset-block-start: 0 !important;
   inline-size: 1px !important;
-  border-width: 0 !important;
-  border-style: initial !important;
-  border-color: initial !important;
-  border-image: initial !important;
+  block-size: 1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
   padding: 0 !important;
   pointer-events: none !important;
 }

package/build/components/table-row/table-row.scss

@@ -68,6 +68,7 @@ $interactive-child: ":is(#{$interactive-row-action}:is(#{helpers.$interactive-el
 			}
 		}
 
+		// jscpd:ignore-start
 		@include table-row-interactive-state {
 			background-color: colors.$db-adaptive-bg-basic-level-2-hovered;
 		}
@@ -76,6 +77,8 @@ $interactive-child: ":is(#{$interactive-row-action}:is(#{helpers.$interactive-el
 			background-color: colors.$db-adaptive-bg-basic-level-2-pressed;
 		}
 
+		// jscpd:ignore-end
+
 		&:has(#{$interactive-child}:focus-visible) {
 			&::after {
 				@extend %focus-placeholder;