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

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,34 @@
+.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:not([data-variant=fixed]) .db-main {
+  margin-block-end: auto;
+}
+.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,53 @@
+%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;
+
+		.db-main {
+			margin-block-end: auto;
+		}
+	}
+
+	&[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/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-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/tabs/tabs.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;
 }
@@ -32,6 +27,23 @@
   }
 }
 
+@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-tabs db-tab-list:has([id$=-tab-0]:checked) ~ dbtabpanel > [id$=-tab-panel-0]:not([hidden]),
 .db-tabs db-tab-list:has([id$=-tab-0]:checked) ~ db-tab-panel > [id$=-tab-panel-0]:not([hidden]),
 .db-tabs dbtablist:has([id$=-tab-0]:checked) ~ dbtabpanel > [id$=-tab-panel-0]:not([hidden]),
@@ -313,13 +325,36 @@
   text-align: center;
   justify-content: center;
 }
+.db-tabs[data-scroll-behavior=arrows] {
+  /*
+   * Scroll left / right buttons
+   */
+}
+.db-tabs[data-scroll-behavior=arrows] .overflow-scroll-left-button > .db-button, .db-tabs[data-scroll-behavior=arrows] .overflow-scroll-left-button:is(.db-button) {
+  inset-inline-start: var(--db-overflow-scroll-button-inset-inline-start, 0);
+}
+.db-tabs[data-scroll-behavior=arrows] .overflow-scroll-right-button > .db-button, .db-tabs[data-scroll-behavior=arrows] .overflow-scroll-right-button:is(.db-button) {
+  inset-inline-end: 0;
+}
+.db-tabs[data-scroll-behavior=arrows] .overflow-scroll-left-button > .db-button, .db-tabs[data-scroll-behavior=arrows] .overflow-scroll-left-button:is(.db-button),
+.db-tabs[data-scroll-behavior=arrows] .overflow-scroll-right-button > .db-button,
+.db-tabs[data-scroll-behavior=arrows] .overflow-scroll-right-button:is(.db-button) {
+  position: absolute;
+  z-index: 22;
+  inset-block: var(--db-overflow-scroll-button-inset-block, var(--db-spacing-fixed-xs));
+}
+@supports (scrollbar-width: none) {
+  .db-tabs[data-scroll-behavior=arrows] .db-tab-list > ul {
+    scrollbar-width: none;
+  }
+}
 .db-tabs[data-scroll-behavior=arrows] .db-tab-list > ul::-webkit-scrollbar {
   display: none;
 }
-.db-tabs[data-scroll-behavior=arrows]:has(.tabs-scroll-left)::before {
+.db-tabs[data-scroll-behavior=arrows]:has(.overflow-scroll-left-button)::before {
   content: "";
 }
-.db-tabs[data-scroll-behavior=arrows]:has(.tabs-scroll-right)::after {
+.db-tabs[data-scroll-behavior=arrows]:has(.overflow-scroll-right-button)::after {
   content: "";
 }
 .db-tabs[data-scroll-behavior=arrows]:has(.db-button)::before, .db-tabs[data-scroll-behavior=arrows]:has(.db-button)::after {
@@ -327,30 +362,12 @@
   z-index: 21;
   background-color: var(--db-adaptive-bg-basic-level-1-default);
   inline-size: var(--db-sizing-md);
-  block-size: calc(var(--db-spacing-fixed-sm) + var(--db-sizing-md));
+  block-size: calc(var(--db-overflow-scroll-button-background-block-size, var(--db-spacing-fixed-sm)) + var(--db-sizing-md));
   flex: 0 0 auto;
 }
 .db-tabs[data-scroll-behavior=arrows]:has(.db-button)::before {
-  inset-inline-start: 0;
+  inset-inline-start: var(--db-overflow-scroll-button-inset-inline-start, 0);
 }
 .db-tabs[data-scroll-behavior=arrows]:has(.db-button)::after {
   inset-inline-end: 0;
 }
-.db-tabs[data-scroll-behavior=arrows] {
-  /*
-   * Scroll left / right buttons
-   */
-}
-.db-tabs[data-scroll-behavior=arrows] .tabs-scroll-left > .db-button, .db-tabs[data-scroll-behavior=arrows] .tabs-scroll-left:is(.db-button) {
-  inset-inline-start: 0;
-}
-.db-tabs[data-scroll-behavior=arrows] .tabs-scroll-right > .db-button, .db-tabs[data-scroll-behavior=arrows] .tabs-scroll-right:is(.db-button) {
-  inset-inline-end: 0;
-}
-.db-tabs[data-scroll-behavior=arrows] .tabs-scroll-left > .db-button, .db-tabs[data-scroll-behavior=arrows] .tabs-scroll-left:is(.db-button),
-.db-tabs[data-scroll-behavior=arrows] .tabs-scroll-right > .db-button,
-.db-tabs[data-scroll-behavior=arrows] .tabs-scroll-right:is(.db-button) {
-  position: absolute;
-  z-index: 22;
-  inset-block: var(--db-spacing-fixed-xs);
-}