@db-ux/core-components 2.4.3 → 3.0.0

package/build/components/checkbox/checkbox.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;
@@ -60,7 +62,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-.db-checkbox input:checked:not([data-hide-icon-before=true])::before, .db-checkbox input:indeterminate:not([data-hide-icon-before=true])::before {
+.db-checkbox input:checked:not([data-show-icon-leading=false])::before, .db-checkbox input:indeterminate:not([data-show-icon-leading=false])::before {
   color: var(--db-icon-color, inherit);
   display: inline-block;
   /*** icon - placeholder ***/
@@ -77,23 +79,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-checkbox input:checked:not([data-hide-icon-before=true])::before, .db-checkbox input:indeterminate:not([data-hide-icon-before=true])::before {
+  .db-checkbox input:checked:not([data-show-icon-leading=false])::before, .db-checkbox input:indeterminate:not([data-show-icon-leading=false])::before {
     content: var(--db-icon, attr(data-icon))/"";
   }
 }
 @media aural {
-  .db-checkbox input:checked:not([data-hide-icon-before=true])::before, .db-checkbox input:indeterminate:not([data-hide-icon-before=true])::before {
+  .db-checkbox input:checked:not([data-show-icon-leading=false])::before, .db-checkbox input:indeterminate:not([data-show-icon-leading=false])::before {
     content: none;
   }
 }
 @media speech {
-  .db-checkbox input:checked:not([data-hide-icon-before=true])::before, .db-checkbox input:indeterminate:not([data-hide-icon-before=true])::before {
+  .db-checkbox input:checked:not([data-show-icon-leading=false])::before, .db-checkbox input:indeterminate:not([data-show-icon-leading=false])::before {
     content: none;
   }
 }
@@ -260,7 +262,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 }
 .db-checkbox:not(:has(input:disabled)):has(input:hover, > label:hover, :is(label):hover) input {
   cursor: var(--db-overwrite-cursor, pointer);
-  background-color: var(--db-adaptive-bg-basic-transparent-hovered);
+  background-color: var(--db-adaptive-bg-basic-transparent-full-hovered);
 }
 .db-checkbox:not(:has(input:disabled)):has(input:active, > label:active, :is(label):active) {
   --db-check-element-label-color: var(
@@ -273,7 +275,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 }
 .db-checkbox:not(:has(input:disabled)):has(input:active, > label:active, :is(label):active) input {
   cursor: var(--db-overwrite-cursor, pointer);
-  background-color: var(--db-adaptive-bg-basic-transparent-pressed);
+  background-color: var(--db-adaptive-bg-basic-transparent-full-pressed);
 }
 .db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) {
   --db-check-element-border-color: var(
@@ -302,14 +304,14 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   display: none;
 }
 .db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) input:not(:checked) {
-  --db-adaptive-bg-basic-transparent-default: var(
-  	--db-successful-bg-basic-transparent-default
+  --db-adaptive-bg-basic-transparent-full-default: var(
+  	--db-successful-bg-basic-transparent-full-default
   );
-  --db-adaptive-bg-basic-transparent-hovered: var(
-  	--db-successful-bg-basic-transparent-hovered
+  --db-adaptive-bg-basic-transparent-full-hovered: var(
+  	--db-successful-bg-basic-transparent-full-hovered
   );
-  --db-adaptive-bg-basic-transparent-pressed: var(
-  	--db-successful-bg-basic-transparent-pressed
+  --db-adaptive-bg-basic-transparent-full-pressed: var(
+  	--db-successful-bg-basic-transparent-full-pressed
   );
 }
 .db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) input:checked {
@@ -317,10 +319,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-adaptive-bg-basic-transparent-full-default: var(
   	--db-successful-bg-inverted-contrast-high-default
   );
-  --db-adaptive-bg-basic-transparent-hovered: var(
+  --db-adaptive-bg-basic-transparent-full-hovered: var(
   	--db-successful-bg-inverted-contrast-high-hovered
   );
-  --db-adaptive-bg-basic-transparent-pressed: var(
+  --db-adaptive-bg-basic-transparent-full-pressed: var(
   	--db-successful-bg-inverted-contrast-high-pressed
   );
 }
@@ -354,14 +356,14 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   display: none;
 }
 .db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) input:not(:checked), .db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) input:not(:checked) {
-  --db-adaptive-bg-basic-transparent-default: var(
-  	--db-successful-bg-basic-transparent-default
+  --db-adaptive-bg-basic-transparent-full-default: var(
+  	--db-successful-bg-basic-transparent-full-default
   );
-  --db-adaptive-bg-basic-transparent-hovered: var(
-  	--db-successful-bg-basic-transparent-hovered
+  --db-adaptive-bg-basic-transparent-full-hovered: var(
+  	--db-successful-bg-basic-transparent-full-hovered
   );
-  --db-adaptive-bg-basic-transparent-pressed: var(
-  	--db-successful-bg-basic-transparent-pressed
+  --db-adaptive-bg-basic-transparent-full-pressed: var(
+  	--db-successful-bg-basic-transparent-full-pressed
   );
 }
 .db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) input:checked, .db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) input:checked {
@@ -369,10 +371,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-adaptive-bg-basic-transparent-full-default: var(
   	--db-successful-bg-inverted-contrast-high-default
   );
-  --db-adaptive-bg-basic-transparent-hovered: var(
+  --db-adaptive-bg-basic-transparent-full-hovered: var(
   	--db-successful-bg-inverted-contrast-high-hovered
   );
-  --db-adaptive-bg-basic-transparent-pressed: var(
+  --db-adaptive-bg-basic-transparent-full-pressed: var(
   	--db-successful-bg-inverted-contrast-high-pressed
   );
 }
@@ -399,14 +401,14 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   display: none;
 }
 .db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) input:not(:checked) {
-  --db-adaptive-bg-basic-transparent-default: var(
-  	--db-critical-bg-basic-transparent-default
+  --db-adaptive-bg-basic-transparent-full-default: var(
+  	--db-critical-bg-basic-transparent-full-default
   );
-  --db-adaptive-bg-basic-transparent-hovered: var(
-  	--db-critical-bg-basic-transparent-hovered
+  --db-adaptive-bg-basic-transparent-full-hovered: var(
+  	--db-critical-bg-basic-transparent-full-hovered
   );
-  --db-adaptive-bg-basic-transparent-pressed: var(
-  	--db-critical-bg-basic-transparent-pressed
+  --db-adaptive-bg-basic-transparent-full-pressed: var(
+  	--db-critical-bg-basic-transparent-full-pressed
   );
 }
 .db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) input:checked {
@@ -414,10 +416,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-adaptive-bg-basic-transparent-full-default: var(
   	--db-critical-bg-inverted-contrast-high-default
   );
-  --db-adaptive-bg-basic-transparent-hovered: var(
+  --db-adaptive-bg-basic-transparent-full-hovered: var(
   	--db-critical-bg-inverted-contrast-high-hovered
   );
-  --db-adaptive-bg-basic-transparent-pressed: var(
+  --db-adaptive-bg-basic-transparent-full-pressed: var(
   	--db-critical-bg-inverted-contrast-high-pressed
   );
 }
@@ -446,14 +448,14 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   display: none;
 }
 .db-checkbox:has(input[data-custom-validity=invalid]) input:not(:checked), .db-checkbox[data-custom-validity=invalid] input:not(:checked) {
-  --db-adaptive-bg-basic-transparent-default: var(
-  	--db-critical-bg-basic-transparent-default
+  --db-adaptive-bg-basic-transparent-full-default: var(
+  	--db-critical-bg-basic-transparent-full-default
   );
-  --db-adaptive-bg-basic-transparent-hovered: var(
-  	--db-critical-bg-basic-transparent-hovered
+  --db-adaptive-bg-basic-transparent-full-hovered: var(
+  	--db-critical-bg-basic-transparent-full-hovered
   );
-  --db-adaptive-bg-basic-transparent-pressed: var(
-  	--db-critical-bg-basic-transparent-pressed
+  --db-adaptive-bg-basic-transparent-full-pressed: var(
+  	--db-critical-bg-basic-transparent-full-pressed
   );
 }
 .db-checkbox:has(input[data-custom-validity=invalid]) input:checked, .db-checkbox[data-custom-validity=invalid] input:checked {
@@ -461,10 +463,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-adaptive-bg-basic-transparent-full-default: var(
   	--db-critical-bg-inverted-contrast-high-default
   );
-  --db-adaptive-bg-basic-transparent-hovered: var(
+  --db-adaptive-bg-basic-transparent-full-hovered: var(
   	--db-critical-bg-inverted-contrast-high-hovered
   );
-  --db-adaptive-bg-basic-transparent-pressed: var(
+  --db-adaptive-bg-basic-transparent-full-pressed: var(
   	--db-critical-bg-inverted-contrast-high-pressed
   );
 }
@@ -480,19 +482,19 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-adaptive-bg-basic-transparent-full-default: var(
   	--db-adaptive-bg-inverted-contrast-max-default
   );
-  --db-adaptive-bg-basic-transparent-hovered: var(
+  --db-adaptive-bg-basic-transparent-full-hovered: var(
   	--db-adaptive-bg-inverted-contrast-max-hovered
   );
-  --db-adaptive-bg-basic-transparent-pressed: var(
+  --db-adaptive-bg-basic-transparent-full-pressed: var(
   	--db-adaptive-bg-inverted-contrast-max-pressed
   );
   border-width: 0;
 }
-.db-checkbox input:checked:not([data-hide-icon-before=true])::before {
+.db-checkbox input:checked:not([data-show-icon-leading=false])::before {
   --db-icon: "check";
   margin-inline-end: var(--db-icon-margin-end, var(--db-spacing-fixed-xs));
 }
-.db-checkbox input:indeterminate:not([data-hide-icon-before=true])::before {
+.db-checkbox input:indeterminate:not([data-show-icon-leading=false])::before {
   --db-icon: "minus";
   margin-inline-end: var(--db-icon-margin-end, var(--db-spacing-fixed-xs));
 }
@@ -501,7 +503,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     --db-check-element-border-color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
     border-width: min(var(--db-border-width-2xs), 2px);
   }
-  .db-checkbox input:indeterminate:not([data-hide-icon-before=true])::before, .db-checkbox input:checked:not([data-hide-icon-before=true])::before {
+  .db-checkbox input:indeterminate:not([data-show-icon-leading=false])::before, .db-checkbox input:checked:not([data-show-icon-leading=false])::before {
     align-content: center;
     font-size: calc(var(--db-icon-font-size) - 2 * min(var(--db-border-width-2xs), 2px));
     padding: min(var(--db-border-width-2xs), 2px);

package/build/components/checkbox/checkbox.scss

@@ -48,14 +48,14 @@
 
 	input {
 		&:not(:checked) {
-			--db-adaptive-bg-basic-transparent-default: var(
-				--db-#{$variant}-bg-basic-transparent-default
+			--db-adaptive-bg-basic-transparent-full-default: var(
+				--db-#{$variant}-bg-basic-transparent-full-default
 			);
-			--db-adaptive-bg-basic-transparent-hovered: var(
-				--db-#{$variant}-bg-basic-transparent-hovered
+			--db-adaptive-bg-basic-transparent-full-hovered: var(
+				--db-#{$variant}-bg-basic-transparent-full-hovered
 			);
-			--db-adaptive-bg-basic-transparent-pressed: var(
-				--db-#{$variant}-bg-basic-transparent-pressed
+			--db-adaptive-bg-basic-transparent-full-pressed: var(
+				--db-#{$variant}-bg-basic-transparent-full-pressed
 			);
 		}
 
@@ -64,10 +64,10 @@
 			--db-adaptive-bg-basic-transparent-full-default: var(
 				--db-#{$variant}-bg-inverted-contrast-high-default
 			);
-			--db-adaptive-bg-basic-transparent-hovered: var(
+			--db-adaptive-bg-basic-transparent-full-hovered: var(
 				--db-#{$variant}-bg-inverted-contrast-high-hovered
 			);
-			--db-adaptive-bg-basic-transparent-pressed: var(
+			--db-adaptive-bg-basic-transparent-full-pressed: var(
 				--db-#{$variant}-bg-inverted-contrast-high-pressed
 			);
 		}
@@ -106,10 +106,10 @@
 			--db-adaptive-bg-basic-transparent-full-default: var(
 				--db-adaptive-bg-inverted-contrast-max-default
 			);
-			--db-adaptive-bg-basic-transparent-hovered: var(
+			--db-adaptive-bg-basic-transparent-full-hovered: var(
 				--db-adaptive-bg-inverted-contrast-max-hovered
 			);
-			--db-adaptive-bg-basic-transparent-pressed: var(
+			--db-adaptive-bg-basic-transparent-full-pressed: var(
 				--db-adaptive-bg-inverted-contrast-max-pressed
 			);
 
@@ -135,7 +135,7 @@
 
 				border-width: form-components.$check-border-size;
 
-				&:not([data-hide-icon-before="true"])::before {
+				&:not([data-show-icon-leading="false"])::before {
 					align-content: center;
 					font-size: calc(
 						var(--db-icon-font-size) - 2 *

package/build/components/custom-select/custom-select.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, ... */
 .db-custom-select[data-hide-label=true] > label, .db-visually-hidden,
 [data-visually-hidden=true] {
@@ -64,11 +66,17 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     --db-adaptive-bg-basic-transparent-semi-default: var(
     	--db-neutral-bg-basic-transparent-semi-default
     );
-    --db-adaptive-bg-basic-transparent-hovered: var(
-    	--db-neutral-bg-basic-transparent-hovered
+    --db-adaptive-bg-basic-transparent-full-hovered: var(
+    	--db-neutral-bg-basic-transparent-full-hovered
     );
-    --db-adaptive-bg-basic-transparent-pressed: var(
-    	--db-neutral-bg-basic-transparent-pressed
+    --db-adaptive-bg-basic-transparent-full-pressed: var(
+    	--db-neutral-bg-basic-transparent-full-pressed
+    );
+    --db-adaptive-bg-basic-transparent-semi-hovered: var(
+    	--db-neutral-bg-basic-transparent-semi-hovered
+    );
+    --db-adaptive-bg-basic-transparent-semi-pressed: var(
+    	--db-neutral-bg-basic-transparent-semi-pressed
     );
     --db-adaptive-on-bg-basic-emphasis-100-default: var(
     	--db-neutral-on-bg-basic-emphasis-100-default
@@ -215,11 +223,17 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     --db-adaptive-bg-basic-transparent-semi-default: var(
     	--db-critical-bg-basic-transparent-semi-default
     );
-    --db-adaptive-bg-basic-transparent-hovered: var(
-    	--db-critical-bg-basic-transparent-hovered
+    --db-adaptive-bg-basic-transparent-full-hovered: var(
+    	--db-critical-bg-basic-transparent-full-hovered
+    );
+    --db-adaptive-bg-basic-transparent-full-pressed: var(
+    	--db-critical-bg-basic-transparent-full-pressed
     );
-    --db-adaptive-bg-basic-transparent-pressed: var(
-    	--db-critical-bg-basic-transparent-pressed
+    --db-adaptive-bg-basic-transparent-semi-hovered: var(
+    	--db-critical-bg-basic-transparent-semi-hovered
+    );
+    --db-adaptive-bg-basic-transparent-semi-pressed: var(
+    	--db-critical-bg-basic-transparent-semi-pressed
     );
     --db-adaptive-on-bg-basic-emphasis-100-default: var(
     	--db-critical-on-bg-basic-emphasis-100-default
@@ -370,11 +384,17 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     --db-adaptive-bg-basic-transparent-semi-default: var(
     	--db-successful-bg-basic-transparent-semi-default
     );
-    --db-adaptive-bg-basic-transparent-hovered: var(
-    	--db-successful-bg-basic-transparent-hovered
+    --db-adaptive-bg-basic-transparent-full-hovered: var(
+    	--db-successful-bg-basic-transparent-full-hovered
+    );
+    --db-adaptive-bg-basic-transparent-full-pressed: var(
+    	--db-successful-bg-basic-transparent-full-pressed
+    );
+    --db-adaptive-bg-basic-transparent-semi-hovered: var(
+    	--db-successful-bg-basic-transparent-semi-hovered
     );
-    --db-adaptive-bg-basic-transparent-pressed: var(
-    	--db-successful-bg-basic-transparent-pressed
+    --db-adaptive-bg-basic-transparent-semi-pressed: var(
+    	--db-successful-bg-basic-transparent-semi-pressed
     );
     --db-adaptive-on-bg-basic-emphasis-100-default: var(
     	--db-successful-on-bg-basic-emphasis-100-default
@@ -511,7 +531,7 @@ 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-custom-select:not([data-hide-icon-after=true])::after {
+.db-custom-select:not([data-show-icon-trailing=false])::after {
   color: var(--db-icon-color, inherit);
   display: inline-block;
   /*** icon - placeholder ***/
@@ -528,23 +548,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-custom-select:not([data-hide-icon-after=true])::after {
+  .db-custom-select:not([data-show-icon-trailing=false])::after {
     content: var(--db-icon, attr(data-icon))/"";
   }
 }
 @media aural {
-  .db-custom-select:not([data-hide-icon-after=true])::after {
+  .db-custom-select:not([data-show-icon-trailing=false])::after {
     content: none;
   }
 }
 @media speech {
-  .db-custom-select:not([data-hide-icon-after=true])::after {
+  .db-custom-select:not([data-show-icon-trailing=false])::after {
     content: none;
   }
 }
@@ -669,14 +689,14 @@ input[type=radio]:checked) > label {
   border-radius: var(--db-border-radius-xs);
 }
 
-.db-custom-select:not([data-hide-icon-after=true])::after {
-  --db-icon-after: "chevron_down";
+.db-custom-select: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-custom-select:not([data-hide-icon-after=true])::after {
-    content: var(--db-icon-after, attr(data-icon-after))/"";
+  .db-custom-select:not([data-show-icon-trailing=false])::after {
+    content: var(--db-icon-trailing, attr(data-icon-trailing))/"";
   }
 }
 .db-custom-select::after {
@@ -697,7 +717,7 @@ input[type=radio]:checked) > label {
   display: none;
 }
 
-[data-icon].db-custom-select:not([data-hide-icon=true]) {
+[data-icon].db-custom-select:not([data-show-icon=false]) {
   --db-form-has-before: 1;
 }
 
@@ -792,7 +812,7 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
   /* stylelint-disable-next-line scss/selector-no-redundant-nesting-selector */
   /* custom elements workaround */
 }
-.db-custom-select[data-icon]:not([data-hide-icon=true]) {
+.db-custom-select[data-icon]:not([data-show-icon=false]) {
   --db-form-component-min-inline-size: var(--db-sizing-2xl);
 }
 .db-custom-select:not([data-width]),
@@ -1012,7 +1032,7 @@ input[type=radio]:checked) [id$=-placeholder] {
 }
 .db-custom-select summary:hover:not(:disabled, [aria-disabled=true]) {
   cursor: var(--db-overwrite-cursor, pointer);
-  background-color: var(--db-adaptive-bg-basic-transparent-hovered);
+  background-color: var(--db-adaptive-bg-basic-transparent-semi-hovered);
 }
 .db-custom-select summary:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-custom-select summary:hover:not(:disabled, [aria-disabled=true]):is(input) {
   cursor: initial;
@@ -1140,7 +1160,7 @@ summary[aria-disabled=true]) {
   background-color: color(from var(--db-adaptive-on-bg-basic-emphasis-100-default) srgb r g b/var(--db-opacity-lg));
   opacity: var(--db-opacity-lg);
 }
-@media screen and (max-width: 44.9375em) {
+@media screen and (max-width: 47.9375em) {
   .db-custom-select > details[open] > summary::before {
     position: fixed;
     z-index: 9998;

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

@@ -23,7 +23,7 @@
 
 	position: relative;
 
-	&[data-icon]:not([data-hide-icon="true"]) {
+	&[data-icon]:not([data-show-icon="false"]) {
 		--db-form-component-min-inline-size: #{variables.$db-sizing-2xl};
 	}
 

package/build/components/custom-select-dropdown/custom-select-dropdown.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, ... */
 .db-visually-hidden,
 [data-visually-hidden=true] {
@@ -64,11 +66,17 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     --db-adaptive-bg-basic-transparent-semi-default: var(
     	--db-neutral-bg-basic-transparent-semi-default
     );
-    --db-adaptive-bg-basic-transparent-hovered: var(
-    	--db-neutral-bg-basic-transparent-hovered
+    --db-adaptive-bg-basic-transparent-full-hovered: var(
+    	--db-neutral-bg-basic-transparent-full-hovered
     );
-    --db-adaptive-bg-basic-transparent-pressed: var(
-    	--db-neutral-bg-basic-transparent-pressed
+    --db-adaptive-bg-basic-transparent-full-pressed: var(
+    	--db-neutral-bg-basic-transparent-full-pressed
+    );
+    --db-adaptive-bg-basic-transparent-semi-hovered: var(
+    	--db-neutral-bg-basic-transparent-semi-hovered
+    );
+    --db-adaptive-bg-basic-transparent-semi-pressed: var(
+    	--db-neutral-bg-basic-transparent-semi-pressed
     );
     --db-adaptive-on-bg-basic-emphasis-100-default: var(
     	--db-neutral-on-bg-basic-emphasis-100-default
@@ -374,7 +382,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   block-size: fit-content;
   margin: auto;
 }
-@media screen and (max-width: 44.9375em) {
+@media screen and (max-width: 47.9375em) {
   .db-custom-select-dropdown {
     position: fixed;
     z-index: 9999;
@@ -474,7 +482,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
-@media screen and (min-width: 45em) {
+@media screen and (min-width: 48em) {
   .db-custom-select-dropdown > db-custom-select-list > div:not([class~=db-custom-select-list]):has(.db-button):not([data-force-mobile]), .db-custom-select-dropdown > db-custom-select-list > div:not([class~=db-custom-select-list]):has(.db-button)[data-force-mobile=false],
   .db-custom-select-dropdown > div:not([class~=db-custom-select-list]):has(.db-button):not([data-force-mobile]),
   .db-custom-select-dropdown > div:not([class~=db-custom-select-list]):has(.db-button)[data-force-mobile=false] {

package/build/components/custom-select-form-field/custom-select-form-field.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;

package/build/components/custom-select-list/custom-select-list.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-custom-select-list > legend, .db-visually-hidden,
 [data-visually-hidden=true] {
   clip: rect(0, 0, 0, 0) !important;

package/build/components/custom-select-list-item/custom-select-list-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 */
 /* Variants for adaptive components like input, select, notification, ... */
 .db-visually-hidden,
 [data-visually-hidden=true] {
@@ -185,7 +187,7 @@ db-custom-select-list-item:not(:last-of-type) .db-custom-select-list-item[data-d
 }
 .db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):hover:not(:disabled, [aria-disabled=true]) {
   cursor: var(--db-overwrite-cursor, pointer);
-  background-color: var(--db-adaptive-bg-basic-transparent-hovered);
+  background-color: var(--db-adaptive-bg-basic-transparent-full-hovered);
 }
 .db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):hover:not(:disabled, [aria-disabled=true]):is(input) {
   cursor: initial;
@@ -195,7 +197,7 @@ db-custom-select-list-item:not(:last-of-type) .db-custom-select-list-item[data-d
 }
 .db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):active:not(:disabled, [aria-disabled=true]) {
   cursor: var(--db-overwrite-cursor, pointer);
-  background-color: var(--db-adaptive-bg-basic-transparent-pressed);
+  background-color: var(--db-adaptive-bg-basic-transparent-full-pressed);
 }
 .db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):active:not(:disabled, [aria-disabled=true]):is(textarea), .db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):active:not(:disabled, [aria-disabled=true]):is(input) {
   cursor: initial;
@@ -237,16 +239,16 @@ db-custom-select-list-item:not(:last-of-type) .db-custom-select-list-item[data-d
   font-weight: 700;
 }
 .db-custom-select-list-item > label:has(input[type=radio]) {
-  --db-icon-after: "none";
+  --db-icon-trailing: "none";
   gap: 0;
 }
 .db-custom-select-list-item > label:has(input[type=radio]:checked) {
   --db-overwrite-cursor: default;
-  --db-icon-after: "check";
+  --db-icon-trailing: "check";
 }
 .db-custom-select-list-item > label > input {
-  --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);
+  --db-adaptive-bg-basic-transparent-full-hovered: var(--db-adaptive-bg-basic-transparent-full-default);
+  --db-adaptive-bg-basic-transparent-full-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 */
 }

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

@@ -25,11 +25,11 @@ db-custom-select-list-item:not(:last-of-type) {
 	&:has(> label) {
 		&:not(:has(input[type="radio"]:checked)) {
 			@include helpers.hover {
-				background-color: colors.$db-adaptive-bg-basic-transparent-hovered;
+				background-color: colors.$db-adaptive-bg-basic-transparent-full-hovered;
 			}
 
 			@include helpers.active {
-				background-color: colors.$db-adaptive-bg-basic-transparent-pressed;
+				background-color: colors.$db-adaptive-bg-basic-transparent-full-pressed;
 			}
 		}
 	}
@@ -59,20 +59,20 @@ db-custom-select-list-item:not(:last-of-type) {
 		}
 
 		&:has(input[type="radio"]) {
-			--db-icon-after: "none";
+			--db-icon-trailing: "none";
 
 			gap: 0;
 		}
 
 		&:has(input[type="radio"]:checked) {
 			--db-overwrite-cursor: default;
-			--db-icon-after: "check";
+			--db-icon-trailing: "check";
 		}
 
 		> 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};
+			--db-adaptive-bg-basic-transparent-full-hovered: #{colors.$db-adaptive-bg-basic-transparent-full-default};
+			--db-adaptive-bg-basic-transparent-full-pressed: #{colors.$db-adaptive-bg-basic-transparent-full-default};
 
 			&::after {
 				position: absolute;

package/build/components/divider/divider.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/drawer/drawer.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 {}