@db-ux/core-components 1.1.1 → 2.0.0-0-custom-select-16b8cce

package/README.md

@@ -92,7 +92,7 @@ In the case you want to include only some components, and you could do it like t
 
 ## Deutsche Bahn brand
 
-As we'd like to perfectly support our users and customers on their digital journey, the usage of Deutsche Bahn brand and trademarks are bound of clear guidelines and restrictions even when being used with the code that we're provide with this product; Deutsche Bahn fully reserves all rights regarding the Deutsche Bahn brand, even though that we're providing the code of DB UX Design System products free to use and release it under the Apache 2.0 license.
+As we'd like to perfectly support our users and customers on their digital journey, the usage of Deutsche Bahn brand and trademarks are bound of clear guidelines and restrictions even if being used with the code that we're providing with this product; Deutsche Bahn fully reserves all rights regarding the Deutsche Bahn brand, even though that we're providing the code of DB UX Design System products free to use and release it under the Apache 2.0 license.
 Please have a look at our brand portal at <https://marketingportal.extranet.deutschebahn.com/> for any further questions and whom to contact on any brand issues.
 
 For any usage outside of Deutsche Bahn websites and applications you aren't allowed to use any Deutsche Bahn brand and

package/build/assets/icons/LICENCES.json

@@ -95,6 +95,12 @@
 		"licence": "https://lucide.dev/license#lucide-license",
 		"origin": "x"
 	},
+	{
+		"name": "circular_arrows.svg",
+		"type": "lucide",
+		"licence": "https://lucide.dev/license#lucide-license",
+		"origin": "refresh-cw"
+	},
 	{
 		"name": "check.svg",
 		"type": "lucide",

package/build/assets/icons/circular_arrows.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-refresh-cw"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/></svg>

package/build/components/accordion/accordion.css

@@ -24,7 +24,7 @@ The spacings are not part of the styling of the accordion items themselves.
 .db-accordion:not([data-variant]) .db-accordion-item + .db-accordion-item {
   margin-block-start: calc(2 * var(--db-spacing-fixed-sm));
   --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
-  position: relative;
+  position: var(--db-tooltip-parent-position, relative);
 }
 .db-accordion[data-variant=divider] db-accordion-item + db-accordion-item .db-accordion-item[data-emphasis=strong],
 .db-accordion[data-variant=divider] .db-accordion-item + .db-accordion-item[data-emphasis=strong], .db-accordion:not([data-variant]) db-accordion-item + db-accordion-item .db-accordion-item[data-emphasis=strong],

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

@@ -99,6 +99,11 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     transform: translate(var(--db-popover-center-x, 0%), var(--db-popover-center-y, 0%));
   }
 }
+@keyframes rotate {
+  100% {
+    transform: rotate(1turn);
+  }
+}
 .db-accordion-item summary:not([data-hide-icon-after=true])::after {
   content: var(--db-icon, attr(data-icon));
   content: var(--db-icon, attr(data-icon))/"";
@@ -209,7 +214,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
 }
 .db-accordion-item summary:hover:not(:disabled, [aria-disabled=true]) {
-  cursor: pointer;
+  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) {
@@ -219,7 +224,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   cursor: pointer;
 }
 .db-accordion-item summary:active:not(:disabled, [aria-disabled=true]) {
-  cursor: pointer;
+  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) {

package/build/components/badge/badge.css

@@ -44,20 +44,20 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 }
 
 .db-badge {
-  border-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
-  background-color: var(--db-adaptive-bg-basic-level-1-default);
+  border-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
+  background-color: var(--db-adaptive-bg-basic-level-3-default);
   color: var(--db-adaptive-on-bg-basic-emphasis-80-default);
 }
 .db-badge::before, .db-badge::after {
   --db-icon-color: var(--db-adaptive-on-bg-basic-emphasis-80-default);
 }
 
