@db-ux/core-components 2.0.6 → 2.0.7

package/build/components/switch/switch.css

@@ -483,18 +483,16 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
  * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
  */
 /* stylelint-disable-next-line db-ux/use-spacings */
-.db-switch:active:not(:disabled, [aria-disabled=true]) > input::before {
+.db-switch:not(:has(input:disabled)):has(input:active, > label:active, :is(label):active) input::before {
   inline-size: calc(calc(var(--db-icon-font-size)) - 0.125rem * 2 + var(--db-spacing-fixed-2xs));
   margin: 0;
 }
-.db-switch:active:not(:disabled, [aria-disabled=true]) > input:checked::before {
+.db-switch:not(:has(input:disabled)):has(input:active, > label:active, :is(label):active) input:checked::before {
   block-size: calc(var(--db-icon-font-size) - 0.125rem * 2);
 }
 
 .db-switch {
   user-select: none;
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-  /* stylelint-disable-next-line at-rule-empty-line-before */
 }
 .db-switch:has(input:required):is(label)::after,
 .db-switch:has(input:required) > label::after, .db-switch[data-required=true]:is(label)::after,
@@ -510,230 +508,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     content: "*"/"";
   }
 }
-.db-switch:has(input:not([data-custom-validity]):required:user-valid) .db-infotext {
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-}
-.db-switch:has(input:not([data-custom-validity]):required:user-valid) .db-infotext[data-semantic=successful] {
-  display: flex;
-}
-.db-switch:has(input:not([data-custom-validity]):required:user-valid) .db-infotext:not([data-semantic]) {
-  display: none;
-}
-.db-switch:has(input:not([data-custom-validity]):required:user-valid) input:not([role=switch]) {
-  --db-adaptive-bg-basic-transparent-semi: 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-pressed: var(
-  	--db-successful-bg-basic-transparent-pressed
-  );
-}
-.db-switch:has(input:not([data-custom-validity]):required:user-valid) input:not([role=switch]):not(:checked), .db-switch:has(input:not([data-custom-validity]):required:user-valid) input:not([role=switch]):is([type=radio]) {
-  --db-check-element-border-color: var(
-  	--db-successful-on-bg-basic-emphasis-70-default
-  );
-}
-.db-switch:has(input:not([data-custom-validity]):required:user-valid) input:not([role=switch]):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-switch:has(input:not([data-custom-validity]):required:user-valid) input:not([role=switch]):not([type=radio]):checked::before, .db-switch:has(input:not([data-custom-validity]):required:user-valid) input:not([role=switch]):not([type=radio]):checked::after {
-  --db-icon-color: var(--db-successful-on-bg-inverted-default);
-}
-.db-switch:has(input:not([data-custom-validity]):required:user-valid) input:not([role=switch]):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-switch:has(input:not([data-custom-validity]):required:user-valid) input:not([role=switch]):not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-switch:has(input:not([data-custom-validity]):required:user-valid) input:not([role=switch]):not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input) {
-  cursor: initial;
-}
-.db-switch:has(input:not([data-custom-validity]):required:user-valid) input:not([role=switch]):not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-switch:has(input:not([data-custom-validity]):required:user-valid) input:not([role=switch]):not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
-  cursor: pointer;
-}
-.db-switch:has(input:not([data-custom-validity]):required:user-valid) input:not([role=switch]):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-switch:has(input:not([data-custom-validity]):required:user-valid) input:not([role=switch]):not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-switch:has(input:not([data-custom-validity]):required:user-valid) input:not([role=switch]):not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input) {
-  cursor: initial;
-}
-.db-switch:has(input:not([data-custom-validity]):required:user-valid) input:not([role=switch]):not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-switch:has(input:not([data-custom-validity]):required:user-valid) input:not([role=switch]):not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
-  cursor: pointer;
-}
-.db-switch:has(input:not([data-custom-validity]):required:user-valid):has(input:not([role=switch])):is(label),
-.db-switch:has(input:not([data-custom-validity]):required:user-valid):has(input:not([role=switch])) > label {
-  color: var(--db-successful-on-bg-basic-emphasis-80-default);
-}
-.db-switch:has(input[data-custom-validity=valid]) .db-infotext, .db-switch[data-custom-validity=valid] .db-infotext {
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-}
-.db-switch:has(input[data-custom-validity=valid]) .db-infotext[data-semantic=successful], .db-switch[data-custom-validity=valid] .db-infotext[data-semantic=successful] {
-  display: flex;
-}
-.db-switch:has(input[data-custom-validity=valid]) .db-infotext:not([data-semantic]), .db-switch[data-custom-validity=valid] .db-infotext:not([data-semantic]) {
-  display: none;
-}
-.db-switch:has(input[data-custom-validity=valid]) input:not([role=switch]), .db-switch[data-custom-validity=valid] input:not([role=switch]) {
-  --db-adaptive-bg-basic-transparent-semi: 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-pressed: var(
-  	--db-successful-bg-basic-transparent-pressed
-  );
-}
-.db-switch:has(input[data-custom-validity=valid]) input:not([role=switch]):not(:checked), .db-switch:has(input[data-custom-validity=valid]) input:not([role=switch]):is([type=radio]), .db-switch[data-custom-validity=valid] input:not([role=switch]):not(:checked), .db-switch[data-custom-validity=valid] input:not([role=switch]):is([type=radio]) {
-  --db-check-element-border-color: var(
-  	--db-successful-on-bg-basic-emphasis-70-default
-  );
-}
-.db-switch:has(input[data-custom-validity=valid]) input:not([role=switch]):not([type=radio]):checked, .db-switch[data-custom-validity=valid] input:not([role=switch]):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-switch:has(input[data-custom-validity=valid]) input:not([role=switch]):not([type=radio]):checked::before, .db-switch:has(input[data-custom-validity=valid]) input:not([role=switch]):not([type=radio]):checked::after, .db-switch[data-custom-validity=valid] input:not([role=switch]):not([type=radio]):checked::before, .db-switch[data-custom-validity=valid] input:not([role=switch]):not([type=radio]):checked::after {
-  --db-icon-color: var(--db-successful-on-bg-inverted-default);
-}
-.db-switch:has(input[data-custom-validity=valid]) input:not([role=switch]):not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]), .db-switch[data-custom-validity=valid] input:not([role=switch]):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-switch:has(input[data-custom-validity=valid]) input:not([role=switch]):not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-switch:has(input[data-custom-validity=valid]) input:not([role=switch]):not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input), .db-switch[data-custom-validity=valid] input:not([role=switch]):not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-switch[data-custom-validity=valid] input:not([role=switch]):not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input) {
-  cursor: initial;
-}
-.db-switch:has(input[data-custom-validity=valid]) input:not([role=switch]):not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-switch:has(input[data-custom-validity=valid]) input:not([role=switch]):not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-switch[data-custom-validity=valid] input:not([role=switch]):not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-switch[data-custom-validity=valid] input:not([role=switch]):not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
-  cursor: pointer;
-}
-.db-switch:has(input[data-custom-validity=valid]) input:not([role=switch]):not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]), .db-switch[data-custom-validity=valid] input:not([role=switch]):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-switch:has(input[data-custom-validity=valid]) input:not([role=switch]):not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-switch:has(input[data-custom-validity=valid]) input:not([role=switch]):not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input), .db-switch[data-custom-validity=valid] input:not([role=switch]):not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-switch[data-custom-validity=valid] input:not([role=switch]):not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input) {
-  cursor: initial;
-}
-.db-switch:has(input[data-custom-validity=valid]) input:not([role=switch]):not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-switch:has(input[data-custom-validity=valid]) input:not([role=switch]):not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-switch[data-custom-validity=valid] input:not([role=switch]):not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-switch[data-custom-validity=valid] input:not([role=switch]):not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
-  cursor: pointer;
-}
-.db-switch:has(input[data-custom-validity=valid]):has(input:not([role=switch])):is(label),
-.db-switch:has(input[data-custom-validity=valid]):has(input:not([role=switch])) > label, .db-switch[data-custom-validity=valid]:has(input:not([role=switch])):is(label),
-.db-switch[data-custom-validity=valid]:has(input:not([role=switch])) > label {
-  color: var(--db-successful-on-bg-basic-emphasis-80-default);
-}
-.db-switch:has(input:not([data-custom-validity]):required:user-invalid) .db-infotext[data-semantic=critical] {
-  display: flex;
-}
-.db-switch:has(input:not([data-custom-validity]):required:user-invalid) .db-infotext:not([data-semantic]) {
-  display: none;
-}
-.db-switch:has(input:not([data-custom-validity]):required:user-invalid) input:not([role=switch]) {
-  --db-adaptive-bg-basic-transparent-semi: 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-pressed: var(
-  	--db-critical-bg-basic-transparent-pressed
-  );
-}
-.db-switch:has(input:not([data-custom-validity]):required:user-invalid) input:not([role=switch]):not(:checked), .db-switch:has(input:not([data-custom-validity]):required:user-invalid) input:not([role=switch]):is([type=radio]) {
-  --db-check-element-border-color: var(
-  	--db-critical-on-bg-basic-emphasis-70-default
-  );
-}
-.db-switch:has(input:not([data-custom-validity]):required:user-invalid) input:not([role=switch]):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-switch:has(input:not([data-custom-validity]):required:user-invalid) input:not([role=switch]):not([type=radio]):checked::before, .db-switch:has(input:not([data-custom-validity]):required:user-invalid) input:not([role=switch]):not([type=radio]):checked::after {
-  --db-icon-color: var(--db-successful-on-bg-inverted-default);
-}
-.db-switch:has(input:not([data-custom-validity]):required:user-invalid) input:not([role=switch]):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-switch:has(input:not([data-custom-validity]):required:user-invalid) input:not([role=switch]):not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-switch:has(input:not([data-custom-validity]):required:user-invalid) input:not([role=switch]):not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input) {
-  cursor: initial;
-}
-.db-switch:has(input:not([data-custom-validity]):required:user-invalid) input:not([role=switch]):not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-switch:has(input:not([data-custom-validity]):required:user-invalid) input:not([role=switch]):not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
-  cursor: pointer;
-}
-.db-switch:has(input:not([data-custom-validity]):required:user-invalid) input:not([role=switch]):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-switch:has(input:not([data-custom-validity]):required:user-invalid) input:not([role=switch]):not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-switch:has(input:not([data-custom-validity]):required:user-invalid) input:not([role=switch]):not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input) {
-  cursor: initial;
-}
-.db-switch:has(input:not([data-custom-validity]):required:user-invalid) input:not([role=switch]):not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-switch:has(input:not([data-custom-validity]):required:user-invalid) input:not([role=switch]):not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
-  cursor: pointer;
-}
-.db-switch:has(input:not([data-custom-validity]):required:user-invalid):has(input:not([role=switch])):is(label),
-.db-switch:has(input:not([data-custom-validity]):required:user-invalid):has(input:not([role=switch])) > label {
-  color: var(--db-critical-on-bg-basic-emphasis-80-default);
-}
-.db-switch:has(input[data-custom-validity=invalid]) .db-infotext[data-semantic=critical], .db-switch[data-custom-validity=invalid] .db-infotext[data-semantic=critical] {
-  display: flex;
-}
-.db-switch:has(input[data-custom-validity=invalid]) .db-infotext:not([data-semantic]), .db-switch[data-custom-validity=invalid] .db-infotext:not([data-semantic]) {
-  display: none;
-}
-.db-switch:has(input[data-custom-validity=invalid]) input:not([role=switch]), .db-switch[data-custom-validity=invalid] input:not([role=switch]) {
-  --db-adaptive-bg-basic-transparent-semi: 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-pressed: var(
-  	--db-critical-bg-basic-transparent-pressed
-  );
-}
-.db-switch:has(input[data-custom-validity=invalid]) input:not([role=switch]):not(:checked), .db-switch:has(input[data-custom-validity=invalid]) input:not([role=switch]):is([type=radio]), .db-switch[data-custom-validity=invalid] input:not([role=switch]):not(:checked), .db-switch[data-custom-validity=invalid] input:not([role=switch]):is([type=radio]) {
-  --db-check-element-border-color: var(
-  	--db-critical-on-bg-basic-emphasis-70-default
-  );
-}
-.db-switch:has(input[data-custom-validity=invalid]) input:not([role=switch]):not([type=radio]):checked, .db-switch[data-custom-validity=invalid] input:not([role=switch]):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-switch:has(input[data-custom-validity=invalid]) input:not([role=switch]):not([type=radio]):checked::before, .db-switch:has(input[data-custom-validity=invalid]) input:not([role=switch]):not([type=radio]):checked::after, .db-switch[data-custom-validity=invalid] input:not([role=switch]):not([type=radio]):checked::before, .db-switch[data-custom-validity=invalid] input:not([role=switch]):not([type=radio]):checked::after {
-  --db-icon-color: var(--db-successful-on-bg-inverted-default);
-}
-.db-switch:has(input[data-custom-validity=invalid]) input:not([role=switch]):not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]), .db-switch[data-custom-validity=invalid] input:not([role=switch]):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-switch:has(input[data-custom-validity=invalid]) input:not([role=switch]):not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-switch:has(input[data-custom-validity=invalid]) input:not([role=switch]):not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input), .db-switch[data-custom-validity=invalid] input:not([role=switch]):not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-switch[data-custom-validity=invalid] input:not([role=switch]):not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input) {
-  cursor: initial;
-}
-.db-switch:has(input[data-custom-validity=invalid]) input:not([role=switch]):not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-switch:has(input[data-custom-validity=invalid]) input:not([role=switch]):not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-switch[data-custom-validity=invalid] input:not([role=switch]):not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-switch[data-custom-validity=invalid] input:not([role=switch]):not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
-  cursor: pointer;
-}
-.db-switch:has(input[data-custom-validity=invalid]) input:not([role=switch]):not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]), .db-switch[data-custom-validity=invalid] input:not([role=switch]):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-switch:has(input[data-custom-validity=invalid]) input:not([role=switch]):not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-switch:has(input[data-custom-validity=invalid]) input:not([role=switch]):not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input), .db-switch[data-custom-validity=invalid] input:not([role=switch]):not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-switch[data-custom-validity=invalid] input:not([role=switch]):not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input) {
-  cursor: initial;
-}
-.db-switch:has(input[data-custom-validity=invalid]) input:not([role=switch]):not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-switch:has(input[data-custom-validity=invalid]) input:not([role=switch]):not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-switch[data-custom-validity=invalid] input:not([role=switch]):not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-switch[data-custom-validity=invalid] input:not([role=switch]):not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
-  cursor: pointer;
-}
-.db-switch:has(input[data-custom-validity=invalid]):has(input:not([role=switch])):is(label),
-.db-switch:has(input[data-custom-validity=invalid]):has(input:not([role=switch])) > label, .db-switch[data-custom-validity=invalid]:has(input:not([role=switch])):is(label),
-.db-switch[data-custom-validity=invalid]:has(input:not([role=switch])) > label {
-  color: var(--db-critical-on-bg-basic-emphasis-80-default);
-}
 .db-switch:has(input:disabled) {
   opacity: 0.4;
 }
