@db-ux/core-components 2.0.9 → 2.1.0

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
@@ -138,7 +142,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 }
 
 .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button, .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button {
-  border-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
+  --db-tag-border-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
+  border-color: var(--db-tag-border-color);
   background-color: var(--db-adaptive-bg-vibrant-default);
   color: var(--db-adaptive-on-bg-vibrant-default);
   /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
@@ -201,7 +206,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   font-weight: 700;
 }
 .db-badge:not([data-semantic]):not([data-emphasis]), .db-badge:not([data-semantic])[data-emphasis=weak], .db-badge[data-semantic=adaptive]:not([data-emphasis]), .db-badge[data-semantic=adaptive][data-emphasis=weak] {
-  border-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
+  --db-tag-border-color: var(
+  	--db-adaptive-on-bg-basic-emphasis-70-default
+  );
+  border-color: var(--db-tag-border-color);
   background-color: var(--db-adaptive-bg-basic-level-3-default);
   color: var(--db-adaptive-on-bg-basic-emphasis-80-default);
   /* stylelint-disable-next-line at-rule-empty-line-before */
@@ -210,7 +218,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-icon-color: var(--db-adaptive-on-bg-basic-emphasis-80-default);
 }
 .db-badge:not([data-semantic])[data-emphasis=strong], .db-badge[data-semantic=adaptive][data-emphasis=strong] {
-  border-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
+  --db-tag-border-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
+  border-color: var(--db-tag-border-color);
   background-color: var(--db-adaptive-bg-vibrant-default);
   color: var(--db-adaptive-on-bg-vibrant-default);
 }
@@ -218,7 +227,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-icon-color: var(--db-adaptive-on-bg-vibrant-default);
 }
 .db-badge[data-semantic=neutral]:not([data-emphasis]), .db-badge[data-semantic=neutral][data-emphasis=weak] {
-  border-color: var(--db-neutral-on-bg-basic-emphasis-70-default);
+  --db-tag-border-color: var(
+  	--db-neutral-on-bg-basic-emphasis-70-default
+  );
+  border-color: var(--db-tag-border-color);
   background-color: var(--db-neutral-bg-basic-level-3-default);
   color: var(--db-neutral-on-bg-basic-emphasis-80-default);
 }
@@ -226,7 +238,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-icon-color: var(--db-neutral-on-bg-basic-emphasis-80-default);
 }
 .db-badge[data-semantic=neutral][data-emphasis=strong] {
-  border-color: var(--db-neutral-on-bg-basic-emphasis-70-default);
+  --db-tag-border-color: var(--db-neutral-on-bg-basic-emphasis-70-default);
+  border-color: var(--db-tag-border-color);
   background-color: var(--db-neutral-bg-vibrant-default);
   color: var(--db-neutral-on-bg-vibrant-default);
 }
@@ -234,7 +247,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-icon-color: var(--db-neutral-on-bg-vibrant-default);
 }
 .db-badge[data-semantic=critical]:not([data-emphasis]), .db-badge[data-semantic=critical][data-emphasis=weak] {
-  border-color: var(--db-critical-on-bg-basic-emphasis-70-default);
+  --db-tag-border-color: var(
+  	--db-critical-on-bg-basic-emphasis-70-default
+  );
+  border-color: var(--db-tag-border-color);
   background-color: var(--db-critical-bg-basic-level-3-default);
   color: var(--db-critical-on-bg-basic-emphasis-80-default);
 }
@@ -242,7 +258,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-icon-color: var(--db-critical-on-bg-basic-emphasis-80-default);
 }
 .db-badge[data-semantic=critical][data-emphasis=strong] {
-  border-color: var(--db-critical-on-bg-basic-emphasis-70-default);
+  --db-tag-border-color: var(--db-critical-on-bg-basic-emphasis-70-default);
+  border-color: var(--db-tag-border-color);
   background-color: var(--db-critical-bg-vibrant-default);
   color: var(--db-critical-on-bg-vibrant-default);
 }