-.db-badge[data-emphasis=strong] {
+.db-badge[data-emphasis=strong], .db-badge[data-emphasis=strong] .db-tab-remove-button {
   border-color: var(--db-adaptive-on-bg-basic-emphasis-80-default);
   background-color: var(--db-adaptive-bg-inverted-contrast-high-default);
   color: var(--db-adaptive-on-bg-inverted-default);
 }
-.db-badge[data-emphasis=strong]::before, .db-badge[data-emphasis=strong]::after {
+.db-badge[data-emphasis=strong]::before, .db-badge[data-emphasis=strong] .db-tab-remove-button::before, .db-badge[data-emphasis=strong]::after, .db-badge[data-emphasis=strong] .db-tab-remove-button::after {
   --db-icon-color: var(--db-adaptive-on-bg-inverted-default);
 }
 
@@ -70,6 +70,58 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-icon-color: var(--db-adaptive-on-origin-default);
 }
 
+.db-badge[data-emphasis=strong] .db-tab-remove-button {
+  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
+}
+.db-badge[data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]) {
+  cursor: var(--db-overwrite-cursor, pointer);
+  background-color: var(--db-adaptive-bg-inverted-contrast-high-hovered);
+}
+.db-badge[data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-badge[data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]):is(input) {
+  cursor: initial;
+}
+.db-badge[data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-badge[data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+  cursor: pointer;
+}
+.db-badge[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]) {
+  cursor: var(--db-overwrite-cursor, pointer);
+  background-color: var(--db-adaptive-bg-inverted-contrast-high-pressed);
+}
+.db-badge[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-badge[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]):is(input) {
+  cursor: initial;
+}
+.db-badge[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-badge[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+  cursor: pointer;
+}
+
+.db-badge[data-emphasis=strong] .db-tab-remove-button {
+  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
+}
+.db-badge[data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]) {
+  cursor: var(--db-overwrite-cursor, pointer);
+  background-color: var(--db-adaptive-bg-inverted-contrast-high-hovered);
+  /* stylelint-disable-next-line db-ux/use-border-color */
+  border-color: var(--db-adaptive-bg-inverted-contrast-high-hovered);
+}
+.db-badge[data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-badge[data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]):is(input) {
+  cursor: initial;
+}
+.db-badge[data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-badge[data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+  cursor: pointer;
+}
+.db-badge[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]) {
+  cursor: var(--db-overwrite-cursor, pointer);
+  background-color: var(--db-adaptive-bg-inverted-contrast-high-pressed);
+  /* stylelint-disable-next-line db-ux/use-border-color */
+  border-color: var(--db-adaptive-bg-inverted-contrast-high-pressed);
+}
+.db-badge[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-badge[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]):is(input) {
+  cursor: initial;
+}
+.db-badge[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-badge[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+  cursor: pointer;
+}
+
 .db-badge[data-placement^=corner] {
   position: absolute;
   transform: translate(var(--badge-transform-x), var(--badge-transform-y));

package/build/components/badge/badge.scss

@@ -47,7 +47,7 @@
 	@extend %db-overwrite-font-size-2xs;
 	@extend %default-button;
 
-	@include tag-components.get-tag-colors();
+	@include tag-components.get-tag-colors("badge");
 
 	border-radius: variables.$db-border-radius-full;
 	padding-inline: variables.$db-spacing-fixed-2xs;

package/build/components/button/button.css

@@ -58,7 +58,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
 }
 .db-button:hover:not(:disabled, [aria-disabled=true]) {
-  cursor: pointer;
+  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) {
@@ -68,7 +68,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   cursor: pointer;
 }
 .db-button:active:not(:disabled, [aria-disabled=true]) {
-  cursor: pointer;
+  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) {
@@ -111,7 +111,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
 }
 .db-button[data-variant=brand]:hover:not(:disabled, [aria-disabled=true]) {
-  cursor: pointer;
+  cursor: var(--db-overwrite-cursor, pointer);
   background-color: var(--db-brand-origin-hovered);
   border-color: var(--db-brand-on-bg-basic-emphasis-70-hovered);
 }
@@ -122,7 +122,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   cursor: pointer;
 }
 .db-button[data-variant=brand]:active:not(:disabled, [aria-disabled=true]) {
-  cursor: pointer;
+  cursor: var(--db-overwrite-cursor, pointer);
   background-color: var(--db-brand-origin-pressed);
   border-color: var(--db-brand-on-bg-basic-emphasis-70-pressed);
 }

package/build/components/card/card.css

