@db-ux/core-components 4.13.1-angular-signal-forms13-577b861 → 4.14.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @db-ux/core-components
 
+## 4.14.0
+
+### Minor Changes
+
+- refactor: consolidate floating component listeners into shared abstractions - [see commit de676fe](https://github.com/db-ux-design-system/core-web/commit/de676fe17e8a8157acd2e574fcea28ab6022389c)
+
+### Patch Changes
+
+- fix: correct accordion variant backgrounds to match design (divider is transparent, card is level-1 including the open content area) - [see commit b611b84](https://github.com/db-ux-design-system/core-web/commit/b611b845e6aded8f50dd07f3727ebf5fdf902b69)
+
+- fix: use inline-flex with align-items center for link components to vertically center text with fixed height across densities - [see commit 5ebdef8](https://github.com/db-ux-design-system/core-web/commit/5ebdef89b14d56d901630aa61e098213704ba603)
+
 ## 4.13.0
 
 _version bump_

package/build/components/accordion/accordion.css

@@ -32,21 +32,28 @@ The spacings are not part of the styling of the accordion items themselves.
   content: "";
   background-color: var(--db-divider-bg-color);
   position: absolute;
+  /* jscpd:ignore-start */
   block-size: var(--db-border-width-3xs);
   inset-block-start: 0;
   inset-inline: 0;
-  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* stylelint-disable-next-line db-ux/use-border-color */
 }
 @media (forced-colors: active) {
-  .db-accordion[data-variant=divider] db-accordion-item + db-accordion-item .db-accordion-item,
-  .db-accordion[data-variant=divider] .db-accordion-item + .db-accordion-item, .db-accordion:not([data-variant]) db-accordion-item + db-accordion-item .db-accordion-item,
-  .db-accordion:not([data-variant]) .db-accordion-item + .db-accordion-item {
-    /* stylelint-disable-next-line no-invalid-position-declaration, db-ux/use-border-color */
-    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .db-accordion[data-variant=divider] db-accordion-item + db-accordion-item .db-accordion-item::before,
+  .db-accordion[data-variant=divider] .db-accordion-item + .db-accordion-item::before, .db-accordion:not([data-variant]) db-accordion-item + db-accordion-item .db-accordion-item::before,
+  .db-accordion:not([data-variant]) .db-accordion-item + .db-accordion-item::before {
+    /* stylelint-disable-next-line db-ux/use-border-color */
+    border-block-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
 .db-accordion[data-variant=divider] db-accordion-item + db-accordion-item .db-accordion-item::before,
 .db-accordion[data-variant=divider] .db-accordion-item + .db-accordion-item::before, .db-accordion:not([data-variant]) db-accordion-item + db-accordion-item .db-accordion-item::before,
+.db-accordion:not([data-variant]) .db-accordion-item + .db-accordion-item::before {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* jscpd:ignore-end */
+}
+.db-accordion[data-variant=divider] db-accordion-item + db-accordion-item .db-accordion-item::before,
+.db-accordion[data-variant=divider] .db-accordion-item + .db-accordion-item::before, .db-accordion:not([data-variant]) db-accordion-item + db-accordion-item .db-accordion-item::before,
 .db-accordion:not([data-variant]) .db-accordion-item + .db-accordion-item::before {
   inset-block-start: calc(-1 * var(--db-spacing-fixed-sm));
 }
@@ -54,6 +61,26 @@ The spacings are not part of the styling of the accordion items themselves.
 .db-accordion[data-variant=card] .db-accordion-item + .db-accordion-item {
   margin-block-start: var(--db-spacing-fixed-sm);
 }
+.db-accordion[data-variant=card] .db-accordion-item {
+  background-color: var(--db-adaptive-bg-basic-level-1-default);
+}
+.db-accordion[data-variant=card] .db-accordion-item > details > summary:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)) {
+  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
+}
+.db-accordion[data-variant=card] .db-accordion-item > details > summary:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover {
+  cursor: var(--db-overwrite-cursor, pointer);
+  background-color: var(--db-adaptive-bg-basic-level-1-hovered);
+}
+.db-accordion[data-variant=card] .db-accordion-item > details > summary:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active {
+  cursor: var(--db-overwrite-cursor, pointer);
+  background-color: var(--db-adaptive-bg-basic-level-1-pressed);
+}
+.db-accordion[data-variant=card] .db-accordion-item:has(> details[aria-disabled=true]) {
+  opacity: var(--db-opacity-md);
+}
+.db-accordion[data-variant=card] .db-accordion-item:has(> details[aria-disabled=true]) > details[aria-disabled=true] {
+  opacity: 1;
+}
 .db-accordion[data-variant=card] .db-accordion-item {
   /*
   Adding the component-border to the item itself leads to a render error (tested in Chrome and Safari):

package/build/components/accordion/accordion.scss

@@ -1,5 +1,6 @@
 @use "@db-ux/core-foundations/build/styles/helpers";
 @use "@db-ux/core-foundations/build/styles/variables";
+@use "@db-ux/core-foundations/build/styles/colors";
 @use "../../styles/internal/component";
 
 @mixin accordion-subsequent-item-selector() {
@@ -40,6 +41,30 @@ The spacings are not part of the styling of the accordion items themselves.
 		}
 
 		.db-accordion-item {
+			// The whole card (summary + expanded content) is filled with a
+			// level-1 background, so an open item stays level-1 throughout.
+			background-color: colors.$db-adaptive-bg-basic-level-1-default;
+
+			> details > summary {
+				@include helpers.interactive-bg(
+					colors.$db-adaptive-bg-basic-level-1-hovered,
+					colors.$db-adaptive-bg-basic-level-1-pressed
+				);
+			}
+
+			// A disabled card must dim as a whole. The base disabled opacity
+			// sits on the inner `<details>` (see accordion-item.scss), which
+			// would leave the level-1 fill and border on the item fully
+			// opaque. Mirror the disabled state on the item and reset the
+			// inner one so the opacity does not stack.
+			&:has(> details[aria-disabled="true"]) {
+				opacity: variables.$db-opacity-md;
+
+				> details[aria-disabled="true"] {
+					opacity: 1;
+				}
+			}
+
 			/*
 			Adding the component-border to the item itself leads to a render error (tested in Chrome and Safari):
 			On mouseover, a small white gap appears between the rounded border and the rounded gray area.

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

@@ -1,18 +1,13 @@
 .db-visually-hidden,
 [data-visually-hidden=true] {
-  clip: rect(0, 0, 0, 0) !important;
-  overflow: hidden !important;
-  white-space: nowrap !important;
-  font-size: 0 !important;
-  all: initial;
-  inset-block-start: 0 !important;
-  block-size: 1px !important;
   position: absolute !important;
+  inset-block-start: 0 !important;
   inline-size: 1px !important;
-  border-width: 0 !important;
-  border-style: initial !important;
-  border-color: initial !important;
-  border-image: initial !important;
+  block-size: 1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
   padding: 0 !important;
   pointer-events: none !important;
 }
@@ -136,7 +131,7 @@
   padding-block-end: var(--db-spacing-fixed-lg);
 }
 .db-accordion-item > details > summary {
-  background-color: var(--db-adaptive-bg-basic-level-1-default);
+  background-color: var(--db-adaptive-bg-basic-transparent-full-default);
   list-style: none;
 }
 .db-accordion-item > details > summary:not([hidden]) {
@@ -153,11 +148,11 @@
 }
 .db-accordion-item > details > summary:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover {
   cursor: var(--db-overwrite-cursor, pointer);
-  background-color: var(--db-adaptive-bg-basic-level-1-hovered);
+  background-color: var(--db-adaptive-bg-basic-transparent-full-hovered);
 }
 .db-accordion-item > details > summary:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active {
   cursor: var(--db-overwrite-cursor, pointer);
-  background-color: var(--db-adaptive-bg-basic-level-1-pressed);
+  background-color: var(--db-adaptive-bg-basic-transparent-full-pressed);
 }
 .db-accordion-item > details > summary::-webkit-details-marker {
   display: none;

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

@@ -47,7 +47,9 @@
 			@extend %dropdown-icon;
 			@extend %db-overwrite-font-size-md;
 
-			background-color: colors.$db-adaptive-bg-basic-level-1-default;
+			// Default (divider) variant: the summary blends into the page.
+			// The "card" variant overrides this with a level-1 fill in accordion.scss.
+			background-color: colors.$db-adaptive-bg-basic-transparent-full-default;
 			list-style: none;
 
 			@include helpers.display(flex);
@@ -58,8 +60,8 @@
 			border-radius: variables.$db-border-radius-sm;
 
 			@include helpers.interactive-bg(
-				colors.$db-adaptive-bg-basic-level-1-hovered,
-				colors.$db-adaptive-bg-basic-level-1-pressed
+				colors.$db-adaptive-bg-basic-transparent-full-hovered,
+				colors.$db-adaptive-bg-basic-transparent-full-pressed
 			);
 
 			&::-webkit-details-marker {

package/build/components/badge/badge.css

@@ -245,5 +245,5 @@
 }
 
 [data-has-badge=true] {
-  position: relative;
+  position: var(--db-has-badge-position, relative);
 }

package/build/components/badge/badge.scss

@@ -116,5 +116,5 @@
 // Global styles
 
 [data-has-badge="true"] {
-	position: relative;
+	position: var(--db-has-badge-position, relative);
 }

package/build/components/button/button.css

@@ -135,11 +135,3 @@
 .db-button:is(:disabled, [aria-disabled=true]) {
   opacity: var(--db-opacity-md);
 }
-.db-button:has(> .db-button) {
-  margin: 0;
-  padding: 0;
-  block-size: var(--db-sizing-md);
-}
-.db-button:has(> .db-button)::before {
-  content: none;
-}

package/build/components/button/button.scss

@@ -8,15 +8,4 @@
 	&:is(:disabled, [aria-disabled="true"]) {
 		opacity: variables.$db-opacity-md;
 	}
-
-	// Workaround for current stencil implementation for header
-	&:has(> .db-button) {
-		margin: 0;
-		padding: 0;
-		block-size: variables.$db-sizing-md;
-
-		&::before {
-			content: none;
-		}
-	}
 }

package/build/components/checkbox/checkbox.css

@@ -1,18 +1,13 @@
 .db-visually-hidden,
 [data-visually-hidden=true] {
-  clip: rect(0, 0, 0, 0) !important;
-  overflow: hidden !important;
-  white-space: nowrap !important;
-  font-size: 0 !important;
-  all: initial;
-  inset-block-start: 0 !important;
-  block-size: 1px !important;
   position: absolute !important;
+  inset-block-start: 0 !important;
   inline-size: 1px !important;
-  border-width: 0 !important;
-  border-style: initial !important;
-  border-color: initial !important;
-  border-image: initial !important;
+  block-size: 1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
   padding: 0 !important;
   pointer-events: none !important;
 }

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

@@ -2,19 +2,14 @@
 /* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
 /* Variants for adaptive components like input, select, notification, ... */
 .db-custom-button input {
-  clip: rect(0, 0, 0, 0) !important;
-  overflow: hidden !important;
-  white-space: nowrap !important;
-  font-size: 0 !important;
-  all: initial;
-  inset-block-start: 0 !important;
-  block-size: 1px !important;
   position: absolute !important;
+  inset-block-start: 0 !important;
   inline-size: 1px !important;
-  border-width: 0 !important;
-  border-style: initial !important;
-  border-color: initial !important;
-  border-image: initial !important;
+  block-size: 1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
   padding: 0 !important;
   pointer-events: none !important;
 }
@@ -166,17 +161,16 @@
 }
 .db-custom-button[data-icon-leading]:not([data-show-icon-leading=false])::before, .db-custom-button[data-icon]:not([data-show-icon=false])::before {
   position: absolute;
-  inset-block-start: calc(50% - 0.5em);
-  inset-inline-start: var(--db-icon-passing-inline-start, var(--db-spacing-fixed-sm));
+  inset-block-start: var(--db-icon-passing-inset-block-start, calc(50% - 0.5em));
+  inset-inline-start: var(--db-icon-passing-inset-inline-start, var(--db-spacing-fixed-sm));
   pointer-events: none;
   z-index: 1;
 }
-.db-custom-button[data-icon-leading]:not([data-show-icon-leading=false]) label, .db-custom-button[data-icon-leading]:not([data-show-icon-leading=false]) button, .db-custom-button[data-icon-leading]:not([data-show-icon-leading=false]) a, .db-custom-button[data-icon]:not([data-show-icon=false]) label, .db-custom-button[data-icon]:not([data-show-icon=false]) button, .db-custom-button[data-icon]:not([data-show-icon=false]) a {
-  --db-padding-inline-start: calc(
-  	var(--db-spacing-fixed-sm) + var(--db-icon-margin-end, var(--db-spacing-fixed-xs)) + 1lh
-  );
+.db-custom-button[data-icon-leading]:not([data-show-icon-leading=false]) > :is(label, button, a),
+.db-custom-button[data-icon-leading]:not([data-show-icon-leading=false]) > * > :is(label, button, a), .db-custom-button[data-icon]:not([data-show-icon=false]) > :is(label, button, a),
+.db-custom-button[data-icon]:not([data-show-icon=false]) > * > :is(label, button, a) {
   /* stylelint-disable-next-line db-ux/use-spacings */
-  padding-inline-start: var(--db-padding-inline-start);
+  padding-inline-start: var(--db-icon-passing-padding-inline-start, calc(var(--db-spacing-fixed-sm) + var(--db-icon-margin-end, var(--db-spacing-fixed-xs)) + var(--db-icon-font-size)));
 }
 .db-custom-button[data-icon-trailing]:not([data-show-icon-trailing=false])::after {
   position: absolute;
@@ -185,7 +179,8 @@
   pointer-events: none;
   z-index: 1;
 }
-.db-custom-button[data-icon-trailing]:not([data-show-icon-trailing=false]) label, .db-custom-button[data-icon-trailing]:not([data-show-icon-trailing=false]) button, .db-custom-button[data-icon-trailing]:not([data-show-icon-trailing=false]) a {
+.db-custom-button[data-icon-trailing]:not([data-show-icon-trailing=false]) > :is(label, button, a),
+.db-custom-button[data-icon-trailing]:not([data-show-icon-trailing=false]) > * > :is(label, button, a) {
   padding-inline-end: calc(var(--db-spacing-fixed-sm) + var(--db-icon-margin-end, var(--db-spacing-fixed-xs)) + var(--db-icon-font-size));
 }
 .db-custom-button:has(:is(input, button):disabled,
@@ -194,7 +189,7 @@
 }
 .db-custom-button[data-no-text=true] {
   --db-icon-margin-end: 0;
-  --db-icon-passing-inline-start: calc(50% - 0.5em);
+  --db-icon-passing-inset-inline-start: calc(50% - 0.5em);
 }
 .db-custom-button label:has(input:checked) {
   color: var(--db-adaptive-on-bg-inverted-default);

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

@@ -49,7 +49,7 @@ $icon-padding-custom-button: calc(
 
 	&[data-no-text="true"] {
 		--db-icon-margin-end: 0;
-		--db-icon-passing-inline-start: calc(50% - 0.5em);
+		--db-icon-passing-inset-inline-start: calc(50% - 0.5em);
 	}
 
 	label:has(input:checked) {

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

@@ -3,19 +3,14 @@
 /* Variants for adaptive components like input, select, notification, ... */
 .db-custom-select[data-hide-label=true] > label, .db-visually-hidden,
 [data-visually-hidden=true] {
-  clip: rect(0, 0, 0, 0) !important;
-  overflow: hidden !important;
-  white-space: nowrap !important;
-  font-size: 0 !important;
-  all: initial;
-  inset-block-start: 0 !important;
-  block-size: 1px !important;
   position: absolute !important;
+  inset-block-start: 0 !important;
   inline-size: 1px !important;
-  border-width: 0 !important;
-  border-style: initial !important;
-  border-color: initial !important;
-  border-image: initial !important;
+  block-size: 1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
   padding: 0 !important;
   pointer-events: none !important;
 }
@@ -1030,18 +1025,24 @@ summary[aria-disabled=true]) {
   content: "";
   background-color: var(--db-divider-bg-color);
   position: absolute;
+  /* jscpd:ignore-start */
   inline-size: var(--db-border-width-3xs);
   inset-inline-end: 0;
   inset-block: 0;
+  /* stylelint-disable-next-line db-ux/use-border-color */
 }
 @media (forced-colors: active) {
-  .db-custom-select > db-button > .db-button[data-icon=cross][data-variant=ghost],
-  .db-custom-select > .db-button[data-icon=cross][data-variant=ghost] {
-    /* stylelint-disable-next-line no-invalid-position-declaration, db-ux/use-border-color */
-    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .db-custom-select > db-button > .db-button[data-icon=cross][data-variant=ghost]::after,
+  .db-custom-select > .db-button[data-icon=cross][data-variant=ghost]::after {
+    /* stylelint-disable-next-line db-ux/use-border-color */
+    border-inline-end: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
 .db-custom-select > db-button > .db-button[data-icon=cross][data-variant=ghost]::after,
+.db-custom-select > .db-button[data-icon=cross][data-variant=ghost]::after {
+  /* jscpd:ignore-end */
+}
+.db-custom-select > db-button > .db-button[data-icon=cross][data-variant=ghost]::after,
 .db-custom-select > .db-button[data-icon=cross][data-variant=ghost]::after {
   position: absolute;
   inset-inline-end: calc(-1 * var(--db-spacing-fixed-xs) - var(--db-border-width-3xs));
@@ -1054,7 +1055,7 @@ summary[aria-disabled=true]) {
   flex-wrap: wrap;
 }
 .db-custom-select[data-selected-type=tag] .db-custom-select-form-field > button {
-  align-self: start;
+  align-self: flex-start;
 }
 .db-custom-select > details[open] > summary[data-force-mobile=true]::before {
   position: fixed;

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

@@ -102,7 +102,7 @@
 			}
 
 			> button {
-				align-self: start;
+				align-self: flex-start;
 			}
 		}
 	}

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

@@ -3,19 +3,14 @@
 /* Variants for adaptive components like input, select, notification, ... */
 .db-visually-hidden,
 [data-visually-hidden=true] {
-  clip: rect(0, 0, 0, 0) !important;
-  overflow: hidden !important;
-  white-space: nowrap !important;
-  font-size: 0 !important;
-  all: initial;
-  inset-block-start: 0 !important;
-  block-size: 1px !important;
   position: absolute !important;
+  inset-block-start: 0 !important;
   inline-size: 1px !important;
-  border-width: 0 !important;
-  border-style: initial !important;
-  border-color: initial !important;
-  border-image: initial !important;
+  block-size: 1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
   padding: 0 !important;
   pointer-events: none !important;
 }
@@ -249,18 +244,24 @@
   content: "";
   background-color: var(--db-divider-bg-color);
   position: absolute;
+  /* jscpd:ignore-start */
   block-size: var(--db-border-width-3xs);
   inset-block-end: 0;
   inset-inline: 0;
-  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* stylelint-disable-next-line db-ux/use-border-color */
 }
 @media (forced-colors: active) {
-  .db-custom-select-dropdown > db-custom-select-list > div:not([class~=db-custom-select-list]):has(.db-checkbox),
-  .db-custom-select-dropdown > div:not([class~=db-custom-select-list]):has(.db-checkbox) {
-    /* stylelint-disable-next-line no-invalid-position-declaration, db-ux/use-border-color */
-    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .db-custom-select-dropdown > db-custom-select-list > div:not([class~=db-custom-select-list]):has(.db-checkbox)::after,
+  .db-custom-select-dropdown > div:not([class~=db-custom-select-list]):has(.db-checkbox)::after {
+    /* stylelint-disable-next-line db-ux/use-border-color */
+    border-block-end: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
+.db-custom-select-dropdown > db-custom-select-list > div:not([class~=db-custom-select-list]):has(.db-checkbox)::after,
+.db-custom-select-dropdown > div:not([class~=db-custom-select-list]):has(.db-checkbox)::after {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* jscpd:ignore-end */
+}
 .db-custom-select-dropdown > db-custom-select-list > div:not([class~=db-custom-select-list]):has(.db-button), .db-custom-select-dropdown > db-custom-select-list > div:not([class~=db-custom-select-list]):has(.db-input),
 .db-custom-select-dropdown > div:not([class~=db-custom-select-list]):has(.db-button),
 .db-custom-select-dropdown > div:not([class~=db-custom-select-list]):has(.db-input) {
@@ -280,18 +281,24 @@
   content: "";
   background-color: var(--db-divider-bg-color);
   position: absolute;
+  /* jscpd:ignore-start */
   block-size: var(--db-border-width-3xs);
   inset-block-end: 0;
   inset-inline: 0;
-  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* stylelint-disable-next-line db-ux/use-border-color */
 }
 @media (forced-colors: active) {
-  .db-custom-select-dropdown > db-custom-select-list > div:not([class~=db-custom-select-list]):has(.db-input),
-  .db-custom-select-dropdown > div:not([class~=db-custom-select-list]):has(.db-input) {
-    /* stylelint-disable-next-line no-invalid-position-declaration, db-ux/use-border-color */
-    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .db-custom-select-dropdown > db-custom-select-list > div:not([class~=db-custom-select-list]):has(.db-input)::after,
+  .db-custom-select-dropdown > div:not([class~=db-custom-select-list]):has(.db-input)::after {
+    /* stylelint-disable-next-line db-ux/use-border-color */
+    border-block-end: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
+.db-custom-select-dropdown > db-custom-select-list > div:not([class~=db-custom-select-list]):has(.db-input)::after,
+.db-custom-select-dropdown > div:not([class~=db-custom-select-list]):has(.db-input)::after {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* jscpd:ignore-end */
+}
 .db-custom-select-dropdown > db-custom-select-list > div:not([class~=db-custom-select-list]):has(.db-button),
 .db-custom-select-dropdown > div:not([class~=db-custom-select-list]):has(.db-button) {
   --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
@@ -306,18 +313,24 @@
   content: "";
   background-color: var(--db-divider-bg-color);
   position: absolute;
+  /* jscpd:ignore-start */
   block-size: var(--db-border-width-3xs);
   inset-block-start: 0;
   inset-inline: 0;
-  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* stylelint-disable-next-line db-ux/use-border-color */
 }
 @media (forced-colors: active) {
-  .db-custom-select-dropdown > db-custom-select-list > div:not([class~=db-custom-select-list]):has(.db-button),
-  .db-custom-select-dropdown > div:not([class~=db-custom-select-list]):has(.db-button) {
-    /* stylelint-disable-next-line no-invalid-position-declaration, db-ux/use-border-color */
-    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .db-custom-select-dropdown > db-custom-select-list > div:not([class~=db-custom-select-list]):has(.db-button)::after,
+  .db-custom-select-dropdown > div:not([class~=db-custom-select-list]):has(.db-button)::after {
+    /* stylelint-disable-next-line db-ux/use-border-color */
+    border-block-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
+.db-custom-select-dropdown > db-custom-select-list > div:not([class~=db-custom-select-list]):has(.db-button)::after,
+.db-custom-select-dropdown > div:not([class~=db-custom-select-list]):has(.db-button)::after {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* jscpd:ignore-end */
+}
 .db-custom-select-dropdown > db-custom-select-list > div:not([class~=db-custom-select-list]):has(.db-button),
 .db-custom-select-dropdown > div:not([class~=db-custom-select-list]):has(.db-button) {
   /* stylelint-disable-next-line media-query-no-invalid */

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

@@ -1,18 +1,13 @@
 .db-visually-hidden,
 [data-visually-hidden=true] {
-  clip: rect(0, 0, 0, 0) !important;
-  overflow: hidden !important;
-  white-space: nowrap !important;
-  font-size: 0 !important;
-  all: initial;
-  inset-block-start: 0 !important;
-  block-size: 1px !important;
   position: absolute !important;
+  inset-block-start: 0 !important;
   inline-size: 1px !important;
-  border-width: 0 !important;
-  border-style: initial !important;
-  border-color: initial !important;
-  border-image: initial !important;
+  block-size: 1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
   padding: 0 !important;
   pointer-events: none !important;
 }

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

@@ -1,18 +1,13 @@
 .db-custom-select-list > legend, .db-visually-hidden,
 [data-visually-hidden=true] {
-  clip: rect(0, 0, 0, 0) !important;
-  overflow: hidden !important;
-  white-space: nowrap !important;
-  font-size: 0 !important;
-  all: initial;
-  inset-block-start: 0 !important;
-  block-size: 1px !important;
   position: absolute !important;
+  inset-block-start: 0 !important;
   inline-size: 1px !important;
-  border-width: 0 !important;
-  border-style: initial !important;
-  border-color: initial !important;
-  border-image: initial !important;
+  block-size: 1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
   padding: 0 !important;
   pointer-events: none !important;
 }