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

package/build/components/control-panel-navigation-item/control-panel-navigation-item.css

@@ -0,0 +1,87 @@
+/* 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, ... */
+.db-control-panel-navigation-item, .db-control-panel-navigation-item a {
+  font: var(--db-type-body-md);
+  /* Those variables are only for components to calculate heights and change icons */
+  --db-icon-font-weight: var(--db-base-body-icon-weight-md);
+  --db-icon-font-size: var(--db-base-body-icon-font-size-md);
+}
+
+/* Sub components for shell */
+.db-control-panel-navigation-item a {
+  border: var(--db-border-width-3xs) solid transparent;
+}
+
+.db-control-panel-navigation-item a {
+  background-color: var(--db-adaptive-bg-basic-transparent-full-default);
+  cursor: pointer;
+  inline-size: 100%;
+  display: inline-flex;
+  border-radius: var(--db-border-radius-sm);
+  padding: var(--db-spacing-fixed-xs) var(--db-spacing-fixed-sm);
+  text-align: start;
+  align-items: center;
+  min-block-size: var(--db-sizing-md);
+  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
+}
+.db-control-panel-navigation-item a:hover {
+  cursor: var(--db-overwrite-cursor, pointer);
+  background-color: var(--db-adaptive-bg-basic-transparent-full-hovered);
+}
+.db-control-panel-navigation-item a:active {
+  cursor: var(--db-overwrite-cursor, pointer);
+  background-color: var(--db-adaptive-bg-basic-transparent-full-pressed);
+}
+
+.db-control-panel-navigation-item {
+  position: relative;
+  display: flex;
+  block-size: fit-content;
+  /* stylelint-disable-next-line media-query-no-invalid */
+}
+@media (width <= 48em) {
+  .db-control-panel-navigation-item {
+    inline-size: 100%;
+  }
+}
+.db-control-panel-navigation-item {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* stylelint-disable-next-line media-query-no-invalid */
+}
+@media (48em < width) {
+  .db-control-panel-navigation-item {
+    inline-size: fit-content;
+  }
+}
+.db-control-panel-navigation-item {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+}
+.db-control-panel-navigation-item:has([aria-current=page]) > :is(a, button), .db-control-panel-navigation-item:has([data-active=true]) > :is(a, button), [aria-current=page].db-control-panel-navigation-item > :is(a, button), [data-active=true].db-control-panel-navigation-item > :is(a, button) {
+  font-weight: 700;
+}
+[aria-disabled=true].db-control-panel-navigation-item {
+  opacity: var(--db-opacity-md);
+  pointer-events: none;
+}
+
+.db-control-panel-navigation-item a {
+  text-decoration: none;
+}
+.db-control-panel-navigation-item a:focus-visible {
+  z-index: 1;
+}
+.db-control-panel-navigation-item .db-tooltip {
+  --db-show-popover-visibility: hidden;
+}
+.db-control-panel-navigation-item .db-control-panel-navigation-item-end-slot-container {
+  position: absolute;
+  display: flex;
+  inset-block: 0;
+  inset-inline-end: 0;
+  align-items: center;
+  pointer-events: none;
+}
+.db-control-panel-navigation-item .db-control-panel-navigation-item-end-slot-container:empty {
+  display: none;
+}

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

@@ -0,0 +1,39 @@
+@use "../../styles/internal/navigation-item";
+@use "@db-ux/core-foundations/build/styles/screen-sizes";
+@use "@db-ux/core-foundations/build/styles/helpers";
+
+.db-control-panel-navigation-item {
+	@extend %navigation-item;
+
+	a {
+		@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 indicator
+			z-index: 1;
+		}
+	}
+
+	.db-tooltip {
+		// We don't show the tooltip unless user uses DBShell with controlPanelDesktopPosition="left"
+		// and collapsed navigation
+		--db-show-popover-visibility: hidden;
+	}
+
+	.db-control-panel-navigation-item-end-slot-container {
+		position: absolute;
+		display: flex;
+		inset-block: 0;
+		inset-inline-end: 0;
+		align-items: center;
+
+		// We avoid clicking on <span> etc. so the Link can be clicked anyways
+		pointer-events: none;
+
+		&:empty {
+			display: none;
+		}
+	}
+}

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

