@db-ux/core-components 2.4.3 → 3.0.0

package/README.md

@@ -82,7 +82,7 @@ In the case you want to include only some components, and you could do it like t
 /* Optional: Add animations / transitions for components */
 @import "@db-ux/core-components/build/styles/component-animations.css";
 
-/* Optional: Add data-icon/data-icon-after to global attributes to enable icons for components */
+/* Optional: Add data-icon/data-icon-trailing to global attributes to enable icons for components */
 @import "@db-ux/core-foundations/build/styles/icons/include-rollup.css";
 
 /* Optional: Add components */

package/build/components/accordion/accordion.css

@@ -6,6 +6,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 /* Border */
 /* Opacity */
 /* Transitions */
+/* Screen sizes */
+/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 

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

@@ -6,6 +6,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 /* Border */
 /* Opacity */
 /* Transitions */
+/* Screen sizes */
+/* Container sizes */
 .db-visually-hidden,
 [data-visually-hidden=true] {
   clip: rect(0, 0, 0, 0) !important;
@@ -139,7 +141,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     transform: rotate(1turn);
   }
 }
-.db-accordion-item > details > summary:not([data-hide-icon-after=true])::after {
+.db-accordion-item > details > summary:not([data-show-icon-trailing=false])::after {
   color: var(--db-icon-color, inherit);
   display: inline-block;
   /*** icon - placeholder ***/
@@ -156,23 +158,23 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   /* stylelint-disable-next-line declaration-property-value-no-unknown */
   speak: never;
   text-transform: none;
-  vertical-align: middle;
+  vertical-align: var(--db-icon-vertical-align, middle);
   block-size: var(--db-icon-font-size, 1.5rem);
   inline-size: var(--db-icon-font-size, 1.5rem);
   content: var(--db-icon, attr(data-icon));
 }
 @supports (content: ""/"") {
-  .db-accordion-item > details > summary:not([data-hide-icon-after=true])::after {
+  .db-accordion-item > details > summary:not([data-show-icon-trailing=false])::after {
     content: var(--db-icon, attr(data-icon))/"";
   }
 }
 @media aural {
-  .db-accordion-item > details > summary:not([data-hide-icon-after=true])::after {
+  .db-accordion-item > details > summary:not([data-show-icon-trailing=false])::after {
     content: none;
   }
 }
 @media speech {
-  .db-accordion-item > details > summary:not([data-hide-icon-after=true])::after {
+  .db-accordion-item > details > summary:not([data-show-icon-trailing=false])::after {
     content: none;
   }
 }
@@ -251,14 +253,14 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
  * @mixin screen-min-max
  * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
  */
-.db-accordion-item > details > summary:not([data-hide-icon-after=true])::after {
-  --db-icon-after: "chevron_down";
+.db-accordion-item > details > summary:not([data-show-icon-trailing=false])::after {
+  --db-icon-trailing: "chevron_down";
   margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
-  content: var(--db-icon-after, attr(data-icon-after));
+  content: var(--db-icon-trailing, attr(data-icon-trailing));
 }
 @supports (content: ""/"") {
-  .db-accordion-item > details > summary:not([data-hide-icon-after=true])::after {
-    content: var(--db-icon-after, attr(data-icon-after))/"";
+  .db-accordion-item > details > summary:not([data-show-icon-trailing=false])::after {
+    content: var(--db-icon-trailing, attr(data-icon-trailing))/"";
   }
 }
 .db-accordion-item > details > summary::after {

package/build/components/badge/badge.css

@@ -6,6 +6,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 /* Border */
 /* Opacity */
 /* Transitions */
+/* Screen sizes */
+/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 

package/build/components/brand/brand.css

@@ -6,6 +6,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 /* Border */
 /* Opacity */
 /* Transitions */
+/* Screen sizes */
+/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 

package/build/components/button/button.css

@@ -6,6 +6,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 /* Border */
 /* Opacity */
 /* Transitions */
+/* Screen sizes */
+/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 
@@ -152,27 +154,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   inline-size: fit-content;
   padding: var(--db-spacing-fixed-xs) var(--db-spacing-fixed-md);
   text-decoration: none;
-  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
-}
-.db-button:hover:not(:disabled, [aria-disabled=true]) {
-  cursor: var(--db-overwrite-cursor, pointer);
-  background-color: var(--db-adaptive-bg-basic-transparent-hovered);
-}
-.db-button:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-button:hover:not(:disabled, [aria-disabled=true]):is(input) {
-  cursor: initial;
-}
-.db-button:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-button:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
-  cursor: pointer;
-}
-.db-button:active:not(:disabled, [aria-disabled=true]) {
-  cursor: var(--db-overwrite-cursor, pointer);
-  background-color: var(--db-adaptive-bg-basic-transparent-pressed);
-}
-.db-button:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-button:active:not(:disabled, [aria-disabled=true]):is(input) {
-  cursor: initial;
-}
-.db-button:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-button:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
-  cursor: pointer;
 }
 .db-button[data-no-text=true] {
   font-size: 0 !important;
@@ -232,23 +213,54 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 }
 .db-button[data-variant=outlined], .db-button:not([data-variant]), .db-button[data-variant=""], .db-button[data-variant=ghost] {
   background-color: var(--db-adaptive-bg-basic-transparent-full-default);
+  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
+}
+.db-button[data-variant=outlined]:hover:not(:disabled, [aria-disabled=true]), .db-button:not([data-variant]):hover:not(:disabled, [aria-disabled=true]), .db-button[data-variant=""]:hover:not(:disabled, [aria-disabled=true]), .db-button[data-variant=ghost]:hover:not(:disabled, [aria-disabled=true]) {
+  cursor: var(--db-overwrite-cursor, pointer);
+  background-color: var(--db-adaptive-bg-basic-transparent-full-hovered);
+}
+.db-button[data-variant=outlined]:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-button[data-variant=outlined]:hover:not(:disabled, [aria-disabled=true]):is(input), .db-button:not([data-variant]):hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-button:not([data-variant]):hover:not(:disabled, [aria-disabled=true]):is(input), .db-button[data-variant=""]:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-button[data-variant=""]:hover:not(:disabled, [aria-disabled=true]):is(input), .db-button[data-variant=ghost]:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-button[data-variant=ghost]:hover:not(:disabled, [aria-disabled=true]):is(input) {
+  cursor: initial;
+}
+.db-button[data-variant=outlined]:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-button[data-variant=outlined]:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-button:not([data-variant]):hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-button:not([data-variant]):hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-button[data-variant=""]:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-button[data-variant=""]:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-button[data-variant=ghost]:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-button[data-variant=ghost]:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+  cursor: pointer;
+}
+.db-button[data-variant=outlined]:active:not(:disabled, [aria-disabled=true]), .db-button:not([data-variant]):active:not(:disabled, [aria-disabled=true]), .db-button[data-variant=""]:active:not(:disabled, [aria-disabled=true]), .db-button[data-variant=ghost]:active:not(:disabled, [aria-disabled=true]) {
+  cursor: var(--db-overwrite-cursor, pointer);
+  background-color: var(--db-adaptive-bg-basic-transparent-full-pressed);
+}
+.db-button[data-variant=outlined]:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-button[data-variant=outlined]:active:not(:disabled, [aria-disabled=true]):is(input), .db-button:not([data-variant]):active:not(:disabled, [aria-disabled=true]):is(textarea), .db-button:not([data-variant]):active:not(:disabled, [aria-disabled=true]):is(input), .db-button[data-variant=""]:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-button[data-variant=""]:active:not(:disabled, [aria-disabled=true]):is(input), .db-button[data-variant=ghost]:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-button[data-variant=ghost]:active:not(:disabled, [aria-disabled=true]):is(input) {
+  cursor: initial;
+}
+.db-button[data-variant=outlined]:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-button[data-variant=outlined]:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-button:not([data-variant]):active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-button:not([data-variant]):active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-button[data-variant=""]:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-button[data-variant=""]:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-button[data-variant=ghost]:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-button[data-variant=ghost]:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+  cursor: pointer;
 }
 .db-button[data-variant=filled] {
   background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
+  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
 }
-.db-button:disabled {
-  opacity: var(--db-opacity-md);
+.db-button[data-variant=filled]:hover:not(:disabled, [aria-disabled=true]) {
+  cursor: var(--db-overwrite-cursor, pointer);
+  background-color: var(--db-adaptive-bg-basic-transparent-semi-hovered);
 }
-.db-button[data-state=loading] {
-  font-size: 0 !important;
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-  font-size: 0;
+.db-button[data-variant=filled]:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-button[data-variant=filled]:hover:not(:disabled, [aria-disabled=true]):is(input) {
+  cursor: initial;
 }
-.db-button[data-state=loading]::before {
-  --db-icon-margin-end: 0;
+.db-button[data-variant=filled]:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-button[data-variant=filled]:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+  cursor: pointer;
+}
+.db-button[data-variant=filled]:active:not(:disabled, [aria-disabled=true]) {
+  cursor: var(--db-overwrite-cursor, pointer);
+  background-color: var(--db-adaptive-bg-basic-transparent-semi-pressed);
+}
+.db-button[data-variant=filled]:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-button[data-variant=filled]:active:not(:disabled, [aria-disabled=true]):is(input) {
+  cursor: initial;
+}
+.db-button[data-variant=filled]:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-button[data-variant=filled]:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+  cursor: pointer;
 }
-.db-button[data-state=loading]::before {
-  content: "";
+.db-button:disabled {
+  opacity: var(--db-opacity-md);
 }
 .db-button:has(> .db-button) {
   margin: 0;

package/build/components/button/button.scss

@@ -21,14 +21,6 @@
 	// disable text-decoration if someone wants to use the button for an <a> tag
 	text-decoration: none;
 
-	@include helpers.hover {
-		background-color: colors.$db-adaptive-bg-basic-transparent-hovered;
-	}
-
-	@include helpers.active {
-		background-color: colors.$db-adaptive-bg-basic-transparent-pressed;
-	}
-
 	// Square icon only buttons
 	&[data-no-text="true"] {
 		@include icons.is-icon-text-replace();
@@ -92,27 +84,32 @@
 	&[data-variant=""],
 	&[data-variant="ghost"] {
 		background-color: colors.$db-adaptive-bg-basic-transparent-full-default;
+
+		@include helpers.hover {
+			background-color: colors.$db-adaptive-bg-basic-transparent-full-hovered;
+		}
+
+		@include helpers.active {
+			background-color: colors.$db-adaptive-bg-basic-transparent-full-pressed;
+		}
 	}
 
 	&[data-variant="filled"] {
 		background-color: colors.$db-adaptive-bg-basic-transparent-semi-default;
+
+		@include helpers.hover {
+			background-color: colors.$db-adaptive-bg-basic-transparent-semi-hovered;
+		}
+
+		@include helpers.active {
+			background-color: colors.$db-adaptive-bg-basic-transparent-semi-pressed;
+		}
 	}
 
 	&:disabled {
 		opacity: variables.$db-opacity-md;
 	}
 
-	// States (currently only "loading")
-	&[data-state="loading"] {
-		@include icons.is-icon-text-replace();
-
-		font-size: 0;
-
-		&::before {
-			content: "";
-		}
-	}
-
 	// Workaround for current stencil implementation for header
 	&:has(> .db-button) {
 		margin: 0;

package/build/components/card/card.css

@@ -6,6 +6,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 /* Border */
 /* Opacity */
 /* Transitions */
+/* Screen sizes */
+/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 
@@ -54,10 +56,47 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   border-radius: var(--default-card-border-radius, var(--db-border-radius-sm));
 }
 
+:is(a, button) {
+  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
+}
+:is(a, button):has(.db-card) {
+  all: unset;
+}
+:is(a, button):hover:not(:disabled, [aria-disabled=true]) {
+  cursor: var(--db-overwrite-cursor, pointer);
+}
+:is(a, button):hover:not(:disabled, [aria-disabled=true]) > .db-card,
+:is(a, button):hover:not(:disabled, [aria-disabled=true]) > db-card > .db-card {
+  background-color: var(--db-card-background-color-hovered);
+}
+:is(a, button):hover:not(:disabled, [aria-disabled=true]):is(textarea), :is(a, button):hover:not(:disabled, [aria-disabled=true]):is(input) {
+  cursor: initial;
+}
+:is(a, button):hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), :is(a, button):hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+  cursor: pointer;
+}
+:is(a, button):active:not(:disabled, [aria-disabled=true]) {
+  cursor: var(--db-overwrite-cursor, pointer);
+}
+:is(a, button):active:not(:disabled, [aria-disabled=true]) > .db-card,
+:is(a, button):active:not(:disabled, [aria-disabled=true]) > db-card > .db-card {
+  background-color: var(--db-card-background-color-pressed);
+}
+:is(a, button):active:not(:disabled, [aria-disabled=true]):is(textarea), :is(a, button):active:not(:disabled, [aria-disabled=true]):is(input) {
+  cursor: initial;
+}
+:is(a, button):active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), :is(a, button):active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+  cursor: pointer;
+}
+
 .db-card {
+  --db-card-background-color-default: var(--db-adaptive-bg-basic-level-1-default);
+  --db-card-background-color-hovered: var(--db-adaptive-bg-basic-level-1-hovered);
+  --db-card-background-color-pressed: var(--db-adaptive-bg-basic-level-1-pressed);
   /* stylelint-disable-next-line at-rule-empty-line-before */
   display: flex;
   flex-direction: column;
+  background-color: var(--db-card-background-color-default);
 }
 .db-card:not([data-spacing]) {
   padding: var(--db-spacing-fixed-sm);
@@ -74,81 +113,36 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 .db-card[data-spacing=none] {
   padding: 0;
 }
-.db-card[data-elevation-level="1"], .db-card:not([data-elevation-level]) {
-  background-color: var(--db-adaptive-bg-basic-level-1-default);
-}
-.db-card[data-elevation-level="1"][data-behavior=interactive], .db-card:not([data-elevation-level])[data-behavior=interactive] {
+.db-card[data-behavior=interactive] {
   /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
 }
-.db-card[data-elevation-level="1"][data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]), .db-card:not([data-elevation-level])[data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]) {
+.db-card[data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]) {
   cursor: var(--db-overwrite-cursor, pointer);
-  background-color: var(--db-adaptive-bg-basic-level-1-hovered);
+  background-color: var(--db-card-background-color-hovered);
 }
-.db-card[data-elevation-level="1"][data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-card[data-elevation-level="1"][data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]):is(input), .db-card:not([data-elevation-level])[data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-card:not([data-elevation-level])[data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]):is(input) {
+.db-card[data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-card[data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]):is(input) {
   cursor: initial;
 }
-.db-card[data-elevation-level="1"][data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-card[data-elevation-level="1"][data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-card:not([data-elevation-level])[data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-card:not([data-elevation-level])[data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-card[data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-card[data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
-.db-card[data-elevation-level="1"][data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]), .db-card:not([data-elevation-level])[data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]) {
+.db-card[data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]) {
   cursor: var(--db-overwrite-cursor, pointer);
-  background-color: var(--db-adaptive-bg-basic-level-1-pressed);
+  background-color: var(--db-card-background-color-pressed);
 }
-.db-card[data-elevation-level="1"][data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-card[data-elevation-level="1"][data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]):is(input), .db-card:not([data-elevation-level])[data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-card:not([data-elevation-level])[data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]):is(input) {
+.db-card[data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-card[data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]):is(input) {
   cursor: initial;
 }
-.db-card[data-elevation-level="1"][data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-card[data-elevation-level="1"][data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-card:not([data-elevation-level])[data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-card:not([data-elevation-level])[data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-card[data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-card[data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
 .db-card[data-elevation-level="2"] {
-  background-color: var(--db-adaptive-bg-basic-level-2-default);
-}
-.db-card[data-elevation-level="2"][data-behavior=interactive] {
-  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
-}
-.db-card[data-elevation-level="2"][data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]) {
-  cursor: var(--db-overwrite-cursor, pointer);
-  background-color: var(--db-adaptive-bg-basic-level-2-hovered);
-}
-.db-card[data-elevation-level="2"][data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-card[data-elevation-level="2"][data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]):is(input) {
-  cursor: initial;
-}
-.db-card[data-elevation-level="2"][data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-card[data-elevation-level="2"][data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
-  cursor: pointer;
-}
-.db-card[data-elevation-level="2"][data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]) {
-  cursor: var(--db-overwrite-cursor, pointer);
-  background-color: var(--db-adaptive-bg-basic-level-2-pressed);
-}
-.db-card[data-elevation-level="2"][data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-card[data-elevation-level="2"][data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]):is(input) {
-  cursor: initial;
-}
-.db-card[data-elevation-level="2"][data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-card[data-elevation-level="2"][data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
-  cursor: pointer;
+  --db-card-background-color-default: var(--db-adaptive-bg-basic-level-2-default);
+  --db-card-background-color-hovered: var(--db-adaptive-bg-basic-level-2-hovered);
+  --db-card-background-color-pressed: var(--db-adaptive-bg-basic-level-2-pressed);
 }
 .db-card[data-elevation-level="3"] {
-  background-color: var(--db-adaptive-bg-basic-level-3-default);
-}
-.db-card[data-elevation-level="3"][data-behavior=interactive] {
-  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
-}
-.db-card[data-elevation-level="3"][data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]) {
-  cursor: var(--db-overwrite-cursor, pointer);
-  background-color: var(--db-adaptive-bg-basic-level-3-hovered);
-}
-.db-card[data-elevation-level="3"][data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-card[data-elevation-level="3"][data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]):is(input) {
-  cursor: initial;
-}
-.db-card[data-elevation-level="3"][data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-card[data-elevation-level="3"][data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
-  cursor: pointer;
-}
-.db-card[data-elevation-level="3"][data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]) {
-  cursor: var(--db-overwrite-cursor, pointer);
-  background-color: var(--db-adaptive-bg-basic-level-3-pressed);
-}
-.db-card[data-elevation-level="3"][data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-card[data-elevation-level="3"][data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]):is(input) {
-  cursor: initial;
-}
-.db-card[data-elevation-level="3"][data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-card[data-elevation-level="3"][data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
-  cursor: pointer;
+  --db-card-background-color-default: var(--db-adaptive-bg-basic-level-3-default);
+  --db-card-background-color-hovered: var(--db-adaptive-bg-basic-level-3-hovered);
+  --db-card-background-color-pressed: var(--db-adaptive-bg-basic-level-3-pressed);
 }

package/build/components/card/card.scss

@@ -3,54 +3,58 @@
 @use "@db-ux/core-foundations/build/styles/helpers";
 @use "../../styles/internal/component";
 
+:is(a, button) {
+	&:has(.db-card) {
+		all: unset;
+	}
+
+	@include helpers.hover {
+		> .db-card,
+		> db-card > .db-card {
+			background-color: var(--db-card-background-color-hovered);
+		}
+	}
+
+	@include helpers.active {
+		> .db-card,
+		> db-card > .db-card {
+			background-color: var(--db-card-background-color-pressed);
+		}
+	}
+}
+
 .db-card {
+	--db-card-background-color-default: #{colors.$db-adaptive-bg-basic-level-1-default};
+	--db-card-background-color-hovered: #{colors.$db-adaptive-bg-basic-level-1-hovered};
+	--db-card-background-color-pressed: #{colors.$db-adaptive-bg-basic-level-1-pressed};
+
 	@extend %default-card;
 
 	@include component.get-data-spacing();
 
 	display: flex;
 	flex-direction: column;
+	background-color: var(--db-card-background-color-default);
 
-	&[data-elevation-level="1"],
-	&:not([data-elevation-level]) {
-		background-color: colors.$db-adaptive-bg-basic-level-1-default;
-
-		&[data-behavior="interactive"] {
-			@include helpers.hover {
-				background-color: colors.$db-adaptive-bg-basic-level-1-hovered;
-			}
+	&[data-behavior="interactive"] {
+		@include helpers.hover {
+			background-color: var(--db-card-background-color-hovered);
+		}
 
-			@include helpers.active {
-				background-color: colors.$db-adaptive-bg-basic-level-1-pressed;
-			}
+		@include helpers.active {
+			background-color: var(--db-card-background-color-pressed);
 		}
 	}
 
 	&[data-elevation-level="2"] {
-		background-color: colors.$db-adaptive-bg-basic-level-2-default;
-
-		&[data-behavior="interactive"] {
-			@include helpers.hover {
-				background-color: colors.$db-adaptive-bg-basic-level-2-hovered;
-			}
-
-			@include helpers.active {
-				background-color: colors.$db-adaptive-bg-basic-level-2-pressed;
-			}
-		}
+		--db-card-background-color-default: #{colors.$db-adaptive-bg-basic-level-2-default};
+		--db-card-background-color-hovered: #{colors.$db-adaptive-bg-basic-level-2-hovered};
+		--db-card-background-color-pressed: #{colors.$db-adaptive-bg-basic-level-2-pressed};
 	}
 
 	&[data-elevation-level="3"] {
-		background-color: colors.$db-adaptive-bg-basic-level-3-default;
-
-		&[data-behavior="interactive"] {
-			@include helpers.hover {
-				background-color: colors.$db-adaptive-bg-basic-level-3-hovered;
-			}
-
-			@include helpers.active {
-				background-color: colors.$db-adaptive-bg-basic-level-3-pressed;
-			}
-		}
+		--db-card-background-color-default: #{colors.$db-adaptive-bg-basic-level-3-default};
+		--db-card-background-color-hovered: #{colors.$db-adaptive-bg-basic-level-3-hovered};
+		--db-card-background-color-pressed: #{colors.$db-adaptive-bg-basic-level-3-pressed};
 	}
 }