@@ -42,7 +42,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   /* 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]) {
-  cursor: pointer;
+  cursor: var(--db-overwrite-cursor, pointer);
   background-color: var(--db-adaptive-bg-basic-level-1-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) {
@@ -52,7 +52,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   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]) {
-  cursor: pointer;
+  cursor: var(--db-overwrite-cursor, pointer);
   background-color: var(--db-adaptive-bg-basic-level-1-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) {
@@ -68,7 +68,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   /* 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: pointer;
+  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) {
@@ -78,7 +78,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   cursor: pointer;
 }
 .db-card[data-elevation-level="2"][data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]) {
-  cursor: pointer;
+  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) {
@@ -94,7 +94,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   /* 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: pointer;
+  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) {
@@ -104,7 +104,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   cursor: pointer;
 }
 .db-card[data-elevation-level="3"][data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]) {
-  cursor: pointer;
+  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) {

package/build/components/checkbox/checkbox.css

@@ -86,7 +86,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 .db-checkbox .db-infotext {
   margin-block-start: var(--db-spacing-fixed-2xs);
 }
-.db-checkbox .db-infotext[data-semantic] {
+.db-checkbox .db-infotext:is([data-semantic=successful], [data-semantic=critical]) {
   display: none;
 }
 
@@ -104,7 +104,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
 .db-checkbox:has(input:required):is(label)::after,
-.db-checkbox:has(input:required) label::after {
+.db-checkbox:has(input:required) > label::after, .db-checkbox[data-required=true]:is(label)::after,
+.db-checkbox[data-required=true] > label::after {
   content: "*";
   content: "*"/"";
   /* stylelint-disable-next-line db-ux/use-spacings */
@@ -144,7 +145,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-icon-color: var(--db-successful-on-bg-inverted-default);
 }
 .db-checkbox:has(input:not([data-custom-validity]):required:user-valid) input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]) {
-  cursor: pointer;
+  cursor: var(--db-overwrite-cursor, pointer);
   background-color: var(--db-successful-bg-inverted-contrast-high-hovered);
 }
 .db-checkbox:has(input:not([data-custom-validity]):required:user-valid) input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-checkbox:has(input:not([data-custom-validity]):required:user-valid) input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input) {
@@ -154,7 +155,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   cursor: pointer;
 }
 .db-checkbox:has(input:not([data-custom-validity]):required:user-valid) input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]) {
-  cursor: pointer;
+  cursor: var(--db-overwrite-cursor, pointer);
   background-color: var(--db-successful-bg-inverted-contrast-high-pressed);
 }
 .db-checkbox:has(input:not([data-custom-validity]):required:user-valid) input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-checkbox:has(input:not([data-custom-validity]):required:user-valid) input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input) {
@@ -164,19 +165,19 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   cursor: pointer;
 }
 .db-checkbox:has(input:not([data-custom-validity]):required:user-valid):is(label),
