@db-ux/core-components 4.14.0-shell-52d18db → 5.0.0

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

@@ -1,87 +0,0 @@
-/* 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

@@ -1,39 +0,0 @@
-@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

@@ -1,21 +0,0 @@
-/* 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

@@ -1,129 +0,0 @@
-@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

@@ -1,35 +0,0 @@
-@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

@@ -1,36 +0,0 @@
-@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

@@ -1,158 +0,0 @@
-/* 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

@@ -1,80 +0,0 @@
-@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

@@ -1,12 +0,0 @@
-.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

@@ -1,7 +0,0 @@
-@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

@@ -1,12 +0,0 @@
-.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

@@ -1,7 +0,0 @@
-@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

@@ -1,23 +0,0 @@
-/* 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

@@ -1,25 +0,0 @@
-@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};
-	}
-}