@@ -743,38 +517,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   align-items: flex-start;
   position: relative;
   gap: var(--db-spacing-fixed-xs);
-}
-.db-switch:is(label):not(:has(input:disabled)),
-.db-switch > label:not(:has(input:disabled)) {
-  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
-}
-.db-switch:is(label):not(:has(input:disabled)):hover:not(:disabled, [aria-disabled=true]),
-.db-switch > label:not(:has(input:disabled)):hover:not(:disabled, [aria-disabled=true]) {
-  cursor: var(--db-overwrite-cursor, pointer);
-}
-.db-switch:is(label):not(:has(input:disabled)):hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-switch:is(label):not(:has(input:disabled)):hover:not(:disabled, [aria-disabled=true]):is(input),
-.db-switch > label:not(:has(input:disabled)):hover:not(:disabled, [aria-disabled=true]):is(textarea),
-.db-switch > label:not(:has(input:disabled)):hover:not(:disabled, [aria-disabled=true]):is(input) {
-  cursor: initial;
-}
-.db-switch:is(label):not(:has(input:disabled)):hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-switch:is(label):not(:has(input:disabled)):hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)),
-.db-switch > label:not(:has(input:disabled)):hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]),
-.db-switch > label:not(:has(input:disabled)):hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
-  cursor: pointer;
-}
-.db-switch:is(label):not(:has(input:disabled)):active:not(:disabled, [aria-disabled=true]),
-.db-switch > label:not(:has(input:disabled)):active:not(:disabled, [aria-disabled=true]) {
-  cursor: var(--db-overwrite-cursor, pointer);
-}
-.db-switch:is(label):not(:has(input:disabled)):active:not(:disabled, [aria-disabled=true]):is(textarea), .db-switch:is(label):not(:has(input:disabled)):active:not(:disabled, [aria-disabled=true]):is(input),
-.db-switch > label:not(:has(input:disabled)):active:not(:disabled, [aria-disabled=true]):is(textarea),
-.db-switch > label:not(:has(input:disabled)):active:not(:disabled, [aria-disabled=true]):is(input) {
-  cursor: initial;
-}
-.db-switch:is(label):not(:has(input:disabled)):active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-switch:is(label):not(:has(input:disabled)):active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)),
-.db-switch > label:not(:has(input:disabled)):active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]),
-.db-switch > label:not(:has(input:disabled)):active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
-  cursor: pointer;
+  color: var(--db-check-element-label-color, var(--db-adaptive-on-bg-basic-emphasis-100-default));
 }
 .db-switch input {
   background-color: var(--db-adaptive-bg-basic-transparent-full-default);
@@ -786,27 +529,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   block-size: var(--db-icon-font-size);
   inline-size: var(--db-icon-font-size);
   padding: 0;
-  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
-}
-.db-switch input:hover:not(:disabled, [aria-disabled=true]) {
-  cursor: var(--db-overwrite-cursor, pointer);
-  background-color: var(--db-adaptive-bg-basic-transparent-hovered);
-}
-.db-switch input:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-switch input:hover:not(:disabled, [aria-disabled=true]):is(input) {
-  cursor: initial;
-}
-.db-switch input:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-switch input:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
-  cursor: pointer;
-}
-.db-switch input:active:not(:disabled, [aria-disabled=true]) {
-  cursor: var(--db-overwrite-cursor, pointer);
-  background-color: var(--db-adaptive-bg-basic-transparent-pressed);
-}
-.db-switch input:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-switch input:active:not(:disabled, [aria-disabled=true]):is(input) {
-  cursor: initial;
-}
-.db-switch input:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-switch input:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
-  cursor: pointer;
 }
 .db-switch[data-size=small] input {
   margin-inline-end: var(--db-spacing-fixed-2xs);
@@ -817,14 +539,31 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 .db-switch[data-hide-label=true] input {
   margin-inline-end: 0;
 }
-.db-switch:active:not(:disabled, [aria-disabled=true]) {
+.db-switch:not(:has(input:disabled)):has(input:hover, > label:hover, :is(label):hover) {
+  --db-check-element-label-color: var(
+  	--db-adaptive-on-bg-basic-emphasis-100-hovered
+  );
+}
+.db-switch:not(:has(input:disabled)):has(input:hover, > label:hover, :is(label):hover):is(label),
+.db-switch:not(:has(input:disabled)):has(input:hover, > label:hover, :is(label):hover) > label {
   cursor: var(--db-overwrite-cursor, pointer);
 }
-.db-switch:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-switch:active:not(:disabled, [aria-disabled=true]):is(input) {
-  cursor: initial;
+.db-switch: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);
 }
-.db-switch:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-switch:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
-  cursor: pointer;
+.db-switch:not(:has(input:disabled)):has(input:active, > label:active, :is(label):active) {
+  --db-check-element-label-color: var(
+  	--db-adaptive-on-bg-basic-emphasis-100-pressed
+  );
+}
+.db-switch:not(:has(input:disabled)):has(input:active, > label:active, :is(label):active):is(label),
+.db-switch:not(:has(input:disabled)):has(input:active, > label:active, :is(label):active) > label {
+  cursor: var(--db-overwrite-cursor, pointer);
+}
+.db-switch: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);
 }
 .db-switch > input {
   --db-icon-margin-start: 0;
@@ -837,7 +576,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   align-items: center;
   /* stylelint-disable-next-line db-ux/use-spacings */
   gap: 0.125rem;
-  background-color: var(--db-adaptive-bg-basic-transparent-full-default);
   border-radius: var(--db-border-radius-full);
   /* positioned at the end of the track: track length - 100% (thumb width) */
 }
