@db-ux/core-components 4.4.3 → 4.5.1

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

@@ -0,0 +1,78 @@
+@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/button-components";
+@use "../../styles/internal/icon-passing";
+
+@mixin interactive-elements {
+	label,
+	button,
+	a {
+		@content;
+	}
+}
+
+$icon-padding-custom-button: calc(
+	#{variables.$db-spacing-fixed-sm} + #{icons.$default-icon-margin-end} +
+		var(--db-icon-font-size)
+);
+
+// generic styles can be found in _button-components.scss
+.db-custom-button {
+	position: relative;
+	max-inline-size: 100%;
+	inline-size: fit-content;
+
+	@include button-components.set-basic-button(
+		icon-passing.$interactive-button-selectors
+	);
+	@include icon-passing.icon-passing;
+	@include icon-passing.icon-passing-trailing;
+
+	&:has(:is(input, button):disabled, :is(input, button, a)[aria-disabled="true"]) {
+		opacity: variables.$db-opacity-md;
+	}
+
+	&[data-variant="brand"] {
+		label {
+			@extend %button-outlined-ghost-colors;
+		}
+
+		:is(a, button) {
+			@extend %button-brand-colors;
+		}
+	}
+
+	label:has(input:checked) {
+		color: colors.$db-adaptive-on-bg-inverted-default;
+		background-color: colors.$db-adaptive-bg-inverted-contrast-max-default;
+	}
+
+	label:has(input[type="checkbox"]:checked) {
+		@include helpers.hover {
+			background-color: colors.$db-adaptive-bg-inverted-contrast-max-hovered;
+		}
+
+		@include helpers.active {
+			background-color: colors.$db-adaptive-bg-inverted-contrast-max-pressed;
+		}
+	}
+
+	a[tabindex="-1"] {
+		cursor: default;
+		pointer-events: none;
+	}
+
+	&[data-width="full"] {
+		inline-size: 100%;
+	}
+
+	&:has(input):focus-within {
+		@extend %focus-placeholder;
+	}
+
+	input {
+		@extend %a11y-visually-hidden;
+	}
+}

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

@@ -530,6 +530,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;
@@ -1061,14 +1062,29 @@ input[type=radio]:checked) summary:is([type=date],
   padding-inline: var(--db-form-component-padding-inline-start, var(--db-spacing-fixed-sm)) var(--db-form-component-padding-inline-end, var(--db-spacing-fixed-sm));
   /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
 }
-.db-custom-select summary:hover:not(:disabled, [aria-disabled=true]) {
+.db-custom-select summary: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-custom-select summary:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-custom-select summary:hover:not(:disabled, [aria-disabled=true]):is(input) {
+.db-custom-select summary:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-custom-select summary:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
   cursor: initial;
 }
-.db-custom-select summary:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-custom-select summary:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-custom-select summary:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-custom-select summary:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
 .db-custom-select > label {

package/build/components/custom-select-dropdown/custom-select-dropdown.css

@@ -207,10 +207,12 @@
 
 @keyframes popover-animation {
   0% {
+    pointer-events: none;
     opacity: 0;
     transform: translate(var(--db-popover-center-x, var(--db-popover-translate-x, 0%)), var(--db-popover-center-y, var(--db-popover-translate-y, 0%)));
   }
   100% {
+    pointer-events: auto;
     opacity: 1;
     transform: translate(var(--db-popover-center-x, 0%), var(--db-popover-center-y, 0%));
   }
@@ -284,6 +286,7 @@
   /* stylelint-disable-next-line media-query-no-invalid */
 }
 .db-custom-select-dropdown:not([data-width]), .db-custom-select-dropdown[data-width=fixed] {
+  /* stylelint-disable-next-line db-ux/use-sizing */
   inline-size: var(--db-custom-select-dropdown-fixed-inline-size, var(--db-sizing-3xl));
 }
 .db-custom-select-dropdown[data-width=full] {

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

@@ -17,6 +17,7 @@
 
 	&:not([data-width]),
 	&[data-width="fixed"] {
+		/* stylelint-disable-next-line db-ux/use-sizing */
 		inline-size: var(
 			--db-custom-select-dropdown-fixed-inline-size,
 			#{variables.$db-sizing-3xl}

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

@@ -167,24 +167,54 @@ db-custom-select-list-item:not(:last-of-type) .db-custom-select-list-item[data-d
 .db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)) {
   /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
 }
-.db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):hover:not(:disabled, [aria-disabled=true]) {
+.db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):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-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):hover:not(:disabled, [aria-disabled=true]):is(input) {
+.db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
   cursor: initial;
 }
-.db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
-.db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):active:not(:disabled, [aria-disabled=true]) {
+.db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):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-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):active:not(:disabled, [aria-disabled=true]):is(textarea), .db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):active:not(:disabled, [aria-disabled=true]):is(input) {
+.db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
   cursor: initial;
 }
