@db-ux/core-components 2.0.9 → 2.0.10-popover-d7e8b9a

package/build/components/accordion/accordion.css

@@ -36,6 +36,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+@layer variables {}
+
+@layer variables {}
+
 /**
  * @mixin screen-min-max
  * @param $data an object like (min:"sm", max:"lg") or (min: "sm")

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

@@ -55,6 +55,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+@layer variables {}
+
+@layer variables {}
+
 @keyframes show-right-to-left {
   from {
     transform: translateX(110%);
@@ -134,7 +138,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     transform: rotate(1turn);
   }
 }
-.db-accordion-item summary:not([data-hide-icon-after=true])::after {
+.db-accordion-item > details > summary:not([data-hide-icon-after=true])::after {
   color: var(--db-icon-color, inherit);
   display: inline-block;
   /*** icon - placeholder ***/
@@ -157,17 +161,17 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   content: var(--db-icon, attr(data-icon));
 }
 @supports (content: ""/"") {
-  .db-accordion-item summary:not([data-hide-icon-after=true])::after {
+  .db-accordion-item > details > summary:not([data-hide-icon-after=true])::after {
     content: var(--db-icon, attr(data-icon))/"";
   }
 }
 @media aural {
-  .db-accordion-item summary:not([data-hide-icon-after=true])::after {
+  .db-accordion-item > details > summary:not([data-hide-icon-after=true])::after {
     content: none;
   }
 }
 @media speech {
-  .db-accordion-item summary:not([data-hide-icon-after=true])::after {
+  .db-accordion-item > details > summary:not([data-hide-icon-after=true])::after {
     content: none;
   }
 }
@@ -204,12 +208,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-.db-accordion-item summary {
+.db-accordion-item > details > summary {
   font: var(--db-type-body-md);
   /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
 }
 @layer variables {
-  .db-accordion-item summary {
+  .db-accordion-item > details > summary {
     /* 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);
@@ -246,21 +250,21 @@ 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 summary:not([data-hide-icon-after=true])::after {
+.db-accordion-item > details > summary:not([data-hide-icon-after=true])::after {
   --db-icon-after: "chevron_down";
   margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
   content: var(--db-icon-after, attr(data-icon-after));
 }
 @supports (content: ""/"") {
-  .db-accordion-item summary:not([data-hide-icon-after=true])::after {
+  .db-accordion-item > details > summary:not([data-hide-icon-after=true])::after {
     content: var(--db-icon-after, attr(data-icon-after))/"";
   }
 }
-.db-accordion-item summary::after {
+.db-accordion-item > details > summary::after {
   pointer-events: none;
 }
 @media screen and (prefers-reduced-motion: no-preference) {
-  .db-accordion-item summary::after {
+  .db-accordion-item > details > summary::after {
     transition: transform var(--db-transition-straight-emotional);
   }
 }
@@ -271,35 +275,30 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   border-radius: var(--db-border-radius-sm);
   list-style-type: "";
 }
-.db-accordion-item > details[open] summary + div {
+.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 {
+.db-accordion-item > details[open] > summary::after {
   transform: rotate(-180deg);
 }
 .db-accordion-item > details[aria-disabled=true] {
   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);
+@media screen and (prefers-reduced-motion: no-preference) {
+  .db-accordion-item > details > summary + div {
+    transition: block-size var(--db-transition-straight-emotional);
   }
 }
-.db-accordion-item summary + div {
+.db-accordion-item > details > 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);
 }
-.db-accordion-item summary {
+.db-accordion-item > details > summary {
   background-color: var(--db-adaptive-bg-basic-level-1-default);
   list-style: none;
   display: flex;
@@ -309,32 +308,32 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   border-radius: var(--db-border-radius-sm);
   /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
 }
-.db-accordion-item summary:hover:not(:disabled, [aria-disabled=true]) {
+.db-accordion-item > details > summary:hover:not(:disabled, [aria-disabled=true]) {
   cursor: var(--db-overwrite-cursor, pointer);
   background-color: var(--db-adaptive-bg-basic-level-1-hovered);
 }
-.db-accordion-item summary:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-accordion-item summary:hover:not(:disabled, [aria-disabled=true]):is(input) {
+.db-accordion-item > details > summary:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-accordion-item > details > summary:hover:not(:disabled, [aria-disabled=true]):is(input) {
   cursor: initial;
 }
-.db-accordion-item summary:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-accordion-item summary:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-accordion-item > details > summary:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-accordion-item > details > summary:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
-.db-accordion-item summary:active:not(:disabled, [aria-disabled=true]) {
+.db-accordion-item > details > summary:active:not(:disabled, [aria-disabled=true]) {
   cursor: var(--db-overwrite-cursor, pointer);
   background-color: var(--db-adaptive-bg-basic-level-1-pressed);
 }
-.db-accordion-item summary:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-accordion-item summary:active:not(:disabled, [aria-disabled=true]):is(input) {
+.db-accordion-item > details > summary:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-accordion-item > details > summary:active:not(:disabled, [aria-disabled=true]):is(input) {
   cursor: initial;
 }
-.db-accordion-item summary:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-accordion-item summary:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-accordion-item > details > summary:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-accordion-item > details > summary:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
-.db-accordion-item summary::-webkit-details-marker {
+.db-accordion-item > details > summary::-webkit-details-marker {
   display: none;
 }
-.db-accordion-item summary::after {
+.db-accordion-item > details > summary::after {
   inset-inline-end: var(--db-spacing-fixed-sm);
 }
-.db-accordion-item summary:focus-visible {
+.db-accordion-item > details > summary:focus-visible {
   border-radius: var(--db-border-radius-xs);
 }

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

@@ -13,13 +13,13 @@
 
 	> details {
 		&[open] {
-			summary + div {
+			> summary + div {
 				block-size: auto;
 				/* stylelint-disable-next-line declaration-property-value-no-unknown */
 				block-size: calc-size(auto, size);
 			}
 
-			summary::after {
+			> summary::after {
 				transform: form-components.$dropdown-icon-transform;
 			}
 		}
@@ -28,56 +28,52 @@
 			pointer-events: none;
 			opacity: component.$default-disabled;
 		}
-	}
 
-	@media screen and (prefers-reduced-motion: reduce) {
-		summary + div {
+		@media screen and (prefers-reduced-motion: no-preference) {
+			> summary + div {
+				transition: block-size
+					#{variables.$db-transition-straight-emotional};
+			}
+		}
+
+		> 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;
-	}
-
-	summary {
-		@extend %dropdown-icon;
-		@extend %db-overwrite-font-size-md;
+		> summary {
+			@extend %dropdown-icon;
+			@extend %db-overwrite-font-size-md;
 
-		background-color: colors.$db-adaptive-bg-basic-level-1-default;
-		list-style: none;
-		display: flex;
-		justify-content: space-between;
-		padding: variables.$db-spacing-fixed-md;
-		gap: variables.$db-spacing-fixed-md;
-		border-radius: variables.$db-border-radius-sm;
+			background-color: colors.$db-adaptive-bg-basic-level-1-default;
+			list-style: none;
+			display: flex;
+			justify-content: space-between;
+			padding: variables.$db-spacing-fixed-md;
+			gap: variables.$db-spacing-fixed-md;
+			border-radius: variables.$db-border-radius-sm;
 
-		@include helpers.hover {
-			background-color: colors.$db-adaptive-bg-basic-level-1-hovered;
-		}
+			@include helpers.hover {
+				background-color: colors.$db-adaptive-bg-basic-level-1-hovered;
+			}
 
-		@include helpers.active {
-			background-color: colors.$db-adaptive-bg-basic-level-1-pressed;
-		}
+			@include helpers.active {
+				background-color: colors.$db-adaptive-bg-basic-level-1-pressed;
+			}
 
-		&::-webkit-details-marker {
-			display: none;
-		}
+			&::-webkit-details-marker {
+				display: none;
+			}
 
-		&::after {
-			inset-inline-end: variables.$db-spacing-fixed-sm;
-		}
+			&::after {
+				inset-inline-end: variables.$db-spacing-fixed-sm;
+			}
 
-		&:focus-visible {
-			border-radius: variables.$db-border-radius-xs;
+			&:focus-visible {
+				border-radius: variables.$db-border-radius-xs;
+			}
 		}
 	}
 }

package/build/components/badge/badge.css

@@ -36,6 +36,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+@layer variables {}
+
+@layer variables {}
+
 /**
 	Generates 3 types of placeholders, e.g:
 	- %db-component-variables-md

package/build/components/brand/brand.css

@@ -36,6 +36,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+@layer variables {}
+
+@layer variables {}
+
 /**
 	Generates 3 types of placeholders, e.g:
 	- %db-component-variables-md

package/build/components/button/button.css

@@ -36,6 +36,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+@layer variables {}
+
+@layer variables {}
+
 /**
 	Generates 3 types of placeholders, e.g:
 	- %db-component-variables-md

package/build/components/card/card.css

@@ -36,6 +36,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+@layer variables {}
+
+@layer variables {}
+
 /**
  * @mixin screen-min-max
  * @param $data an object like (min:"sm", max:"lg") or (min: "sm")

package/build/components/checkbox/checkbox.css

@@ -55,6 +55,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+@layer variables {}
+
+@layer variables {}
+
 .db-checkbox input:checked:not([data-hide-icon-before=true])::before, .db-checkbox input:indeterminate:not([data-hide-icon-before=true])::before {
   color: var(--db-icon-color, inherit);
   display: inline-block;

package/build/components/custom-select/custom-select.css

@@ -502,6 +502,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+@layer variables {}
+
+@layer variables {}
+
 /**
  * @mixin screen-min-max
  * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
@@ -774,40 +778,6 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
   opacity: 0.32;
 }
 
-[data-placement^=top].db-custom-select .db-custom-select-dropdown:not([data-outside-vy=top]), .db-custom-select:not([data-placement]) .db-custom-select-dropdown[data-outside-vy=bottom], [data-placement^=bottom].db-custom-select .db-custom-select-dropdown[data-outside-vy=bottom] {
-  /* stylelint-disable-next-line media-query-no-invalid */
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-}
-@media screen and (min-width: 45em) {
-  [data-placement^=top].db-custom-select .db-custom-select-dropdown:not([data-force-mobile]):not([data-outside-vy=top]), .db-custom-select:not([data-placement]) .db-custom-select-dropdown[data-outside-vy=bottom]:not([data-force-mobile]), [data-placement^=bottom].db-custom-select .db-custom-select-dropdown[data-outside-vy=bottom]:not([data-force-mobile]), [data-placement^=top].db-custom-select [data-force-mobile=false].db-custom-select-dropdown:not([data-outside-vy=top]), .db-custom-select:not([data-placement]) [data-force-mobile=false].db-custom-select-dropdown[data-outside-vy=bottom], [data-placement^=bottom].db-custom-select [data-force-mobile=false].db-custom-select-dropdown[data-outside-vy=bottom] {
-    inset-block-end: 100%;
-    margin-block-start: var(--db-spacing-fixed-md);
-  }
-}
-
-[data-placement^=top].db-custom-select, .db-custom-select:not([data-placement]), [data-placement^=bottom].db-custom-select {
-  /* stylelint-disable-next-line media-query-no-invalid */
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-}
-@media screen and (min-width: 45em) {
-  [data-placement^=top].db-custom-select:not([data-force-mobile])[data-placement$=end] .db-custom-select-dropdown:not([data-outside-vx=right]), .db-custom-select:not([data-force-mobile])[data-placement$=end]:not([data-placement]) .db-custom-select-dropdown:not([data-outside-vx=right]), [data-placement^=bottom].db-custom-select:not([data-force-mobile])[data-placement$=end] .db-custom-select-dropdown:not([data-outside-vx=right]), [data-force-mobile=false][data-placement$=end][data-placement^=top].db-custom-select .db-custom-select-dropdown:not([data-outside-vx=right]), [data-force-mobile=false][data-placement$=end].db-custom-select:not([data-placement]) .db-custom-select-dropdown:not([data-outside-vx=right]), [data-force-mobile=false][data-placement$=end][data-placement^=bottom].db-custom-select .db-custom-select-dropdown:not([data-outside-vx=right]) {
-    inset-inline-end: 0;
-  }
-  [data-placement^=top].db-custom-select:not([data-force-mobile]) .db-custom-select-dropdown[data-outside-vx=right], .db-custom-select:not([data-force-mobile]):not([data-placement]) .db-custom-select-dropdown[data-outside-vx=right], [data-placement^=bottom].db-custom-select:not([data-force-mobile]) .db-custom-select-dropdown[data-outside-vx=right], [data-force-mobile=false][data-placement^=top].db-custom-select .db-custom-select-dropdown[data-outside-vx=right], [data-force-mobile=false].db-custom-select:not([data-placement]) .db-custom-select-dropdown[data-outside-vx=right], [data-force-mobile=false][data-placement^=bottom].db-custom-select .db-custom-select-dropdown[data-outside-vx=right] {
-    inset-inline-end: 0;
-  }
-}
-
-.db-custom-select:not([data-placement]) .db-custom-select-dropdown:not([data-outside-vy=bottom]), [data-placement^=bottom].db-custom-select .db-custom-select-dropdown:not([data-outside-vy=bottom]) {
-  /* stylelint-disable-next-line media-query-no-invalid */
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-}
-@media screen and (min-width: 45em) {
-  .db-custom-select:not([data-placement]) .db-custom-select-dropdown:not([data-outside-vy=bottom]):not([data-force-mobile]), .db-custom-select:not([data-placement]) .db-custom-select-dropdown:not([data-outside-vy=bottom])[data-force-mobile=false], [data-placement^=bottom].db-custom-select .db-custom-select-dropdown:not([data-outside-vy=bottom]):not([data-force-mobile]), [data-placement^=bottom].db-custom-select .db-custom-select-dropdown:not([data-outside-vy=bottom])[data-force-mobile=false] {
-    inset-block-start: 100%;
-    margin-block-end: var(--db-spacing-fixed-md);
-  }
-}
 .db-custom-select {
   --db-form-component-padding-inline-end: calc(
   	calc(var(--db-icon-font-size) + var(--db-spacing-fixed-sm) + var(--db-spacing-fixed-xs)) + var(--db-sizing-sm) +

package/build/components/custom-select/custom-select.scss

@@ -7,53 +7,6 @@
 @use "../../styles/internal/select-components";
 @use "../../styles/dialog-init";
 
-%custom-select-placement-top {
-	@include screen-sizes.screen("sm") {
-		inset-block-end: 100%;
-		margin-block-start: variables.$db-spacing-fixed-md;
-	}
-}
-
-%custom-select-placement-vertical {
-	@include screen-sizes.screen("sm") {
-		&[data-placement$="end"] {
-			.db-custom-select-dropdown:not([data-outside-vx="right"]) {
-				inset-inline-end: 0;
-			}
-		}
-
-		.db-custom-select-dropdown[data-outside-vx="right"] {
-			inset-inline-end: 0;
-		}
-	}
-}
-
-%custom-select-placement {
-	&:not([data-placement]),
-	&[data-placement^="bottom"] {
-		@extend %custom-select-placement-vertical;
-
-		.db-custom-select-dropdown:not([data-outside-vy="bottom"]) {
-			@include screen-sizes.screen("sm") {
-				inset-block-start: 100%;
-				margin-block-end: variables.$db-spacing-fixed-md;
-			}
-		}
-
-		.db-custom-select-dropdown[data-outside-vy="bottom"] {
-			@extend %custom-select-placement-top;
-		}
-	}
-
-	&[data-placement^="top"] {
-		@extend %custom-select-placement-vertical;
-
-		.db-custom-select-dropdown:not([data-outside-vy="top"]) {
-			@extend %custom-select-placement-top;
-		}
-	}
-}
-
 .db-custom-select {
 	--db-form-component-padding-inline-end: calc(
 		#{select-components.$select-icon-padding} + #{variables.$db-sizing-sm} +
@@ -67,7 +20,6 @@
 
 	@extend %select-icon;
 	@extend %select-placeholder;
-	@extend %custom-select-placement;
 
 	position: relative;
 

package/build/components/custom-select-dropdown/custom-select-dropdown.css

@@ -202,6 +202,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+@layer variables {}
+
+@layer variables {}
+
 /**
  * @mixin screen-min-max
  * @param $data an object like (min:"sm", max:"lg") or (min: "sm")

package/build/components/custom-select-form-field/custom-select-form-field.css

@@ -55,6 +55,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+@layer variables {}
+
+@layer variables {}
+
 /**
 	Generates 3 types of placeholders, e.g:
 	- %db-component-variables-md

package/build/components/custom-select-list/custom-select-list.css

@@ -55,6 +55,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+@layer variables {}
+
+@layer variables {}
+
 /**
 	Generates 3 types of placeholders, e.g:
 	- %db-component-variables-md

package/build/components/custom-select-list-item/custom-select-list-item.css

@@ -55,6 +55,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+@layer variables {}
+
+@layer variables {}
+
 .db-custom-select-list-item:not([data-disable-focus=true]):has(> label > input:focus-within) {
   outline: var(--db-border-width-2xs) solid var(--db-focus-outline-color, var(--db-informational-on-bg-basic-emphasis-70-default));
   outline-offset: var(--db-border-width-xs);
@@ -225,6 +229,7 @@ db-custom-select-list-item:not(:last-of-type) .db-custom-select-list-item[data-d
 }
 .db-custom-select-list-item > label {
   --db-icon-margin-start: auto;
+  --db-check-element-label-color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
   inline-size: 100%;
 }
 .db-custom-select-list-item > label:has(input:checked) {
@@ -239,7 +244,8 @@ db-custom-select-list-item:not(:last-of-type) .db-custom-select-list-item[data-d
   --db-icon-after: "check";
 }
 .db-custom-select-list-item > label > input {
-  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
+  --db-adaptive-bg-basic-transparent-hovered: var(--db-adaptive-bg-basic-transparent-full-default);
+  --db-adaptive-bg-basic-transparent-pressed: var(--db-adaptive-bg-basic-transparent-full-default);
   /* We set focus on complete list element, we remove it from checkbox with this trick */
   /* stylelint-disable-next-line a11y/no-outline-none */
 }
@@ -252,26 +258,6 @@ db-custom-select-list-item:not(:last-of-type) .db-custom-select-list-item[data-d
 .db-custom-select-list-item > label > input[type=radio] {
   all: unset;
 }
-.db-custom-select-list-item > label > input:hover:not(:disabled, [aria-disabled=true]) {
-  cursor: var(--db-overwrite-cursor, pointer);
-  background-color: var(--db-adaptive-bg-basic-transparent-full-default);
-}
-.db-custom-select-list-item > label > input:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-custom-select-list-item > label > input:hover:not(:disabled, [aria-disabled=true]):is(input) {
-  cursor: initial;
-}
-.db-custom-select-list-item > label > input:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-custom-select-list-item > label > input:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
-  cursor: pointer;
-}
-.db-custom-select-list-item > label > input:active:not(:disabled, [aria-disabled=true]) {
-  cursor: var(--db-overwrite-cursor, pointer);
-  background-color: var(--db-adaptive-bg-basic-transparent-full-default);
-}
-.db-custom-select-list-item > label > input:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-custom-select-list-item > label > input:active:not(:disabled, [aria-disabled=true]):is(input) {
-  cursor: initial;
-}
-.db-custom-select-list-item > label > input:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-custom-select-list-item > label > input:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
-  cursor: pointer;
-}
 .db-custom-select-list-item > label > input:focus-visible {
   outline: none !important;
 }

package/build/components/custom-select-list-item/custom-select-list-item.scss

@@ -50,6 +50,7 @@ db-custom-select-list-item:not(:last-of-type) {
 
 	> label {
 		--db-icon-margin-start: auto;
+		--db-check-element-label-color: #{colors.$db-adaptive-on-bg-basic-emphasis-100-default};
 
 		inline-size: 100%;
 
@@ -69,6 +70,10 @@ db-custom-select-list-item:not(:last-of-type) {
 		}
 
 		> input {
+			// We revert interaction states for checkbox
+			--db-adaptive-bg-basic-transparent-hovered: #{colors.$db-adaptive-bg-basic-transparent-full-default};
+			--db-adaptive-bg-basic-transparent-pressed: #{colors.$db-adaptive-bg-basic-transparent-full-default};
+
 			&::after {
 				position: absolute;
 				content: "";
@@ -80,15 +85,6 @@ db-custom-select-list-item:not(:last-of-type) {
 				all: unset;
 			}
 
-			// We revert interaction states for checkbox
-			@include helpers.hover {
-				background-color: colors.$db-adaptive-bg-basic-transparent-full-default;
-			}
-
-			@include helpers.active {
-				background-color: colors.$db-adaptive-bg-basic-transparent-full-default;
-			}
-
 			/* We set focus on complete list element, we remove it from checkbox with this trick */
 			/* stylelint-disable-next-line a11y/no-outline-none */
 			&:focus-visible {

package/build/components/divider/divider.css

@@ -36,6 +36,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+@layer variables {}
+
+@layer variables {}
+
 .db-divider:is(:not([data-margin]), [data-margin=small]) {
   margin: var(--db-spacing-fixed-sm) 0;
 }

package/build/components/drawer/drawer.css

@@ -36,6 +36,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+@layer variables {}
+
+@layer variables {}
+
 @keyframes show-right-to-left {
   from {
     transform: translateX(110%);

package/build/components/header/header.css

@@ -36,6 +36,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+@layer variables {}
+
+@layer variables {}
+
 /**
  * @mixin screen-min-max
  * @param $data an object like (min:"sm", max:"lg") or (min: "sm")

package/build/components/icon/icon.css

@@ -36,6 +36,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+@layer variables {}
+
+@layer variables {}
+
 .db-icon {
   font-size: 0 !important;
   /* stylelint-disable-next-line at-rule-empty-line-before */

package/build/components/infotext/infotext.css

@@ -36,6 +36,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+@layer variables {}
+
+@layer variables {}
+
 /**
 	Generates 3 types of placeholders, e.g:
 	- %db-component-variables-md

package/build/components/input/input.css

@@ -355,6 +355,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+@layer variables {}
+
+@layer variables {}
+
 .db-input:has(input[type=search]):not([data-hide-icon-before=true])::before, .db-input:has(input[type=search]):not([data-hide-icon-after=true])::after, .db-input:has(input[type=date]):not([data-hide-icon-after=true])::after, .db-input:has(input[type=week]):not([data-hide-icon-after=true])::after, .db-input:has(input[type=datetime-local]):not([data-hide-icon-after=true])::after, .db-input:has(input[type=month]):not([data-hide-icon-after=true])::after, .db-input:has(input[type=time]):not([data-hide-icon-after=true])::after, .db-input:not([data-hide-icon-after=true]):has(datalist)::after {
   color: var(--db-icon-color, inherit);
   display: inline-block;