@@ -0,0 +1,21 @@
+/* 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, ... */
+@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);
+  }
+}
+/* Sub components for shell */

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

@@ -0,0 +1,129 @@
+@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});
+$z-index-popover: 70;
+
+%db-control-panel-navigation-item-group-menu-popover {
+	--db-popover-distance: #{variables.$db-spacing-fixed-xs};
+	--db-control-panel-navigation-item-group-menu-popover: 1;
+
+	margin: 0;
+	display: flex;
+	flex-direction: column;
+	z-index: $z-index-popover;
+	background-color: colors.$db-adaptive-bg-basic-level-1-default;
+	visibility: hidden;
+	max-block-size: 100vh;
+
+	&:empty {
+		display: none;
+	}
+
+	.db-control-panel-navigation-item,
+	.db-control-panel-navigation-item-group {
+		inline-size: 100%;
+
+		&::after {
+			margin-inline-start: auto;
+		}
+	}
+
+	/* jscpd:ignore-start */
+
+	// Mobile
+	@include screen-sizes.screen-min-max(
+		(
+			max: "sm"
+		)
+	) {
+		--db-control-panel-navigation-item-group-menu-mobile: 1;
+
+		padding: variables.$db-spacing-fixed-xs
+			component.$drawer-content-padding-inline;
+		inline-size: 100%;
+		max-inline-size: var(
+			--db-drawer-max-width,
+			var(--db-drawer-max-width-horizontal)
+		);
+		position: fixed;
+		overflow: hidden auto;
+		inset-inline-end: 0;
+		inset-block: calc(
+				#{component.$min-mobile-header-height} +
+					env(safe-area-inset-top)
+			)
+			calc(
+				#{component.$min-mobile-header-height} +
+					env(safe-area-inset-bottom)
+			);
+	}
+
+	/* jscpd:ignore-end */
+
+	// Desktop
+	@include screen-sizes.screen-min-max(
+		(
+			min: "sm"
+		)
+	) {
+		inset-inline-start: 0;
+		// stylelint-disable-next-line db-ux/use-border-width, db-ux/use-border-color
+		border: component.$component-border;
+		border-radius: variables.$db-border-radius-sm;
+		box-shadow: variables.$db-elevation-md;
+		padding: variables.$db-spacing-fixed-sm;
+		block-size: fit-content;
+		position: absolute;
+		inline-size: variables.$db-container-xs;
+		gap: variables.$db-spacing-fixed-xs;
+
+		// TODO: This causes some flash for angular navigation item group
+		transition: visibility 1ms linear; // workaround to enable focus with keyboard
+
+		.db-control-panel-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-control-panel-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-control-panel-navigation-item-inline-size, 100%) - #{variables.$db-spacing-fixed-xs} - 2px);
+					transform: translateX(100%) scaleX(-1);
+				}
+			}
+		}
+	}
+}

package/build/components/control-panel-navigation-item-group/control-panel-navigation-item-group-menu-tree.css

@@ -0,0 +1,35 @@
+@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);
+  }
+}
+/* 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, ... */
+.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;
+}
+
+/* Sub components for shell */

package/build/components/control-panel-navigation-item-group/control-panel-navigation-item-group-menu-tree.scss