-.db-checkbox:has(input:not([data-custom-validity]):required:user-valid) label {
+.db-checkbox:has(input:not([data-custom-validity]):required:user-valid) > label {
   color: var(--db-successful-on-bg-basic-emphasis-80-default);
 }
-.db-checkbox:has(input[data-custom-validity=valid]) .db-infotext {
+.db-checkbox:has(input[data-custom-validity=valid]) .db-infotext, .db-checkbox[data-custom-validity=valid] .db-infotext {
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
-.db-checkbox:has(input[data-custom-validity=valid]) .db-infotext[data-semantic=successful] {
+.db-checkbox:has(input[data-custom-validity=valid]) .db-infotext[data-semantic=successful], .db-checkbox[data-custom-validity=valid] .db-infotext[data-semantic=successful] {
   display: flex;
 }
-.db-checkbox:has(input[data-custom-validity=valid]) .db-infotext:not([data-semantic]) {
+.db-checkbox:has(input[data-custom-validity=valid]) .db-infotext:not([data-semantic]), .db-checkbox[data-custom-validity=valid] .db-infotext:not([data-semantic]) {
   display: none;
 }
-.db-checkbox:has(input[data-custom-validity=valid]) input {
+.db-checkbox:has(input[data-custom-validity=valid]) input, .db-checkbox[data-custom-validity=valid] input {
   --db-adaptive-bg-basic-transparent-semi: var(
   	--db-successful-bg-basic-transparent-semi-default
   );
@@ -187,41 +188,42 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   	--db-successful-bg-basic-transparent-pressed
   );
 }
-.db-checkbox:has(input[data-custom-validity=valid]) input:not(:checked), .db-checkbox:has(input[data-custom-validity=valid]) input:is([type=radio]) {
+.db-checkbox:has(input[data-custom-validity=valid]) input:not(:checked), .db-checkbox:has(input[data-custom-validity=valid]) input:is([type=radio]), .db-checkbox[data-custom-validity=valid] input:not(:checked), .db-checkbox[data-custom-validity=valid] input:is([type=radio]) {
   --db-check-element-border-color: var(
   	--db-successful-on-bg-basic-emphasis-70-default
   );
 }
-.db-checkbox:has(input[data-custom-validity=valid]) input:not([type=radio]):checked {
+.db-checkbox:has(input[data-custom-validity=valid]) input:not([type=radio]):checked, .db-checkbox[data-custom-validity=valid] input:not([type=radio]):checked {
   background-color: var(--db-successful-bg-inverted-contrast-high-default);
   color: var(--db-successful-on-bg-inverted-default);
   /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
 }
-.db-checkbox:has(input[data-custom-validity=valid]) input:not([type=radio]):checked::before, .db-checkbox:has(input[data-custom-validity=valid]) input:not([type=radio]):checked::after {
+.db-checkbox:has(input[data-custom-validity=valid]) input:not([type=radio]):checked::before, .db-checkbox:has(input[data-custom-validity=valid]) input:not([type=radio]):checked::after, .db-checkbox[data-custom-validity=valid] input:not([type=radio]):checked::before, .db-checkbox[data-custom-validity=valid] input:not([type=radio]):checked::after {
   --db-icon-color: var(--db-successful-on-bg-inverted-default);
 }
-.db-checkbox:has(input[data-custom-validity=valid]) input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]) {
-  cursor: pointer;
+.db-checkbox:has(input[data-custom-validity=valid]) input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]), .db-checkbox[data-custom-validity=valid] input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]) {
+  cursor: var(--db-overwrite-cursor, pointer);
   background-color: var(--db-successful-bg-inverted-contrast-high-hovered);
 }
-.db-checkbox:has(input[data-custom-validity=valid]) input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-checkbox:has(input[data-custom-validity=valid]) input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input) {
+.db-checkbox:has(input[data-custom-validity=valid]) input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-checkbox:has(input[data-custom-validity=valid]) input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input), .db-checkbox[data-custom-validity=valid] input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-checkbox[data-custom-validity=valid] input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input) {
   cursor: initial;
 }
-.db-checkbox:has(input[data-custom-validity=valid]) input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-checkbox:has(input[data-custom-validity=valid]) input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-checkbox:has(input[data-custom-validity=valid]) input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-checkbox:has(input[data-custom-validity=valid]) input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-checkbox[data-custom-validity=valid] input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-checkbox[data-custom-validity=valid] input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
-.db-checkbox:has(input[data-custom-validity=valid]) input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]) {
-  cursor: pointer;
+.db-checkbox:has(input[data-custom-validity=valid]) input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]), .db-checkbox[data-custom-validity=valid] input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]) {
+  cursor: var(--db-overwrite-cursor, pointer);
   background-color: var(--db-successful-bg-inverted-contrast-high-pressed);
 }
-.db-checkbox:has(input[data-custom-validity=valid]) input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-checkbox:has(input[data-custom-validity=valid]) input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input) {
+.db-checkbox:has(input[data-custom-validity=valid]) input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-checkbox:has(input[data-custom-validity=valid]) input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input), .db-checkbox[data-custom-validity=valid] input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-checkbox[data-custom-validity=valid] input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input) {
   cursor: initial;
 }
-.db-checkbox:has(input[data-custom-validity=valid]) input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-checkbox:has(input[data-custom-validity=valid]) input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-checkbox:has(input[data-custom-validity=valid]) input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-checkbox:has(input[data-custom-validity=valid]) input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-checkbox[data-custom-validity=valid] input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-checkbox[data-custom-validity=valid] input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
 .db-checkbox:has(input[data-custom-validity=valid]):is(label),
