@db-ux/core-components 4.4.3 → 4.5.1

package/build/components/button/button.css

@@ -132,118 +132,304 @@
   display: inline-flex;
 }
 
-.db-button {
-  max-inline-size: 100%;
-  color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
-  min-block-size: var(--db-sizing-md);
-  block-size: max-content;
-  inline-size: fit-content;
-  padding: var(--db-spacing-fixed-2xs) var(--db-spacing-fixed-md);
-  text-decoration: none;
-}
-.db-button[data-no-text=true] {
-  font-size: 0 !important;
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-  padding: 0;
-  aspect-ratio: 1;
-  inline-size: var(--db-sizing-md);
-}
-.db-button[data-no-text=true]::before {
-  --db-icon-margin-end: 0;
+.db-button[data-variant=outlined], .db-button:not([data-variant]), .db-button[data-variant=""], .db-button[data-variant=ghost] {
+  background-color: var(--db-adaptive-bg-basic-transparent-full-default);
+  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
 }
-.db-button[data-no-text=true]::before {
-  margin: auto;
+.db-button[data-variant=outlined]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)), .db-button:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):not([data-variant]), .db-button[data-variant=""]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)), .db-button[data-variant=ghost]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) {
+  cursor: var(--db-overwrite-cursor, pointer);
+  background-color: var(--db-adaptive-bg-basic-transparent-full-hovered);
 }
-.db-button[data-size=small] {
-  font-weight: 700;
-  min-block-size: var(--db-sizing-sm);
+.db-button[data-variant=outlined]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-button:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea):not([data-variant]), .db-button[data-variant=""]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-button[data-variant=ghost]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-button[data-variant=outlined]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input), .db-button:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input):not([data-variant]), .db-button[data-variant=""]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input), .db-button[data-variant=ghost]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
+  cursor: initial;
 }
-.db-button[data-size=small]:not([data-no-text=true]) {
-  padding: 1px var(--db-spacing-fixed-sm);
+.db-button[data-variant=outlined]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-button:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]):not([data-variant]), .db-button[data-variant=""]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-button[data-variant=ghost]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-button[data-variant=outlined]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)), .db-button:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)):not([data-variant]), .db-button[data-variant=""]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)), .db-button[data-variant=ghost]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
+  cursor: pointer;
 }
-.db-button[data-size=small]:not([data-no-text=true])::before {
-  margin-inline-end: var(--db-spacing-fixed-2xs);
+.db-button[data-variant=outlined]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)), .db-button:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):not([data-variant]), .db-button[data-variant=""]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)), .db-button[data-variant=ghost]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) {
+  cursor: var(--db-overwrite-cursor, pointer);
+  background-color: var(--db-adaptive-bg-basic-transparent-full-pressed);
 }
-.db-button[data-size=small][data-no-text=true] {
-  inline-size: var(--db-sizing-sm);
+.db-button[data-variant=outlined]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-button:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea):not([data-variant]), .db-button[data-variant=""]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-button[data-variant=ghost]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-button[data-variant=outlined]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input), .db-button:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input):not([data-variant]), .db-button[data-variant=""]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input), .db-button[data-variant=ghost]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
+  cursor: initial;
 }
-.db-button[data-width=full] {
-  inline-size: 100%;
+.db-button[data-variant=outlined]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-button:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]):not([data-variant]), .db-button[data-variant=""]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-button[data-variant=ghost]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-button[data-variant=outlined]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)), .db-button:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)):not([data-variant]), .db-button[data-variant=""]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)), .db-button[data-variant=ghost]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
+  cursor: pointer;
 }
+
 .db-button[data-variant=brand] {
   background-color: var(--db-brand-origin-default);
   color: var(--db-brand-on-origin-default);
   border-color: var(--db-brand-on-bg-basic-emphasis-70-default);
   /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
 }
-.db-button[data-variant=brand]:hover:not(:disabled, [aria-disabled=true]) {
+.db-button[data-variant=brand]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) {
   cursor: var(--db-overwrite-cursor, pointer);
   background-color: var(--db-brand-origin-hovered);
   border-color: var(--db-brand-on-bg-basic-emphasis-70-default);
 }
-.db-button[data-variant=brand]:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-button[data-variant=brand]:hover:not(:disabled, [aria-disabled=true]):is(input) {
+.db-button[data-variant=brand]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-button[data-variant=brand]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
   cursor: initial;
 }
-.db-button[data-variant=brand]:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-button[data-variant=brand]:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-button[data-variant=brand]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-button[data-variant=brand]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
-.db-button[data-variant=brand]:active:not(:disabled, [aria-disabled=true]) {
+.db-button[data-variant=brand]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) {
   cursor: var(--db-overwrite-cursor, pointer);
   background-color: var(--db-brand-origin-pressed);
   border-color: var(--db-brand-on-bg-basic-emphasis-70-default);
 }