-.db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
 .db-custom-select-list-item span {

package/build/components/drawer/drawer.css

@@ -35,10 +35,12 @@
 
 @keyframes popover-animation {
   0% {
+    pointer-events: none;
     opacity: 0;
     transform: translate(var(--db-popover-center-x, var(--db-popover-translate-x, 0%)), var(--db-popover-center-y, var(--db-popover-translate-y, 0%)));
   }
   100% {
+    pointer-events: auto;
     opacity: 1;
     transform: translate(var(--db-popover-center-x, 0%), var(--db-popover-center-y, 0%));
   }
@@ -94,7 +96,9 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
 }
 
 .db-drawer .db-drawer-container[data-direction=down]:not([data-width=full]), .db-drawer .db-drawer-container[data-direction=up]:not([data-width=full]) {
+  /* stylelint-disable-next-line db-ux/use-sizing */
   max-block-size: var(--db-drawer-max-height, calc(100% - var(--db-spacing-fixed-xl)));
+  /* stylelint-disable-next-line db-ux/use-sizing */
   min-block-size: var(--db-drawer-min-height, calc(100% - var(--db-spacing-fixed-xl)));
   max-inline-size: none;
 }
@@ -213,7 +217,9 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
   box-shadow: var(--db-elevation-md);
 }
 .db-drawer .db-drawer-container:not([data-width=full]) {
+  /* stylelint-disable-next-line db-ux/use-sizing */
   max-inline-size: var(--db-drawer-max-width, calc(100% - var(--db-spacing-fixed-xl)));
+  /* stylelint-disable-next-line db-ux/use-sizing */
   min-inline-size: var(--db-drawer-min-width, calc(100% - var(--db-spacing-fixed-xl)));
 }
 .db-drawer .db-drawer-container:not([data-width=full]):not([data-direction]), .db-drawer .db-drawer-container:not([data-width=full])[data-direction=right] {

package/build/components/drawer/drawer.scss

@@ -32,10 +32,12 @@
 		/// @propertyname max-block-size
 		/// @cssprop --db-drawer-max-height
 		/// @default calc(100% - #{variables.$db-spacing-fixed-xl})
+		/* stylelint-disable-next-line db-ux/use-sizing */
 		max-block-size: var(
 			--db-drawer-max-height,
 			calc(100% - #{variables.$db-spacing-fixed-xl})
 		);
+		/* stylelint-disable-next-line db-ux/use-sizing */
 		min-block-size: var(
 			--db-drawer-min-height,
 			calc(100% - #{variables.$db-spacing-fixed-xl})
@@ -163,10 +165,12 @@ $spacings: (
 			///   <div class="db-drawer db-drawer-wide">
 			///     <!-- wide drawer -->
 			///   </div>
+			/* stylelint-disable-next-line db-ux/use-sizing */
 			max-inline-size: var(
 				--db-drawer-max-width,
 				calc(100% - #{variables.$db-spacing-fixed-xl})
 			);
+			/* stylelint-disable-next-line db-ux/use-sizing */
 			min-inline-size: var(
 				--db-drawer-min-width,
 				calc(100% - #{variables.$db-spacing-fixed-xl})

package/build/components/infotext/infotext.css

@@ -126,6 +126,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;
@@ -170,6 +171,9 @@
 .db-infotext[data-semantic=adaptive]::before, .db-infotext:not([data-semantic])::before {
   --db-icon-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
 }
+.db-infotext[data-wrap=false] {
+  white-space: nowrap;
+}
 .db-infotext[data-semantic=neutral] {
   color: var(--db-neutral-on-bg-basic-emphasis-80-default);
 }

package/build/components/infotext/infotext.scss

@@ -29,6 +29,10 @@
 		}
 	}
 
+	&[data-wrap="false"] {
+		white-space: nowrap;
+	}
+
 	@each $name, $colors in colors.$variant-colors {
 		&[data-semantic="#{$name}"] {
 			@include icons.variant-icons($name);

package/build/components/input/input.css

@@ -377,6 +377,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;
@@ -717,6 +718,7 @@ input[type=radio]:checked) input:is([type=date],
   }
 }
 .db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-valid) {
+  --db-icon-color: var(--db-successful-on-bg-basic-emphasis-100-default);
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
 .db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-valid) input,
@@ -740,6 +742,7 @@ input[type=radio]:checked) input:is([type=date],
   display: none;
 }
 .db-input:has(input[data-custom-validity=valid]), .db-input[data-custom-validity=valid] {
+  --db-icon-color: var(--db-successful-on-bg-basic-emphasis-100-default);
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
 .db-input:has(input[data-custom-validity=valid]) input,
@@ -767,6 +770,7 @@ input[type=radio]:checked) input:is([type=date],
   display: none;
 }
 .db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-invalid) {
+  --db-icon-color: var(--db-critical-on-bg-basic-emphasis-100-default);
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
 .db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-invalid) input,
@@ -786,6 +790,7 @@ input[type=radio]:checked) input:is([type=date],
   display: none;
 }
 .db-input:has(input[data-custom-validity=invalid]), .db-input[data-custom-validity=invalid] {
+  --db-icon-color: var(--db-critical-on-bg-basic-emphasis-100-default);
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
 .db-input:has(input[data-custom-validity=invalid]) input,
@@ -844,14 +849,29 @@ input[type=radio]:checked) input:is([type=date],
   /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
   /* see https://developer.mozilla.org/en-US/docs/Web/CSS/field-sizing */
 }
-.db-input input:hover:not(:disabled, [aria-disabled=true]) {
+.db-input input: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-input input:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-input input:hover:not(:disabled, [aria-disabled=true]):is(input) {
+.db-input input:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-input input:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
   cursor: initial;
 }
-.db-input input:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-input input:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-input input:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-input input:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
 .db-input input[data-field-sizing=content] {
@@ -948,6 +968,14 @@ input:focus-visible)::after {
   opacity: 1;
 }
 @supports selector(::-webkit-calendar-picker-indicator) {
+  .db-input:has(input[type=week]) {
+    --db-form-component-padding-inline-end: calc(var(--db-icon-font-size) + var(--db-spacing-fixed-sm) + var(--db-spacing-fixed-xs));
+  }
+  .db-input:has(input[type=date]), .db-input:has(input[type=datetime-local]) {
+    --db-form-component-padding-inline-end: calc(
+    	1lh + var(--db-spacing-fixed-xs)
+    );
+  }
   .db-input:has(input[type=date]):not([data-show-icon-trailing=false])::after, .db-input:has(input[type=week]):not([data-show-icon-trailing=false])::after, .db-input:has(input[type=datetime-local]):not([data-show-icon-trailing=false])::after, .db-input:has(input[type=month]):not([data-show-icon-trailing=false])::after {
     --db-icon-trailing: "calendar";
     margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));

package/build/components/input/input.scss

@@ -70,6 +70,17 @@ $icon-padding: calc(
 	// This @supports should exclude Mozilla Firefox
 	// TODO: Reevaluate after Mozilla is supporting week and month input types
 	@supports selector(::-webkit-calendar-picker-indicator) {
+		&:has(input[type="week"]) {
+			--db-form-component-padding-inline-end: #{$icon-padding};
+		}
+
+		&:has(input[type="date"]),
+		&:has(input[type="datetime-local"]) {
+			--db-form-component-padding-inline-end: calc(
+				1lh + #{variables.$db-spacing-fixed-xs}
+			);
+		}
+
 		&:has(input[type="date"]),
 		&:has(input[type="week"]),
 		&:has(input[type="datetime-local"]),

package/build/components/link/link.css

@@ -113,10 +113,12 @@
 
 @keyframes popover-animation {
   0% {
+    pointer-events: none;
     opacity: 0;
     transform: translate(var(--db-popover-center-x, var(--db-popover-translate-x, 0%)), var(--db-popover-center-y, var(--db-popover-translate-y, 0%)));
   }
   100% {
+    pointer-events: auto;
     opacity: 1;
     transform: translate(var(--db-popover-center-x, 0%), var(--db-popover-center-y, 0%));
   }
@@ -145,6 +147,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;
@@ -177,24 +180,54 @@
   color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
   /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
 }
-.db-link:hover:not(:disabled, [aria-disabled=true]) {
+.db-link:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) {
   cursor: var(--db-overwrite-cursor, pointer);
   color: color-mix(in srgb, transparent 25%, var(--db-adaptive-on-bg-basic-emphasis-100-default));
 }
-.db-link:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-link:hover:not(:disabled, [aria-disabled=true]):is(input) {
+.db-link:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-link:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
   cursor: initial;
 }
-.db-link:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-link:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-link:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-link:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
-.db-link:active:not(:disabled, [aria-disabled=true]) {
+.db-link:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) {
   cursor: var(--db-overwrite-cursor, pointer);
   color: color-mix(in srgb, transparent 50%, var(--db-adaptive-on-bg-basic-emphasis-100-default));
 }
-.db-link:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-link:active:not(:disabled, [aria-disabled=true]):is(input) {
+.db-link:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-link:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
   cursor: initial;
 }
-.db-link:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-link:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-link:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-link:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
 
@@ -246,24 +279,54 @@
   color: var(--db-brand-on-bg-basic-emphasis-80-default);
   /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
 }
-.db-link[data-variant=brand]:hover:not(:disabled, [aria-disabled=true]) {
+.db-link[data-variant=brand]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) {
   cursor: var(--db-overwrite-cursor, pointer);
   color: var(--db-brand-on-bg-basic-emphasis-80-hovered);
 }
-.db-link[data-variant=brand]:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-link[data-variant=brand]:hover:not(:disabled, [aria-disabled=true]):is(input) {
+.db-link[data-variant=brand]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-link[data-variant=brand]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
   cursor: initial;
 }
-.db-link[data-variant=brand]:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-link[data-variant=brand]:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-link[data-variant=brand]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-link[data-variant=brand]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
-.db-link[data-variant=brand]:active:not(:disabled, [aria-disabled=true]) {
+.db-link[data-variant=brand]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) {
   cursor: var(--db-overwrite-cursor, pointer);
   color: var(--db-brand-on-bg-basic-emphasis-80-pressed);
 }
-.db-link[data-variant=brand]:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-link[data-variant=brand]:active:not(:disabled, [aria-disabled=true]):is(input) {
+.db-link[data-variant=brand]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-link[data-variant=brand]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
   cursor: initial;
 }
-.db-link[data-variant=brand]:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-link[data-variant=brand]:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-link[data-variant=brand]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-link[data-variant=brand]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
 .db-link[data-size=small] {