@@ -852,6 +590,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   }
 }
 .db-switch > input::after {
+  --db-icon-color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
   visibility: hidden;
   align-self: center;
   aspect-ratio: 1;
@@ -862,8 +601,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   align-content: center;
   aspect-ratio: 1;
   block-size: calc(var(--db-icon-font-size) - 0.125rem * 2);
-  background-color: var(--db-adaptive-bg-inverted-contrast-max-default);
-  color: var(--db-adaptive-bg-inverted-contrast-max-default);
+  background-color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
+  color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
   border-radius: var(--db-border-radius-full);
   transform: translateX(var(--thumb-offset-x));
   margin-inline-end: calc(calc(var(--db-icon-font-size)) - calc(var(--db-icon-font-size) - 0.125rem * 2));
@@ -924,6 +663,9 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 .db-switch > input:checked:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-switch > input:checked:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
+.db-switch > input:checked::after {
+  --db-icon-color: var(--db-adaptive-on-bg-inverted-default);
+}
 .db-switch > input:checked::before {
   block-size: calc(var(--db-icon-font-size));
   background-color: var(--db-adaptive-on-bg-inverted-default);
@@ -989,6 +731,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   background-color: var(--db-adaptive-on-bg-inverted-default);
   color: var(--db-adaptive-on-bg-inverted-default);
 }
+.db-switch[data-emphasis=strong] > input:checked::after {
+  --db-icon-color: var(--db-adaptive-on-bg-inverted-default);
+}
+.db-switch[data-emphasis=strong] > input::after {
+  --db-icon-color: var(--db-adaptive-on-bg-inverted-default);
+}
 .db-switch[data-emphasis=strong] > input::before {
   background-color: var(--db-adaptive-on-bg-inverted-default);
   color: var(--db-adaptive-on-bg-inverted-default);

package/build/components/switch/switch.scss

@@ -38,11 +38,12 @@ $checked-active-transition-size: calc(
 .db-switch {
 	user-select: none;
 
-	@include form-components.set-default-check-element(switch);
+	@include form-components.set-default-check-element();
 
-	// This is needed when clicking on the label instead of the input
-	@include helpers.active {
-		> input {
+	&:not(:has(input:disabled)) {
+		@include form-components.get-state();
+
+		@include form-components.get-state("active") {
 			@extend %active-transition;
 		}
 	}
@@ -63,12 +64,13 @@ $checked-active-transition-size: calc(
 		align-items: center;
 		/* stylelint-disable-next-line db-ux/use-spacings */
 		gap: $switch-fixed-padding;
-		background-color: colors.$db-adaptive-bg-basic-transparent-full-default;
 		border-radius: variables.$db-border-radius-full;
 
 		@include icons.set-icon("cross", "after");
 
 		&::after {
+			--db-icon-color: #{colors.$db-adaptive-on-bg-basic-emphasis-100-default};
+
 			visibility: hidden;
 			align-self: center;
 			aspect-ratio: 1;
@@ -81,8 +83,8 @@ $checked-active-transition-size: calc(
 			align-content: center;
 			aspect-ratio: 1;
 			block-size: $switch-inactive-thumb-size;
-			background-color: colors.$db-adaptive-bg-inverted-contrast-max-default;
-			color: colors.$db-adaptive-bg-inverted-contrast-max-default;
+			background-color: colors.$db-adaptive-on-bg-basic-emphasis-100-default;
+			color: colors.$db-adaptive-on-bg-basic-emphasis-100-default;
 			border-radius: variables.$db-border-radius-full;
 			transform: translateX(var(--thumb-offset-x));
 			margin-inline-end: calc(
@@ -123,6 +125,10 @@ $checked-active-transition-size: calc(
 				border-color: colors.$db-adaptive-on-bg-basic-emphasis-100-pressed;
 			}
 
+			&::after {
+				--db-icon-color: #{colors.$db-adaptive-on-bg-inverted-default};
+			}
+
 			&::before {
 				block-size: $switch-active-thumb-size;
 				background-color: colors.$db-adaptive-on-bg-inverted-default;
@@ -197,6 +203,14 @@ $checked-active-transition-size: calc(
 					background-color: colors.$db-adaptive-on-bg-inverted-default;
 					color: colors.$db-adaptive-on-bg-inverted-default;
 				}
+
+				&::after {
+					--db-icon-color: #{colors.$db-adaptive-on-bg-inverted-default};
+				}
+			}
+
+			&::after {
+				--db-icon-color: #{colors.$db-adaptive-on-bg-inverted-default};
 			}
 
 			&::before {