-.db-button[data-variant=brand]:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-button[data-variant=brand]:active:not(:disabled, [aria-disabled=true]):is(input) {
+.db-button[data-variant=brand]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-button[data-variant=brand]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
   cursor: initial;
 }
-.db-button[data-variant=brand]:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-button[data-variant=brand]:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-button[data-variant=brand]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-button[data-variant=brand]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
-.db-button[data-variant=outlined], .db-button:not([data-variant]), .db-button[data-variant=""], .db-button[data-variant=ghost] {
-  background-color: var(--db-adaptive-bg-basic-transparent-full-default);
-  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
+
+.db-button {
+  max-inline-size: 100%;
+  color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
+  min-block-size: var(--db-sizing-md);
+  block-size: max-content;
+  inline-size: fit-content;
+  padding: var(--db-spacing-fixed-2xs) var(--db-spacing-fixed-md);
+  text-decoration: none;
 }
-.db-button[data-variant=outlined]:hover:not(:disabled, [aria-disabled=true]), .db-button:not([data-variant]):hover:not(:disabled, [aria-disabled=true]), .db-button[data-variant=""]:hover:not(:disabled, [aria-disabled=true]), .db-button[data-variant=ghost]:hover:not(:disabled, [aria-disabled=true]) {
-  cursor: var(--db-overwrite-cursor, pointer);
-  background-color: var(--db-adaptive-bg-basic-transparent-full-hovered);
+.db-button[data-no-text=true] {
+  padding: 0;
+  inline-size: var(--db-sizing-md);
+  block-size: var(--db-sizing-md);
+  font-size: 0 !important;
+  /* stylelint-disable-next-line at-rule-empty-line-before */
 }
-.db-button[data-variant=outlined]:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-button[data-variant=outlined]:hover:not(:disabled, [aria-disabled=true]):is(input), .db-button:not([data-variant]):hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-button:not([data-variant]):hover:not(:disabled, [aria-disabled=true]):is(input), .db-button[data-variant=""]:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-button[data-variant=""]:hover:not(:disabled, [aria-disabled=true]):is(input), .db-button[data-variant=ghost]:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-button[data-variant=ghost]:hover:not(:disabled, [aria-disabled=true]):is(input) {
-  cursor: initial;
+.db-button[data-no-text=true]::before {
+  --db-icon-margin-end: 0;
 }
-.db-button[data-variant=outlined]:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-button[data-variant=outlined]:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-button:not([data-variant]):hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-button:not([data-variant]):hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-button[data-variant=""]:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-button[data-variant=""]:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-button[data-variant=ghost]:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-button[data-variant=ghost]:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
-  cursor: pointer;
+.db-button[data-no-text=true]::before {
+  margin: auto;
 }
-.db-button[data-variant=outlined]:active:not(:disabled, [aria-disabled=true]), .db-button:not([data-variant]):active:not(:disabled, [aria-disabled=true]), .db-button[data-variant=""]:active:not(:disabled, [aria-disabled=true]), .db-button[data-variant=ghost]:active:not(:disabled, [aria-disabled=true]) {
-  cursor: var(--db-overwrite-cursor, pointer);
-  background-color: var(--db-adaptive-bg-basic-transparent-full-pressed);
+.db-button[data-wrap=false] {
+  white-space: nowrap;
 }
-.db-button[data-variant=outlined]:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-button[data-variant=outlined]:active:not(:disabled, [aria-disabled=true]):is(input), .db-button:not([data-variant]):active:not(:disabled, [aria-disabled=true]):is(textarea), .db-button:not([data-variant]):active:not(:disabled, [aria-disabled=true]):is(input), .db-button[data-variant=""]:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-button[data-variant=""]:active:not(:disabled, [aria-disabled=true]):is(input), .db-button[data-variant=ghost]:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-button[data-variant=ghost]:active:not(:disabled, [aria-disabled=true]):is(input) {
-  cursor: initial;
+.db-button[data-size=small] {
+  font-weight: 700;
+  min-block-size: var(--db-sizing-sm);
 }
-.db-button[data-variant=outlined]:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-button[data-variant=outlined]:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-button:not([data-variant]):active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-button:not([data-variant]):active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-button[data-variant=""]:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-button[data-variant=""]:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-button[data-variant=ghost]:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-button[data-variant=ghost]:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
-  cursor: pointer;
+.db-button[data-size=small]:not([data-no-text=true]) {
+  padding: 1px var(--db-spacing-fixed-sm);
+}
+.db-button[data-size=small]:not([data-no-text=true])::before {
+  margin-inline-end: var(--db-spacing-fixed-2xs);
+}
+.db-button[data-size=small][data-no-text=true] {
+  inline-size: var(--db-sizing-sm);
+  block-size: var(--db-sizing-sm);
+}
+.db-button[data-width=full]:not([data-no-text=true]) {
+  inline-size: 100%;
 }
 .db-button[data-variant=filled] {
   background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
   /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
 }
-.db-button[data-variant=filled]:hover:not(:disabled, [aria-disabled=true]) {
+.db-button[data-variant=filled]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) {
   cursor: var(--db-overwrite-cursor, pointer);
   background-color: var(--db-adaptive-bg-basic-transparent-semi-hovered);
 }
-.db-button[data-variant=filled]:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-button[data-variant=filled]:hover:not(:disabled, [aria-disabled=true]):is(input) {
+.db-button[data-variant=filled]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-button[data-variant=filled]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
   cursor: initial;
 }
-.db-button[data-variant=filled]:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-button[data-variant=filled]:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-button[data-variant=filled]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-button[data-variant=filled]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
-.db-button[data-variant=filled]:active:not(:disabled, [aria-disabled=true]) {
+.db-button[data-variant=filled]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) {
   cursor: var(--db-overwrite-cursor, pointer);
   background-color: var(--db-adaptive-bg-basic-transparent-semi-pressed);
 }
-.db-button[data-variant=filled]:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-button[data-variant=filled]:active:not(:disabled, [aria-disabled=true]):is(input) {
+.db-button[data-variant=filled]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-button[data-variant=filled]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
   cursor: initial;
 }
-.db-button[data-variant=filled]:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-button[data-variant=filled]:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-button[data-variant=filled]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-button[data-variant=filled]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
 .db-button:is(:disabled, [aria-disabled=true]) {

package/build/components/button/button.scss

@@ -1,113 +1,9 @@
-@charset "utf-8";
-@use "@db-ux/core-foundations/build/styles/fonts";
 @use "@db-ux/core-foundations/build/styles/variables";
-@use "@db-ux/core-foundations/build/styles/colors";
-@use "@db-ux/core-foundations/build/styles/icons";
-@use "@db-ux/core-foundations/build/styles/helpers";
-@use "../../styles/internal/component";
 @use "../../styles/internal/button-components";
 
 // generic styles can be found in _button-components.scss
 .db-button {
-	@extend %default-interactive-component;
-	@extend %default-button;
-	@extend %db-overwrite-font-size-md;
-
-	max-inline-size: 100%;
-	color: colors.$db-adaptive-on-bg-basic-emphasis-100-default;
-	min-block-size: variables.$db-sizing-md;
-	block-size: max-content;
-	inline-size: fit-content;
-	padding: variables.$db-spacing-fixed-2xs variables.$db-spacing-fixed-md;
-
-	// disable text-decoration if someone wants to use the button for an <a> tag
-	text-decoration: none;
-
-	// Square icon only buttons
-	&[data-no-text="true"] {
-		@include icons.is-icon-text-replace;
-
-		padding: 0;
-		aspect-ratio: 1;
-		inline-size: variables.$db-sizing-md;
-
-		&::before {
-			margin: auto;
-		}
-	}
-
-	&[data-size="small"] {
-		@extend %db-overwrite-font-size-sm;
-
-		font-weight: 700;
-		min-block-size: variables.$db-sizing-sm;
-
-		&:not([data-no-text="true"]) {
-			// stylelint-disable-next-line db-ux/use-spacings
-			padding: 1px variables.$db-spacing-fixed-sm;
-
-			&::before {
-				margin-inline-end: variables.$db-spacing-fixed-2xs;
-			}
-		}
-
-		// Square icon only buttons
-		&[data-no-text="true"] {
-			inline-size: variables.$db-sizing-sm;
-		}
-	}
-
-	&[data-width="full"] {
-		inline-size: 100%;
-	}
-
-	&[data-variant="brand"] {
-		background-color: colors.$db-brand-origin-default;
-		color: colors.$db-brand-on-origin-default;
-		border-color: colors.$db-brand-on-bg-basic-emphasis-70-default;
-
-		@include helpers.hover {
-			background-color: colors.$db-brand-origin-hovered;
-			border-color: colors.$db-brand-on-bg-basic-emphasis-70-default;
-		}
-
-		@include helpers.active {
-			background-color: colors.$db-brand-origin-pressed;
-			border-color: colors.$db-brand-on-bg-basic-emphasis-70-default;
-		}
-	}
-
-	&[data-variant="filled"],
-	&[data-variant="ghost"] {
-		@extend %transparent-border;
-	}
-
-	&[data-variant="outlined"],
-	&:not([data-variant]),
-	&[data-variant=""],
-	&[data-variant="ghost"] {
-		background-color: colors.$db-adaptive-bg-basic-transparent-full-default;
-
-		@include helpers.hover {
-			background-color: colors.$db-adaptive-bg-basic-transparent-full-hovered;
-		}
-
-		@include helpers.active {
-			background-color: colors.$db-adaptive-bg-basic-transparent-full-pressed;
-		}
-	}
-
-	&[data-variant="filled"] {
-		background-color: colors.$db-adaptive-bg-basic-transparent-semi-default;
-
-		@include helpers.hover {
-			background-color: colors.$db-adaptive-bg-basic-transparent-semi-hovered;
-		}
-
-		@include helpers.active {
-			background-color: colors.$db-adaptive-bg-basic-transparent-semi-pressed;
-		}
-	}
+	@include button-components.set-basic-button;
 
 	&:is(:disabled, [aria-disabled="true"]) {
 		opacity: variables.$db-opacity-md;

package/build/components/card/card.css

@@ -53,30 +53,72 @@
   padding: unset;
   font: inherit;
 }
-:is(a[href], button):hover:not(:disabled, [aria-disabled=true]) {
+:is(a[href], button):hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) {
   cursor: var(--db-overwrite-cursor, pointer);
 }
-:is(a[href], button):hover:not(:disabled, [aria-disabled=true]) > .db-card,
-:is(a[href], button):hover:not(:disabled, [aria-disabled=true]) > db-card > .db-card {
+:is(a[href], button):hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) > .db-card,
+:is(a[href], button):hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) > db-card > .db-card {
   background-color: var(--db-card-background-color-hovered);
 }
-:is(a[href], button):hover:not(:disabled, [aria-disabled=true]):is(textarea), :is(a[href], button):hover:not(:disabled, [aria-disabled=true]):is(input) {
+:is(a[href], button):hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), :is(a[href], button):hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
   cursor: initial;
 }
-:is(a[href], button):hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), :is(a[href], button):hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+:is(a[href], button):hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), :is(a[href], button):hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
-:is(a[href], button):active:not(:disabled, [aria-disabled=true]) {
+:is(a[href], button):active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) {
   cursor: var(--db-overwrite-cursor, pointer);
 }
-:is(a[href], button):active:not(:disabled, [aria-disabled=true]) > .db-card,
-:is(a[href], button):active:not(:disabled, [aria-disabled=true]) > db-card > .db-card {
+:is(a[href], button):active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) > .db-card,
+:is(a[href], button):active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) > db-card > .db-card {
   background-color: var(--db-card-background-color-pressed);
 }
-:is(a[href], button):active:not(:disabled, [aria-disabled=true]):is(textarea), :is(a[href], button):active:not(:disabled, [aria-disabled=true]):is(input) {
+:is(a[href], button):active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), :is(a[href], button):active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
   cursor: initial;
 }
-:is(a[href], button):active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), :is(a[href], button):active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+:is(a[href], button):active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), :is(a[href], button):active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
 