@@ -250,7 +267,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-icon-color: var(--db-critical-on-bg-vibrant-default);
 }
 .db-badge[data-semantic=successful]:not([data-emphasis]), .db-badge[data-semantic=successful][data-emphasis=weak] {
-  border-color: var(--db-successful-on-bg-basic-emphasis-70-default);
+  --db-tag-border-color: var(
+  	--db-successful-on-bg-basic-emphasis-70-default
+  );
+  border-color: var(--db-tag-border-color);
   background-color: var(--db-successful-bg-basic-level-3-default);
   color: var(--db-successful-on-bg-basic-emphasis-80-default);
 }
@@ -258,7 +278,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-icon-color: var(--db-successful-on-bg-basic-emphasis-80-default);
 }
 .db-badge[data-semantic=successful][data-emphasis=strong] {
-  border-color: var(--db-successful-on-bg-basic-emphasis-70-default);
+  --db-tag-border-color: var(--db-successful-on-bg-basic-emphasis-70-default);
+  border-color: var(--db-tag-border-color);
   background-color: var(--db-successful-bg-vibrant-default);
   color: var(--db-successful-on-bg-vibrant-default);
 }
@@ -266,7 +287,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-icon-color: var(--db-successful-on-bg-vibrant-default);
 }
 .db-badge[data-semantic=warning]:not([data-emphasis]), .db-badge[data-semantic=warning][data-emphasis=weak] {
-  border-color: var(--db-warning-on-bg-basic-emphasis-70-default);
+  --db-tag-border-color: var(
+  	--db-warning-on-bg-basic-emphasis-70-default
+  );
+  border-color: var(--db-tag-border-color);
   background-color: var(--db-warning-bg-basic-level-3-default);
   color: var(--db-warning-on-bg-basic-emphasis-80-default);
 }
@@ -274,7 +298,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-icon-color: var(--db-warning-on-bg-basic-emphasis-80-default);
 }
 .db-badge[data-semantic=warning][data-emphasis=strong] {
-  border-color: var(--db-warning-on-bg-basic-emphasis-70-default);
+  --db-tag-border-color: var(--db-warning-on-bg-basic-emphasis-70-default);
+  border-color: var(--db-tag-border-color);
   background-color: var(--db-warning-bg-vibrant-default);
   color: var(--db-warning-on-bg-vibrant-default);
 }
@@ -282,7 +307,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-icon-color: var(--db-warning-on-bg-vibrant-default);
 }
 .db-badge[data-semantic=informational]:not([data-emphasis]), .db-badge[data-semantic=informational][data-emphasis=weak] {
-  border-color: var(--db-informational-on-bg-basic-emphasis-70-default);
+  --db-tag-border-color: var(
+  	--db-informational-on-bg-basic-emphasis-70-default
+  );
+  border-color: var(--db-tag-border-color);
   background-color: var(--db-informational-bg-basic-level-3-default);
   color: var(--db-informational-on-bg-basic-emphasis-80-default);
 }
@@ -290,7 +318,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-icon-color: var(--db-informational-on-bg-basic-emphasis-80-default);
 }
 .db-badge[data-semantic=informational][data-emphasis=strong] {
-  border-color: var(--db-informational-on-bg-basic-emphasis-70-default);
+  --db-tag-border-color: var(--db-informational-on-bg-basic-emphasis-70-default);
+  border-color: var(--db-tag-border-color);
   background-color: var(--db-informational-bg-vibrant-default);
   color: var(--db-informational-on-bg-vibrant-default);
 }

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")

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%);
@@ -278,6 +282,18 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
 .db-drawer .db-drawer-container:not([data-width=full]) {
   max-inline-size: var(--db-drawer-max-width, calc(100% - var(--db-spacing-fixed-xl)));
 }
+.db-drawer .db-drawer-container:not([data-width=full]):not([data-direction]), .db-drawer .db-drawer-container:not([data-width=full])[data-direction=right] {
+  border-inline-start: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
+}
+.db-drawer .db-drawer-container:not([data-width=full])[data-direction=left] {
+  border-inline-end: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
+}
+.db-drawer .db-drawer-container:not([data-width=full])[data-direction=up] {
+  border-block-start: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
+}
+.db-drawer .db-drawer-container:not([data-width=full])[data-direction=down] {
+  border-block-end: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
+}
 .db-drawer .db-drawer-container[data-rounded=true] {
   box-shadow: var(--db-elevation-md);
 }