@@ -0,0 +1,36 @@
+@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 "@db-ux/core-foundations/build/styles/screen-sizes";
+@use "../../styles/internal/component";
+@use "../../styles/internal/form-components";
+@use "../../styles/internal/navigation-item";
+
+%db-control-panel-navigation-item-group-menu-tree {
+	margin: 0;
+	display: flex;
+	flex-direction: column;
+	block-size: 0;
+	visibility: hidden;
+	overflow: hidden;
+	gap: variables.$db-spacing-fixed-xs;
+	/* stylelint-disable-next-line db-ux/use-spacings */
+	padding-inline-start: 1lh;
+
+	@media screen and (prefers-reduced-motion: no-preference) {
+		transition: block-size #{variables.$db-transition-straight-emotional};
+	}
+
+	&:empty {
+		display: none;
+	}
+
+	.db-control-panel-navigation-item-group-back-button {
+		display: none;
+	}
+
+	// Mobile
+	@include screen-sizes.screen("md", "max") {
+		--db-control-panel-navigation-item-group-menu-mobile: 1;
+	}
+}

package/build/components/control-panel-navigation-item-group/control-panel-navigation-item-group.css

@@ -0,0 +1,158 @@
+/* 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, ... */
+.db-control-panel-navigation-item-group, .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-expand-button {
+  font: var(--db-type-body-md);
+  /* Those variables are only for components to calculate heights and change icons */
+  --db-icon-font-weight: var(--db-base-body-icon-weight-md);
+  --db-icon-font-size: var(--db-base-body-icon-font-size-md);
+}
+
+/* Sub components for shell */
+.db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-expand-button {
+  border: var(--db-border-width-3xs) solid transparent;
+}
+
+.db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-expand-button {
+  background-color: var(--db-adaptive-bg-basic-transparent-full-default);
+  cursor: pointer;
+  inline-size: 100%;
+  display: inline-flex;
+  border-radius: var(--db-border-radius-sm);
+  padding: var(--db-spacing-fixed-xs) var(--db-spacing-fixed-sm);
+  text-align: start;
+  align-items: center;
+  min-block-size: var(--db-sizing-md);
+  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
+}
+.db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-expand-button:hover {
+  cursor: var(--db-overwrite-cursor, pointer);
+  background-color: var(--db-adaptive-bg-basic-transparent-full-hovered);
+}
+.db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-expand-button:active {
+  cursor: var(--db-overwrite-cursor, pointer);
+  background-color: var(--db-adaptive-bg-basic-transparent-full-pressed);
+}
+
+.db-control-panel-navigation-item-group {
+  position: relative;
+  display: flex;
+  block-size: fit-content;
+  /* stylelint-disable-next-line media-query-no-invalid */
+}
+@media (width <= 48em) {
+  .db-control-panel-navigation-item-group {
+    inline-size: 100%;
+  }
+}
+.db-control-panel-navigation-item-group {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* stylelint-disable-next-line media-query-no-invalid */
+}
+@media (48em < width) {
+  .db-control-panel-navigation-item-group {
+    inline-size: fit-content;
+  }
+}
+.db-control-panel-navigation-item-group {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+}
+.db-control-panel-navigation-item-group:has([aria-current=page]) > :is(a, button), .db-control-panel-navigation-item-group:has([data-active=true]) > :is(a, button), [aria-current=page].db-control-panel-navigation-item-group > :is(a, button), [data-active=true].db-control-panel-navigation-item-group > :is(a, button) {
+  font-weight: 700;
+}
+[aria-disabled=true].db-control-panel-navigation-item-group {
+  opacity: var(--db-opacity-md);
+  pointer-events: none;
+}
+
+@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-control-panel-navigation-item-group:has(> .db-control-panel-navigation-item-group-menu:hover) > .db-control-panel-navigation-item-group-expand-button, .db-control-panel-navigation-item-group:has(> .db-control-panel-navigation-item-group-menu:focus) > .db-control-panel-navigation-item-group-expand-button {
+  background-color: var(--db-adaptive-bg-basic-transparent-full-hovered);
+}
+.db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-expand-button .db-control-panel-navigation-item-group-expand-button-end-slot-container {
+  --db-has-badge-position: static;
+  display: inline-flex;
+  align-items: center;
+  margin-inline-start: auto;
+}
+.db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-expand-button {
+  /* stylelint-disable-next-line media-query-no-invalid */
+}
+@media (width <= 48em) {
+  .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-expand-button::after {
+    --db-icon-margin-start: auto;
+  }
+}
+.db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-expand-button {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* stylelint-disable-next-line media-query-no-invalid */
+}
+@media (48em < width) {
+  .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-expand-button::after {
+    --db-icon-margin-start: var(--db-spacing-fixed-sm);
+  }
+}
+.db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-expand-button {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+}
+.db-control-panel-navigation-item-group .db-control-panel-navigation-item {
+  /* Hide tooltips for nested navigation items */
+}
+.db-control-panel-navigation-item-group .db-control-panel-navigation-item .db-tooltip {
+  display: none;
+}
+.db-control-panel-navigation-item-group::after {
+  --indicator-vertical-block-size: var(--db-sizing-md);
+  --indicator-vertical-inset-block-start: calc(
+  	var(--db-sizing-md) / 2
+  );
+}
+
+.db-control-panel-navigation-item-group-back-button {
+  display: flex;
+  font-weight: normal;
+  background-color: var(--db-adaptive-bg-basic-level-1-default);
+  padding-block-end: var(--db-spacing-fixed-xs);
+  margin-block-end: var(--db-spacing-fixed-xs);
+  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
+  position: var(--db-tooltip-parent-position, relative);
+}
+.db-control-panel-navigation-item-group-back-button[data-emphasis=strong] {
+  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
+}
+.db-control-panel-navigation-item-group-back-button::before {
+  content: "";
+  background-color: var(--db-divider-bg-color);
+  position: absolute;
+  /* jscpd:ignore-start */
+  block-size: var(--db-border-width-3xs);
+  inset-block-end: 0;
+  inset-inline: 0;
+  /* stylelint-disable-next-line db-ux/use-border-color */
+}
+@media (forced-colors: active) {
+  .db-control-panel-navigation-item-group-back-button::before {
+    /* stylelint-disable-next-line db-ux/use-border-color */
+    border-block-end: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  }
+}
+.db-control-panel-navigation-item-group-back-button::before {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* jscpd:ignore-end */
+}