-.db-checkbox:has(input[data-custom-validity=valid]) label {
+.db-checkbox:has(input[data-custom-validity=valid]) > label, .db-checkbox[data-custom-validity=valid]:is(label),
+.db-checkbox[data-custom-validity=valid] > label {
   color: var(--db-successful-on-bg-basic-emphasis-80-default);
 }
 .db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) .db-infotext[data-semantic=critical] {
@@ -255,7 +257,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-icon-color: var(--db-successful-on-bg-inverted-default);
 }
 .db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]) {
-  cursor: pointer;
+  cursor: var(--db-overwrite-cursor, pointer);
   background-color: var(--db-successful-bg-inverted-contrast-high-hovered);
 }
 .db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input) {
@@ -265,7 +267,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   cursor: pointer;
 }
 .db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]) {
-  cursor: pointer;
+  cursor: var(--db-overwrite-cursor, pointer);
   background-color: var(--db-successful-bg-inverted-contrast-high-pressed);
 }
 .db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input) {
@@ -275,16 +277,16 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   cursor: pointer;
 }
 .db-checkbox:has(input:not([data-custom-validity]):required:user-invalid):is(label),
-.db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) label {
+.db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) > label {
   color: var(--db-critical-on-bg-basic-emphasis-80-default);
 }
-.db-checkbox:has(input[data-custom-validity=invalid]) .db-infotext[data-semantic=critical] {
+.db-checkbox:has(input[data-custom-validity=invalid]) .db-infotext[data-semantic=critical], .db-checkbox[data-custom-validity=invalid] .db-infotext[data-semantic=critical] {
   display: flex;
 }
-.db-checkbox:has(input[data-custom-validity=invalid]) .db-infotext:not([data-semantic]) {
+.db-checkbox:has(input[data-custom-validity=invalid]) .db-infotext:not([data-semantic]), .db-checkbox[data-custom-validity=invalid] .db-infotext:not([data-semantic]) {
   display: none;
 }
-.db-checkbox:has(input[data-custom-validity=invalid]) input {
+.db-checkbox:has(input[data-custom-validity=invalid]) input, .db-checkbox[data-custom-validity=invalid] input {
   --db-adaptive-bg-basic-transparent-semi: var(
   	--db-critical-bg-basic-transparent-semi-default
   );
@@ -295,83 +297,84 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   	--db-critical-bg-basic-transparent-pressed
   );
 }
-.db-checkbox:has(input[data-custom-validity=invalid]) input:not(:checked), .db-checkbox:has(input[data-custom-validity=invalid]) input:is([type=radio]) {
+.db-checkbox:has(input[data-custom-validity=invalid]) input:not(:checked), .db-checkbox:has(input[data-custom-validity=invalid]) input:is([type=radio]), .db-checkbox[data-custom-validity=invalid] input:not(:checked), .db-checkbox[data-custom-validity=invalid] input:is([type=radio]) {
   --db-check-element-border-color: var(
   	--db-critical-on-bg-basic-emphasis-70-default
   );
 }
-.db-checkbox:has(input[data-custom-validity=invalid]) input:not([type=radio]):checked {
+.db-checkbox:has(input[data-custom-validity=invalid]) input:not([type=radio]):checked, .db-checkbox[data-custom-validity=invalid] input:not([type=radio]):checked {
   background-color: var(--db-successful-bg-inverted-contrast-high-default);
   color: var(--db-successful-on-bg-inverted-default);
   /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
 }
-.db-checkbox:has(input[data-custom-validity=invalid]) input:not([type=radio]):checked::before, .db-checkbox:has(input[data-custom-validity=invalid]) input:not([type=radio]):checked::after {
+.db-checkbox:has(input[data-custom-validity=invalid]) input:not([type=radio]):checked::before, .db-checkbox:has(input[data-custom-validity=invalid]) input:not([type=radio]):checked::after, .db-checkbox[data-custom-validity=invalid] input:not([type=radio]):checked::before, .db-checkbox[data-custom-validity=invalid] input:not([type=radio]):checked::after {
   --db-icon-color: var(--db-successful-on-bg-inverted-default);
 }
-.db-checkbox:has(input[data-custom-validity=invalid]) input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]) {
-  cursor: pointer;
+.db-checkbox:has(input[data-custom-validity=invalid]) input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]), .db-checkbox[data-custom-validity=invalid] input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]) {
+  cursor: var(--db-overwrite-cursor, pointer);
   background-color: var(--db-successful-bg-inverted-contrast-high-hovered);
 }
