@db-ux/core-components 1.0.1 → 1.1.1

package/README.md

@@ -27,7 +27,7 @@ If you just need the styling follow this:
 
 `npm i @db-ux/core-components`
 
-## Dependencies
+## Styling Dependencies
 
 Import the styles in `scss` or `css`. Based on your technology the file names could be different.
 
@@ -60,6 +60,10 @@ Or within your JavaScript files, with the related bundler as a prefix (in this c
 import "@db-ux/core-components/build/styles/rollup.css";
 ```
 
+### DB Theme
+
+In case that you're building a website or application for Deutsche Bahn, you'll additionally have to install the DB Theme via the [`@db-ux/db-theme`](https://www.npmjs.com/package/@db-ux/db-theme) node package (even also available as an inner source node package, as described within that packages README).
+
 ### Optimize dependencies
 
 If you only need some of the components or some features from [`@db-ux/core-foundations`](https://www.npmjs.com/package/@db-ux/core-foundations), you shouldn't include the bundled file.
@@ -91,7 +95,8 @@ In the case you want to include only some components, and you could do it like t
 As we'd like to perfectly support our users and customers on their digital journey, the usage of Deutsche Bahn brand and trademarks are bound of clear guidelines and restrictions even when being used with the code that we're provide with this product; Deutsche Bahn fully reserves all rights regarding the Deutsche Bahn brand, even though that we're providing the code of DB UX Design System products free to use and release it under the Apache 2.0 license.
 Please have a look at our brand portal at <https://marketingportal.extranet.deutschebahn.com/> for any further questions and whom to contact on any brand issues.
 
-You must remove or replace any Deutsche Bahn brand and design assets as well as protected characteristics and trademarks. We're even also planning to provide a neutral theme that would make it much easier for you to use our product without the trademarks by Deutsche Bahn.
+For any usage outside of Deutsche Bahn websites and applications you aren't allowed to use any Deutsche Bahn brand and
+design assets as well as protected characteristics and trademarks, that for not including the DB Theme.
 
 ## Contributions
 

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

@@ -89,16 +89,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     transform: translateY(-110%);
   }
 }
-@keyframes accordion-open {
-  0% {
-    opacity: 0;
-    transform: translateY(-10%);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0%);
-  }
-}
 @keyframes popover-animation {
   0% {
     opacity: 0;
@@ -155,8 +145,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   /* 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);
-  --db-base-line-height: var(--db-type-body-line-height-md);
-  --db-base-font-size: var(--db-type-body-font-size-md);
   line-height: var(--db-type-body-line-height-md);
   font-size: var(--db-type-body-font-size-md);
 }
@@ -182,10 +170,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   border-radius: var(--db-border-radius-sm);
   list-style-type: "";
 }
-@media screen and (prefers-reduced-motion: no-preference) {
-  .db-accordion-item > details[open] summary + div {
-    animation: accordion-open var(--db-transition-straight-emotional) normal both;
-  }
+.db-accordion-item > details[open] summary + div {
+  block-size: auto;
+  /* stylelint-disable-next-line declaration-property-value-no-unknown */
+  block-size: calc-size(auto, size);
 }
 .db-accordion-item > details[open] summary::after {
   transform: rotate(-180deg);
@@ -194,7 +182,19 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   pointer-events: none;
   opacity: 0.4;
 }
+@media screen and (prefers-reduced-motion: reduce) {
+  .db-accordion-item summary + div {
+    block-size: 0;
+    overflow: hidden;
+    transition: none;
+    padding: var(--db-spacing-fixed-md);
+    padding-block-end: var(--db-spacing-fixed-lg);
+  }
+}
 .db-accordion-item summary + div {
+  block-size: 0;
+  overflow: hidden;
+  transition: block-size var(--db-transition-straight-emotional);
   padding: var(--db-spacing-fixed-md);
   padding-block-end: var(--db-spacing-fixed-lg);
 }

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

@@ -5,7 +5,6 @@
 @use "../../styles/internal/form-components";
 @use "../../styles/internal/component";
 
-
 .db-accordion-item {
 	position: relative;
 	inline-size: 100%;
@@ -15,11 +14,9 @@
 	> details {
 		&[open] {
 			summary + div {
-				@media screen and (prefers-reduced-motion: no-preference) {
-					animation: accordion-open
-						#{variables.$db-transition-straight-emotional} normal
-						both;
-				}
+				block-size: auto;
+				/* stylelint-disable-next-line declaration-property-value-no-unknown */
+				block-size: calc-size(auto, size);
 			}
 
 			summary::after {
@@ -33,7 +30,20 @@
 		}
 	}
 
+	@media screen and (prefers-reduced-motion: reduce) {
+		summary + div {
+			block-size: 0;
+			overflow: hidden;
+			transition: none;
+			padding: variables.$db-spacing-fixed-md;
+			padding-block-end: variables.$db-spacing-fixed-lg;
+		}
+	}
+
 	summary + div {
+		block-size: 0;
+		overflow: hidden;
+		transition: block-size #{variables.$db-transition-straight-emotional};
 		padding: variables.$db-spacing-fixed-md;
 		padding-block-end: variables.$db-spacing-fixed-lg;
 	}

package/build/components/badge/badge.css

@@ -16,8 +16,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   /* Those variables are only for components to calculate heights and change icons */
   --db-icon-font-weight: var(--db-base-body-icon-weight-sm);
   --db-icon-font-size: var(--db-base-body-icon-font-size-sm);
-  --db-base-line-height: var(--db-type-body-line-height-sm);
-  --db-base-font-size: var(--db-type-body-font-size-sm);
   line-height: var(--db-type-body-line-height-sm);
   font-size: var(--db-type-body-font-size-sm);
 }
@@ -27,8 +25,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   /* Those variables are only for components to calculate heights and change icons */
   --db-icon-font-weight: var(--db-base-body-icon-weight-2xs);
   --db-icon-font-size: var(--db-base-body-icon-font-size-2xs);
-  --db-base-line-height: var(--db-type-body-line-height-2xs);
-  --db-base-font-size: var(--db-type-body-font-size-2xs);
   line-height: var(--db-type-body-line-height-2xs);
   font-size: var(--db-type-body-font-size-2xs);
 }

package/build/components/brand/brand.css

@@ -16,8 +16,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   /* 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);
-  --db-base-line-height: var(--db-type-body-line-height-md);
-  --db-base-font-size: var(--db-type-body-font-size-md);
   line-height: var(--db-type-body-line-height-md);
   font-size: var(--db-type-body-font-size-md);
 }

package/build/components/button/button.css

@@ -8,8 +8,6 @@
   /* 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);
-  --db-base-line-height: var(--db-type-body-line-height-md);
-  --db-base-font-size: var(--db-type-body-font-size-md);
   line-height: var(--db-type-body-line-height-md);
   font-size: var(--db-type-body-font-size-md);
 }
@@ -18,8 +16,6 @@
   /* Those variables are only for components to calculate heights and change icons */
   --db-icon-font-weight: var(--db-base-body-icon-weight-sm);
   --db-icon-font-size: var(--db-base-body-icon-font-size-sm);
-  --db-base-line-height: var(--db-type-body-line-height-sm);
-  --db-base-font-size: var(--db-type-body-font-size-sm);
   line-height: var(--db-type-body-line-height-sm);
   font-size: var(--db-type-body-font-size-sm);
 }

package/build/components/checkbox/checkbox.css

@@ -71,8 +71,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   /* 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);
-  --db-base-line-height: var(--db-type-body-line-height-md);
-  --db-base-font-size: var(--db-type-body-font-size-md);
   line-height: var(--db-type-body-line-height-md);
   font-size: var(--db-type-body-font-size-md);
 }
@@ -81,8 +79,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   /* Those variables are only for components to calculate heights and change icons */
   --db-icon-font-weight: var(--db-base-body-icon-weight-sm);
   --db-icon-font-size: var(--db-base-body-icon-font-size-sm);
-  --db-base-line-height: var(--db-type-body-line-height-sm);
-  --db-base-font-size: var(--db-type-body-font-size-sm);
   line-height: var(--db-type-body-line-height-sm);
   font-size: var(--db-type-body-font-size-sm);
 }
@@ -99,8 +95,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  block-size: calc(calc(var(--db-base-font-size) * var(--db-base-line-height)) - 2 * var(--db-border-height-3xs));
-  inline-size: calc(calc(var(--db-base-font-size) * var(--db-base-line-height)) - 2 * var(--db-border-height-3xs));
+  block-size: calc(var(--db-icon-font-size) - 2 * var(--db-border-height-3xs));
+  inline-size: calc(var(--db-icon-font-size) - 2 * var(--db-border-height-3xs));
 }
 
 .db-checkbox {
@@ -385,8 +381,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   aspect-ratio: 1;
   /* stylelint-disable-next-line db-ux/use-border-height */
   border: min(var(--db-border-height-2xs), 2px) solid var(--db-check-element-border-color, var(--db-adaptive-on-bg-basic-emphasis-100-default));
-  block-size: calc(var(--db-base-font-size) * var(--db-base-line-height));
-  inline-size: calc(var(--db-base-font-size) * var(--db-base-line-height));
+  block-size: var(--db-icon-font-size);
+  inline-size: var(--db-icon-font-size);
   padding: 0;
   /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
 }

package/build/components/drawer/drawer.css

@@ -70,16 +70,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     transform: translateY(-110%);
   }
 }
-@keyframes accordion-open {
-  0% {
-    opacity: 0;
-    transform: translateY(-10%);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0%);
-  }
-}
 @keyframes popover-animation {
   0% {
     opacity: 0;

package/build/components/header/header.css

@@ -16,8 +16,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   /* 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);
-  --db-base-line-height: var(--db-type-body-line-height-md);
-  --db-base-font-size: var(--db-type-body-font-size-md);
   line-height: var(--db-type-body-line-height-md);
   font-size: var(--db-type-body-font-size-md);
 }
@@ -340,6 +338,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   }
 }
 
+.db-header-meta-navigation {
+  --db-density-functional: 1;
+}
+
 .db-header {
   background-color: var(--db-adaptive-bg-basic-level-1-default);
   display: flex;

package/build/components/infotext/infotext.css

@@ -8,8 +8,6 @@
   /* Those variables are only for components to calculate heights and change icons */
   --db-icon-font-weight: var(--db-base-body-icon-weight-sm);
   --db-icon-font-size: var(--db-base-body-icon-font-size-sm);
-  --db-base-line-height: var(--db-type-body-line-height-sm);
-  --db-base-font-size: var(--db-type-body-font-size-sm);
   line-height: var(--db-type-body-line-height-sm);
   font-size: var(--db-type-body-font-size-sm);
 }
@@ -18,8 +16,6 @@
   /* Those variables are only for components to calculate heights and change icons */
   --db-icon-font-weight: var(--db-base-body-icon-weight-xs);
   --db-icon-font-size: var(--db-base-body-icon-font-size-xs);
-  --db-base-line-height: var(--db-type-body-line-height-xs);
-  --db-base-font-size: var(--db-type-body-font-size-xs);
   line-height: var(--db-type-body-line-height-xs);
   font-size: var(--db-type-body-font-size-xs);
 }

package/build/components/input/input.css

@@ -359,8 +359,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   /* 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);
-  --db-base-line-height: var(--db-type-body-line-height-md);
-  --db-base-font-size: var(--db-type-body-font-size-md);
   line-height: var(--db-type-body-line-height-md);
   font-size: var(--db-type-body-font-size-md);
 }
@@ -369,8 +367,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   /* Those variables are only for components to calculate heights and change icons */
   --db-icon-font-weight: var(--db-base-body-icon-weight-sm);
   --db-icon-font-size: var(--db-base-body-icon-font-size-sm);
-  --db-base-line-height: var(--db-type-body-line-height-sm);
-  --db-base-font-size: var(--db-type-body-font-size-sm);
   line-height: var(--db-type-body-line-height-sm);
   font-size: var(--db-type-body-font-size-sm);
 }
@@ -379,8 +375,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   /* Those variables are only for components to calculate heights and change icons */
   --db-icon-font-weight: var(--db-base-body-icon-weight-xs);
   --db-icon-font-size: var(--db-base-body-icon-font-size-xs);
-  --db-base-line-height: var(--db-type-body-line-height-xs);
-  --db-base-font-size: var(--db-type-body-font-size-xs);
   line-height: var(--db-type-body-line-height-xs);
   font-size: var(--db-type-body-font-size-xs);
 }
@@ -391,8 +385,6 @@ input:is(input, textarea):not(:placeholder-shown),
   /* Those variables are only for components to calculate heights and change icons */
   --db-icon-font-weight: var(--db-base-body-icon-weight-2xs);
   --db-icon-font-size: var(--db-base-body-icon-font-size-2xs);
-  --db-base-line-height: var(--db-type-body-line-height-2xs);
-  --db-base-font-size: var(--db-type-body-font-size-2xs);
   line-height: var(--db-type-body-line-height-2xs);
   font-size: var(--db-type-body-font-size-2xs);
 }
@@ -450,12 +442,12 @@ input:is(input, textarea):not(:placeholder-shown),
   opacity: 0.69;
   position: absolute;
   z-index: 2;
-  inset-block-start: calc((var(--db-sizing-md) - calc(var(--db-base-font-size) * var(--db-base-line-height))) / 2);
+  inset-block-start: calc((var(--db-sizing-md) - var(--db-icon-font-size)) / 2);
   inset-inline: var(--db-form-component-padding-inline-start, var(--db-spacing-fixed-sm));
   pointer-events: none;
 }
 .db-input[data-variant=floating]::after, .db-input[data-variant=floating]::before {
-  inset-block-start: calc(var(--db-sizing-md) / 2 - calc(var(--db-base-font-size) * var(--db-base-line-height)) / 2);
+  inset-block-start: calc(var(--db-sizing-md) / 2 - var(--db-icon-font-size) / 2);
 }
 .db-input[data-variant=floating] [id$=-placeholder] {
   inset-block-start: calc(50% - 0.5em + var(--db-spacing-fixed-3xs));
@@ -610,7 +602,7 @@ input:is(input, textarea):not(:placeholder-shown),
 .db-input::after, .db-input::before {
   position: absolute;
   pointer-events: none;
-  inset-block-start: calc(var(--db-sizing-md) / 2 - var(--db-spacing-fixed-xs) * var(--db-label-visible-spacing, 0) + calc(var(--db-type-body-font-size-xs) * var(--db-type-body-line-height-xs)) * var(--db-label-visible-height, 1) - 1px);
+  inset-block-start: calc(var(--db-sizing-md) / 2 - var(--db-spacing-fixed-xs) * var(--db-label-visible-spacing, 0) + var(--db-base-body-icon-font-size-xs) * var(--db-label-visible-height, 1) - 1px);
   color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
 }
 .db-input::before {
@@ -626,10 +618,10 @@ input:is(input, textarea):not(:placeholder-shown),
   text-overflow: ellipsis;
 }
 .db-input[data-icon], .db-input:has(input[type=search]) {
-  --db-form-component-padding-inline-start: calc(calc(var(--db-base-font-size) * var(--db-base-line-height)) + var(--db-spacing-fixed-sm) + var(--db-spacing-fixed-xs));
+  --db-form-component-padding-inline-start: calc(var(--db-icon-font-size) + var(--db-spacing-fixed-sm) + var(--db-spacing-fixed-xs));
 }
 .db-input[data-icon-after], .db-input:has(input[type=search]), .db-input:has(datalist) {
-  --db-form-component-padding-inline-end: calc(calc(var(--db-base-font-size) * var(--db-base-line-height)) + var(--db-spacing-fixed-sm) + var(--db-spacing-fixed-xs));
+  --db-form-component-padding-inline-end: calc(var(--db-icon-font-size) + var(--db-spacing-fixed-sm) + var(--db-spacing-fixed-xs));
 }
 .db-input[data-hide-label=true] {
   --db-label-visible-height: 0;

package/build/components/link/link.css

@@ -8,8 +8,6 @@
   /* 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);
-  --db-base-line-height: var(--db-type-body-line-height-md);
-  --db-base-font-size: var(--db-type-body-font-size-md);
   line-height: var(--db-type-body-line-height-md);
   font-size: var(--db-type-body-font-size-md);
 }
@@ -18,8 +16,6 @@
   /* Those variables are only for components to calculate heights and change icons */
   --db-icon-font-weight: var(--db-base-body-icon-weight-sm);
   --db-icon-font-size: var(--db-base-body-icon-font-size-sm);
-  --db-base-line-height: var(--db-type-body-line-height-sm);
-  --db-base-font-size: var(--db-type-body-font-size-sm);
   line-height: var(--db-type-body-line-height-sm);
   font-size: var(--db-type-body-font-size-sm);
 }
@@ -99,16 +95,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     transform: translateY(-110%);
   }
 }
-@keyframes accordion-open {
-  0% {
-    opacity: 0;
-    transform: translateY(-10%);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0%);
-  }
-}
 @keyframes popover-animation {
   0% {
     opacity: 0;

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

@@ -17,8 +17,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   /* 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);
-  --db-base-line-height: var(--db-type-body-line-height-md);
-  --db-base-font-size: var(--db-type-body-font-size-md);
   line-height: var(--db-type-body-line-height-md);
   font-size: var(--db-type-body-font-size-md);
 }
@@ -87,16 +85,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     transform: translateY(-110%);
   }
 }
-@keyframes accordion-open {
-  0% {
-    opacity: 0;
-    transform: translateY(-10%);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0%);
-  }
-}
 @keyframes popover-animation {
   0% {
     opacity: 0;
@@ -245,7 +233,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 .db-navigation-item[data-icon]:not([data-hide-icon=true]) label {
   --db-padding-inline-start: calc(
   	var(--db-spacing-fixed-sm) + var(--db-icon-margin-end, var(--db-spacing-fixed-xs)) +
-  		var(--db-base-font-size) * var(--db-base-line-height)
+  		var(--db-icon-font-size)
   );
   /* stylelint-disable-next-line db-ux/use-spacings */
   padding-inline-start: var(--db-padding-inline-start);
@@ -392,9 +380,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     transform: translateX(-100%);
     inset-inline-start: 100%;
   }
-  .db-sub-navigation:not([data-force-mobile]):is(:hover, :focus-within), .db-sub-navigation[data-force-mobile=false]:is(:hover, :focus-within) {
+  .db-sub-navigation:not([data-force-mobile]):is(:hover, :focus-within):not([data-force-close=true]), .db-sub-navigation[data-force-mobile=false]:is(:hover, :focus-within):not([data-force-close=true]) {
     visibility: visible;
   }
+  .db-sub-navigation:not([data-force-mobile])[data-force-close=true], .db-sub-navigation[data-force-mobile=false][data-force-close=true] {
+    pointer-events: none;
+  }
   .db-sub-navigation:not([data-force-mobile])::before, .db-sub-navigation[data-force-mobile=false]::before {
     content: "";
     position: absolute;

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

@@ -207,10 +207,14 @@
 			inset-inline-start: 100%;
 		}
 
-		&:is(:hover, :focus-within) {
+		&:is(:hover, :focus-within):not([data-force-close="true"]) {
 			visibility: visible;
 		}
 
+		&[data-force-close="true"] {
+			pointer-events: none;
+		}
+
 		&::before {
 			content: "";
 			position: absolute;

package/build/components/notification/notification.css

@@ -8,8 +8,6 @@
   /* 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);
-  --db-base-line-height: var(--db-type-body-line-height-md);
-  --db-base-font-size: var(--db-type-body-font-size-md);
   line-height: var(--db-type-body-line-height-md);
   font-size: var(--db-type-body-font-size-md);
 }
@@ -18,8 +16,6 @@
   /* Those variables are only for components to calculate heights and change icons */
   --db-icon-font-weight: var(--db-base-body-icon-weight-sm);
   --db-icon-font-size: var(--db-base-body-icon-font-size-sm);
-  --db-base-line-height: var(--db-type-body-line-height-sm);
-  --db-base-font-size: var(--db-type-body-font-size-sm);
   line-height: var(--db-type-body-line-height-sm);
   font-size: var(--db-type-body-font-size-sm);
 }
@@ -865,16 +861,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     transform: translateY(-110%);
   }
 }
-@keyframes accordion-open {
-  0% {
-    opacity: 0;
-    transform: translateY(-10%);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0%);
-  }
-}
 @keyframes popover-animation {
   0% {
     opacity: 0;
@@ -1071,8 +1057,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 .db-notification header h6 {
   font-family: var(--db-font-family-sans);
   margin: 0;
-  line-height: var(--db-type-headline-line-height-2xs);
-  font-size: var(--db-type-headline-font-size-2xs);
+  line-height: var(--db-type-body-line-height-md);
+  font-size: var(--db-type-body-font-size-md);
 }
 .db-notification header::before, .db-notification header::after,
 .db-notification header h1::before,
@@ -1087,8 +1073,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 .db-notification header h5::after,
 .db-notification header h6::before,
 .db-notification header h6::after {
-  --db-icon-font-size: var(--db-base-headline-icon-font-size-2xs);
-  --db-icon-font-weight: var(--db-base-headline-icon-weight-2xs);
+  --db-icon-font-size: var(--db-base-body-icon-font-size-md);
+  --db-icon-font-weight: var(--db-base-body-icon-weight-md);
 }
 .db-notification p {
   grid-area: content;

package/build/components/notification/notification.scss

@@ -74,13 +74,13 @@
 		h6 {
 			font-family: var(--db-font-family-sans);
 			margin: 0;
-			line-height: var(--db-type-headline-line-height-2xs);
-			font-size: var(--db-type-headline-font-size-2xs);
+			line-height: var(--db-type-body-line-height-md);
+			font-size: var(--db-type-body-font-size-md);
 
 			&::before,
 			&::after {
-				--db-icon-font-size: var(--db-base-headline-icon-font-size-2xs);
-				--db-icon-font-weight: var(--db-base-headline-icon-weight-2xs);
+				--db-icon-font-size: var(--db-base-body-icon-font-size-md);
+				--db-icon-font-weight: var(--db-base-body-icon-weight-md);
 			}
 		}
 	}

package/build/components/popover/popover.css

@@ -70,16 +70,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     transform: translateY(-110%);
   }
 }
-@keyframes accordion-open {
-  0% {
-    opacity: 0;
-    transform: translateY(-10%);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0%);
-  }
-}
 @keyframes popover-animation {
   0% {
     opacity: 0;

package/build/components/radio/radio.css

@@ -35,8 +35,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   /* 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);
-  --db-base-line-height: var(--db-type-body-line-height-md);
-  --db-base-font-size: var(--db-type-body-font-size-md);
   line-height: var(--db-type-body-line-height-md);
   font-size: var(--db-type-body-font-size-md);
 }
@@ -45,8 +43,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   /* Those variables are only for components to calculate heights and change icons */
   --db-icon-font-weight: var(--db-base-body-icon-weight-sm);
   --db-icon-font-size: var(--db-base-body-icon-font-size-sm);
-  --db-base-line-height: var(--db-type-body-line-height-sm);
-  --db-base-font-size: var(--db-type-body-font-size-sm);
   line-height: var(--db-type-body-line-height-sm);
   font-size: var(--db-type-body-font-size-sm);
 }
@@ -333,8 +329,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   aspect-ratio: 1;
   /* stylelint-disable-next-line db-ux/use-border-height */
   border: min(var(--db-border-height-2xs), 2px) solid var(--db-check-element-border-color, var(--db-adaptive-on-bg-basic-emphasis-100-default));
-  block-size: calc(var(--db-base-font-size) * var(--db-base-line-height));
-  inline-size: calc(var(--db-base-font-size) * var(--db-base-line-height));
+  block-size: var(--db-icon-font-size);
+  inline-size: var(--db-icon-font-size);
   padding: 0;
   /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
 }
@@ -380,10 +376,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   background-color: var(--db-adaptive-bg-basic-transparent-full-default);
 }
 .db-radio input:checked:not([data-size=small]) {
-  border-width: calc((calc(var(--db-base-font-size) * var(--db-base-line-height)) - var(--db-sizing-2xs)) / 2);
+  border-width: calc((var(--db-icon-font-size) - var(--db-sizing-2xs)) / 2);
 }
 .db-radio input:checked[data-size=small] {
-  border-width: calc((calc(var(--db-base-font-size) * var(--db-base-line-height)) - var(--db-sizing-3xs)) / 2);
+  border-width: calc((var(--db-icon-font-size) - var(--db-sizing-3xs)) / 2);
 }
 .db-radio input:focus-visible {
   border-radius: var(--db-border-radius-full);