package/build/components/control-panel-navigation-item-group/control-panel-navigation-item-group.scss

@@ -0,0 +1,80 @@
+@use "@db-ux/core-foundations/build/styles/screen-sizes";
+@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/helpers";
+@use "../../styles/internal/navigation-item";
+@use "control-panel-navigation-item-group-menu-popover";
+@use "../../styles/internal/icon-passing";
+
+.db-control-panel-navigation-item-group {
+	@extend %navigation-item;
+
+	&:has(> .db-control-panel-navigation-item-group-menu:hover),
+	&:has(> .db-control-panel-navigation-item-group-menu:focus) {
+		> .db-control-panel-navigation-item-group-expand-button {
+			// If we hover on the triangle we should still show hover color of the item
+			background-color: colors.$db-adaptive-bg-basic-transparent-full-hovered;
+		}
+	}
+
+	.db-control-panel-navigation-item-group-expand-button {
+		@extend %navigation-item-interactive-element;
+
+		.db-control-panel-navigation-item-group-expand-button-end-slot-container {
+			--db-has-badge-position: static;
+
+			display: inline-flex;
+			align-items: center;
+			margin-inline-start: auto;
+		}
+
+		// Mobile
+		@include screen-sizes.screen-min-max(
+			(
+				max: "sm"
+			)
+		) {
+			&::after {
+				--db-icon-margin-start: auto;
+			}
+		}
+
+		// Desktop
+		@include screen-sizes.screen-min-max(
+			(
+				min: "sm"
+			)
+		) {
+			&::after {
+				--db-icon-margin-start: #{variables.$db-spacing-fixed-sm};
+			}
+		}
+	}
+
+	.db-control-panel-navigation-item {
+		/* Hide tooltips for nested navigation items */
+		.db-tooltip {
+			display: none;
+		}
+	}
+
+	&::after {
+		// Mobile navigation item is always sizing-md
+		// We add this fixed block-size to avoid issues with tree navigation
+		--indicator-vertical-block-size: #{variables.$db-sizing-md};
+		--indicator-vertical-inset-block-start: calc(
+			#{variables.$db-sizing-md} / 2
+		);
+	}
+}
+
+.db-control-panel-navigation-item-group-back-button {
+	display: flex;
+	font-weight: normal;
+	background-color: colors.$db-adaptive-bg-basic-level-1-default;
+	padding-block-end: variables.$db-spacing-fixed-xs;
+	margin-block-end: variables.$db-spacing-fixed-xs;
+
+	@include helpers.divider("bottom");
+}