-.db-checkbox:has(input[data-custom-validity=invalid]) input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-checkbox:has(input[data-custom-validity=invalid]) input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input) {
+.db-checkbox:has(input[data-custom-validity=invalid]) input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-checkbox:has(input[data-custom-validity=invalid]) input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input), .db-checkbox[data-custom-validity=invalid] input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-checkbox[data-custom-validity=invalid] input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input) {
   cursor: initial;
 }
-.db-checkbox:has(input[data-custom-validity=invalid]) input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-checkbox:has(input[data-custom-validity=invalid]) input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-checkbox:has(input[data-custom-validity=invalid]) input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-checkbox:has(input[data-custom-validity=invalid]) input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-checkbox[data-custom-validity=invalid] input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-checkbox[data-custom-validity=invalid] input:not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
-.db-checkbox:has(input[data-custom-validity=invalid]) input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]) {
-  cursor: pointer;
+.db-checkbox:has(input[data-custom-validity=invalid]) input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]), .db-checkbox[data-custom-validity=invalid] input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]) {
+  cursor: var(--db-overwrite-cursor, pointer);
   background-color: var(--db-successful-bg-inverted-contrast-high-pressed);
 }
-.db-checkbox:has(input[data-custom-validity=invalid]) input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-checkbox:has(input[data-custom-validity=invalid]) input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input) {
+.db-checkbox:has(input[data-custom-validity=invalid]) input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-checkbox:has(input[data-custom-validity=invalid]) input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input), .db-checkbox[data-custom-validity=invalid] input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-checkbox[data-custom-validity=invalid] input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input) {
   cursor: initial;
 }
-.db-checkbox:has(input[data-custom-validity=invalid]) input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-checkbox:has(input[data-custom-validity=invalid]) input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-checkbox:has(input[data-custom-validity=invalid]) input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-checkbox:has(input[data-custom-validity=invalid]) input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-checkbox[data-custom-validity=invalid] input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-checkbox[data-custom-validity=invalid] input:not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
 .db-checkbox:has(input[data-custom-validity=invalid]):is(label),
-.db-checkbox:has(input[data-custom-validity=invalid]) label {
+.db-checkbox:has(input[data-custom-validity=invalid]) > label, .db-checkbox[data-custom-validity=invalid]:is(label),
+.db-checkbox[data-custom-validity=invalid] > label {
   color: var(--db-critical-on-bg-basic-emphasis-80-default);
 }
 .db-checkbox:has(input:disabled) {
   opacity: 0.4;
 }
 .db-checkbox:is(label),
-.db-checkbox label {
+.db-checkbox > label {
   display: flex;
   align-items: flex-start;
   position: relative;
   gap: var(--db-spacing-fixed-xs);
 }
 .db-checkbox:is(label):not(:has(input:disabled)),
-.db-checkbox label:not(:has(input:disabled)) {
+.db-checkbox > label:not(:has(input:disabled)) {
   /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
 }
 .db-checkbox:is(label):not(:has(input:disabled)):hover:not(:disabled, [aria-disabled=true]),
-.db-checkbox label:not(:has(input:disabled)):hover:not(:disabled, [aria-disabled=true]) {
-  cursor: pointer;
+.db-checkbox > label:not(:has(input:disabled)):hover:not(:disabled, [aria-disabled=true]) {
+  cursor: var(--db-overwrite-cursor, pointer);
 }
 .db-checkbox:is(label):not(:has(input:disabled)):hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-checkbox:is(label):not(:has(input:disabled)):hover:not(:disabled, [aria-disabled=true]):is(input),
-.db-checkbox label:not(:has(input:disabled)):hover:not(:disabled, [aria-disabled=true]):is(textarea),
-.db-checkbox label:not(:has(input:disabled)):hover:not(:disabled, [aria-disabled=true]):is(input) {
+.db-checkbox > label:not(:has(input:disabled)):hover:not(:disabled, [aria-disabled=true]):is(textarea),
+.db-checkbox > label:not(:has(input:disabled)):hover:not(:disabled, [aria-disabled=true]):is(input) {
   cursor: initial;
 }
 .db-checkbox:is(label):not(:has(input:disabled)):hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-checkbox:is(label):not(:has(input:disabled)):hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)),
-.db-checkbox label:not(:has(input:disabled)):hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]),
-.db-checkbox label:not(:has(input:disabled)):hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-checkbox > label:not(:has(input:disabled)):hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]),
+.db-checkbox > label:not(:has(input:disabled)):hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
 .db-checkbox:is(label):not(:has(input:disabled)):active:not(:disabled, [aria-disabled=true]),