@@ -109,24 +151,54 @@
 .db-card[data-behavior=interactive] {
   /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
 }
-.db-card[data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]) {
+.db-card[data-behavior=interactive]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) {
   cursor: var(--db-overwrite-cursor, pointer);
   background-color: var(--db-card-background-color-hovered);
 }
-.db-card[data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-card[data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]):is(input) {
+.db-card[data-behavior=interactive]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-card[data-behavior=interactive]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
   cursor: initial;
 }
-.db-card[data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-card[data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-card[data-behavior=interactive]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-card[data-behavior=interactive]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
-.db-card[data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]) {
+.db-card[data-behavior=interactive]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) {
   cursor: var(--db-overwrite-cursor, pointer);
   background-color: var(--db-card-background-color-pressed);
 }
-.db-card[data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-card[data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]):is(input) {
+.db-card[data-behavior=interactive]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-card[data-behavior=interactive]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
   cursor: initial;
 }
-.db-card[data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-card[data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-card[data-behavior=interactive]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-card[data-behavior=interactive]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
 .db-card[data-elevation-level="2"] {

package/build/components/checkbox/checkbox.css

@@ -71,6 +71,7 @@
   text-transform: none;
   overflow: clip;
   vertical-align: var(--db-icon-vertical-align, middle);
+  /* stylelint-disable-next-line db-ux/use-sizing */
   block-size: var(--db-icon-font-size, 1.5rem);
   aspect-ratio: 1;
   flex-shrink: 0;