package/build/components/control-panel-primary-actions/control-panel-primary-actions.css

@@ -0,0 +1,12 @@
+.db-control-panel-primary-actions {
+  display: flex;
+  gap: var(--db-spacing-fixed-xs);
+  align-items: center;
+}
+.db-control-panel-primary-actions:empty {
+  display: none;
+}
+
+.db-control-panel-primary-actions {
+  grid-area: primary;
+}

package/build/components/control-panel-primary-actions/control-panel-primary-actions.scss

@@ -0,0 +1,7 @@
+@use "../../styles/internal/control-panel-actions";
+
+.db-control-panel-primary-actions {
+	@extend %control-panel-actions;
+
+	grid-area: primary;
+}

package/build/components/control-panel-secondary-actions/control-panel-secondary-actions.css

@@ -0,0 +1,12 @@
+.db-control-panel-secondary-actions {
+  display: flex;
+  gap: var(--db-spacing-fixed-xs);
+  align-items: center;
+}
+.db-control-panel-secondary-actions:empty {
+  display: none;
+}
+
+.db-control-panel-secondary-actions {
+  grid-area: secondary;
+}

package/build/components/control-panel-secondary-actions/control-panel-secondary-actions.scss

@@ -0,0 +1,7 @@
+@use "../../styles/internal/control-panel-actions";
+
+.db-control-panel-secondary-actions {
+	@extend %control-panel-actions;
+
+	grid-area: secondary;
+}

package/build/components/control-panel-skip-navigation/control-panel-skip-navigation.css

@@ -0,0 +1,23 @@
+/* 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, ... */
+.db-control-panel-skip-navigation {
+  position: absolute;
+  inset-block-start: var(--db-spacing-fixed-xs);
+  inset-inline-start: var(--db-spacing-fixed-xs);
+  background-color: var(--db-adaptive-bg-basic-level-1-default);
+  border-radius: var(--db-border-radius-sm);
+  z-index: 9999;
+  transform: translateX(-110%);
+}
+.db-control-panel-skip-navigation:not(:empty) {
+  padding: var(--db-spacing-fixed-3xs);
+}
+.db-control-panel-skip-navigation:focus-within {
+  transform: none;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .db-control-panel-skip-navigation {
+    transition: transform var(--db-transition-duration-extra-slow) var(--db-transition-timing-emotional);
+  }
+}

package/build/components/control-panel-skip-navigation/control-panel-skip-navigation.scss

@@ -0,0 +1,25 @@
+@use "@db-ux/core-foundations/build/styles/variables";
+@use "@db-ux/core-foundations/build/styles/colors";
+
+.db-control-panel-skip-navigation {
+	position: absolute;
+	inset-block-start: variables.$db-spacing-fixed-xs;
+	inset-inline-start: variables.$db-spacing-fixed-xs;
+	background-color: colors.$db-adaptive-bg-basic-level-1-default;
+	border-radius: variables.$db-border-radius-sm;
+	z-index: 9999;
+	transform: translateX(-110%);
+
+	&:not(:empty) {
+		padding: variables.$db-spacing-fixed-3xs;
+	}
+
+	&:focus-within {
+		transform: none;
+	}
+
+	@media (prefers-reduced-motion: no-preference) {
+		transition: transform #{variables.$db-transition-duration-extra-slow}
+			#{variables.$db-transition-timing-emotional};
+	}
+}