-.db-checkbox label:not(:has(input:disabled)):active:not(:disabled, [aria-disabled=true]) {
-  cursor: pointer;
+.db-checkbox > label:not(:has(input:disabled)):active:not(:disabled, [aria-disabled=true]) {
+  cursor: var(--db-overwrite-cursor, pointer);
 }
 .db-checkbox:is(label):not(:has(input:disabled)):active:not(:disabled, [aria-disabled=true]):is(textarea), .db-checkbox:is(label):not(:has(input:disabled)):active:not(:disabled, [aria-disabled=true]):is(input),
-.db-checkbox label:not(:has(input:disabled)):active:not(:disabled, [aria-disabled=true]):is(textarea),
-.db-checkbox label:not(:has(input:disabled)):active:not(:disabled, [aria-disabled=true]):is(input) {
+.db-checkbox > label:not(:has(input:disabled)):active:not(:disabled, [aria-disabled=true]):is(textarea),
+.db-checkbox > label:not(:has(input:disabled)):active:not(:disabled, [aria-disabled=true]):is(input) {
   cursor: initial;
 }
 .db-checkbox:is(label):not(:has(input:disabled)):active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-checkbox:is(label):not(:has(input:disabled)):active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)),
-.db-checkbox label:not(:has(input:disabled)):active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]),
-.db-checkbox label:not(:has(input:disabled)):active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-checkbox > label:not(:has(input:disabled)):active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]),
+.db-checkbox > label:not(:has(input:disabled)):active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
 .db-checkbox input {
@@ -387,7 +390,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
 }
 .db-checkbox input:hover:not(:disabled, [aria-disabled=true]) {
-  cursor: pointer;
+  cursor: var(--db-overwrite-cursor, pointer);
   background-color: var(--db-adaptive-bg-basic-transparent-hovered);
 }
 .db-checkbox input:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-checkbox input:hover:not(:disabled, [aria-disabled=true]):is(input) {
@@ -397,7 +400,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   cursor: pointer;
 }
 .db-checkbox input:active:not(:disabled, [aria-disabled=true]) {
-  cursor: pointer;
+  cursor: var(--db-overwrite-cursor, pointer);
   background-color: var(--db-adaptive-bg-basic-transparent-pressed);
 }
 .db-checkbox input:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-checkbox input:active:not(:disabled, [aria-disabled=true]):is(input) {
@@ -436,7 +439,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-icon-color: var(--db-adaptive-on-bg-inverted-default);
 }
 .db-checkbox input:checked:hover:not(:disabled, [aria-disabled=true]) {
-  cursor: pointer;
+  cursor: var(--db-overwrite-cursor, pointer);
   background-color: var(--db-adaptive-bg-inverted-contrast-max-hovered);
 }
 .db-checkbox input:checked:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-checkbox input:checked:hover:not(:disabled, [aria-disabled=true]):is(input) {
@@ -446,7 +449,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   cursor: pointer;
 }
 .db-checkbox input:checked:active:not(:disabled, [aria-disabled=true]) {
-  cursor: pointer;
+  cursor: var(--db-overwrite-cursor, pointer);
   background-color: var(--db-adaptive-bg-inverted-contrast-max-pressed);
 }
 .db-checkbox input:checked:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-checkbox input:checked:active:not(:disabled, [aria-disabled=true]):is(input) {