@db-ux/core-components 2.0.8 → 2.0.10-popover-d7e8b9a

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

@@ -325,11 +325,17 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   }
 }
 
-.db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(.db-infotext[data-semantic=successful]), .db-custom-select:has(select[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]), .db-custom-select[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) {
+.db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
+> db-infotext > .db-infotext[data-semantic=successful]), .db-custom-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
+> db-infotext > .db-infotext[data-semantic=successful]), .db-custom-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
+> db-infotext > .db-infotext[data-semantic=successful]) {
   /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
 }
 @layer variables {
-  .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(.db-infotext[data-semantic=successful]), .db-custom-select:has(select[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]), .db-custom-select[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) {
+  .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
+  > db-infotext > .db-infotext[data-semantic=successful]), .db-custom-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
+  > db-infotext > .db-infotext[data-semantic=successful]), .db-custom-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
+  > db-infotext > .db-infotext[data-semantic=successful]) {
     --db-adaptive-bg-basic-level-1-default: var(
     	--db-successful-bg-basic-level-1-default
     );
@@ -496,6 +502,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+@layer variables {}
+
+@layer variables {}
+
 /**
  * @mixin screen-min-max
  * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
@@ -677,10 +687,12 @@ input[type=radio]:checked) > label {
   }
 }
 
-.db-custom-select .db-infotext {
+.db-custom-select > db-infotext > .db-infotext,
+.db-custom-select > .db-infotext {
   margin-block-start: var(--db-spacing-fixed-2xs);
 }
-.db-custom-select .db-infotext:is([data-semantic=successful], [data-semantic=critical]) {
+.db-custom-select > db-infotext > .db-infotext:is([data-semantic=successful], [data-semantic=critical]),
+.db-custom-select > .db-infotext:is([data-semantic=successful], [data-semantic=critical]) {
   display: none;
 }
 
@@ -737,85 +749,6 @@ input[type=radio]:checked) > label {
   inline-size: calc(100% - var(--db-form-component-padding-inline-end) - calc(var(--db-form-has-before) * (var(--db-base-body-icon-font-size-sm) + var(--db-spacing-fixed-sm))) - var(--db-spacing-fixed-sm));
 }
 
-@keyframes show-right-to-left {
-  from {
-    transform: translateX(110%);
-  }
-  to {
-    transform: translateX(0%);
-  }
-}
-@keyframes hide-right-to-left {
-  from {
-    transform: translateX(0%);
-  }
-  to {
-    transform: translateX(110%);
-  }
-}
-@keyframes show-left-to-right {
-  from {
-    transform: translateX(-110%);
-  }
-  to {
-    transform: translateX(0%);
-  }
-}
-@keyframes hide-left-to-right {
-  from {
-    transform: translateX(0%);
-  }
-  to {
-    transform: translateX(-110%);
-  }
-}
-@keyframes show-bottom-to-top {
-  from {
-    transform: translateY(110%);
-  }
-  to {
-    transform: translateY(0%);
-  }
-}
-@keyframes hide-bottom-to-top {
-  from {
-    transform: translateY(0%);
-  }
-  to {
-    transform: translateY(110%);
-  }
-}
-@keyframes show-top-to-bottom {
-  from {
-    transform: translateY(-110%);
-  }
-  to {
-    transform: translateY(0%);
-  }
-}
-@keyframes hide-top-to-bottom {
-  from {
-    transform: translateY(0%);
-  }
-  to {
-    transform: translateY(-110%);
-  }
-}
-@keyframes popover-animation {
-  0% {
-    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% {
-    opacity: 1;
-    transform: translate(var(--db-popover-center-x, 0%), var(--db-popover-center-y, 0%));
-  }
-}
-@keyframes rotate {
-  100% {
-    transform: rotate(1turn);
-  }
-}
 dialog[data-variant], dialog[data-backdrop] {
   position: fixed;
   inset: 0;
@@ -845,40 +778,6 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
   opacity: 0.32;
 }
 
-[data-placement^=top].db-custom-select .db-custom-select-dropdown:not([data-outside-vy=top]), .db-custom-select:not([data-placement]) .db-custom-select-dropdown[data-outside-vy=bottom], [data-placement^=bottom].db-custom-select .db-custom-select-dropdown[data-outside-vy=bottom] {
-  /* stylelint-disable-next-line media-query-no-invalid */
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-}
-@media screen and (min-width: 45em) {
-  [data-placement^=top].db-custom-select .db-custom-select-dropdown:not([data-force-mobile]):not([data-outside-vy=top]), .db-custom-select:not([data-placement]) .db-custom-select-dropdown[data-outside-vy=bottom]:not([data-force-mobile]), [data-placement^=bottom].db-custom-select .db-custom-select-dropdown[data-outside-vy=bottom]:not([data-force-mobile]), [data-placement^=top].db-custom-select [data-force-mobile=false].db-custom-select-dropdown:not([data-outside-vy=top]), .db-custom-select:not([data-placement]) [data-force-mobile=false].db-custom-select-dropdown[data-outside-vy=bottom], [data-placement^=bottom].db-custom-select [data-force-mobile=false].db-custom-select-dropdown[data-outside-vy=bottom] {
-    inset-block-end: 100%;
-    margin-block-start: var(--db-spacing-fixed-md);
-  }
-}
-
-[data-placement^=top].db-custom-select, .db-custom-select:not([data-placement]), [data-placement^=bottom].db-custom-select {
-  /* stylelint-disable-next-line media-query-no-invalid */
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-}
-@media screen and (min-width: 45em) {
-  [data-placement^=top].db-custom-select:not([data-force-mobile])[data-placement$=end] .db-custom-select-dropdown:not([data-outside-vx=right]), .db-custom-select:not([data-force-mobile])[data-placement$=end]:not([data-placement]) .db-custom-select-dropdown:not([data-outside-vx=right]), [data-placement^=bottom].db-custom-select:not([data-force-mobile])[data-placement$=end] .db-custom-select-dropdown:not([data-outside-vx=right]), [data-force-mobile=false][data-placement$=end][data-placement^=top].db-custom-select .db-custom-select-dropdown:not([data-outside-vx=right]), [data-force-mobile=false][data-placement$=end].db-custom-select:not([data-placement]) .db-custom-select-dropdown:not([data-outside-vx=right]), [data-force-mobile=false][data-placement$=end][data-placement^=bottom].db-custom-select .db-custom-select-dropdown:not([data-outside-vx=right]) {
-    inset-inline-end: 0;
-  }
-  [data-placement^=top].db-custom-select:not([data-force-mobile]) .db-custom-select-dropdown[data-outside-vx=right], .db-custom-select:not([data-force-mobile]):not([data-placement]) .db-custom-select-dropdown[data-outside-vx=right], [data-placement^=bottom].db-custom-select:not([data-force-mobile]) .db-custom-select-dropdown[data-outside-vx=right], [data-force-mobile=false][data-placement^=top].db-custom-select .db-custom-select-dropdown[data-outside-vx=right], [data-force-mobile=false].db-custom-select:not([data-placement]) .db-custom-select-dropdown[data-outside-vx=right], [data-force-mobile=false][data-placement^=bottom].db-custom-select .db-custom-select-dropdown[data-outside-vx=right] {
-    inset-inline-end: 0;
-  }
-}
-
-.db-custom-select:not([data-placement]) .db-custom-select-dropdown:not([data-outside-vy=bottom]), [data-placement^=bottom].db-custom-select .db-custom-select-dropdown:not([data-outside-vy=bottom]) {
-  /* stylelint-disable-next-line media-query-no-invalid */
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-}
-@media screen and (min-width: 45em) {
-  .db-custom-select:not([data-placement]) .db-custom-select-dropdown:not([data-outside-vy=bottom]):not([data-force-mobile]), .db-custom-select:not([data-placement]) .db-custom-select-dropdown:not([data-outside-vy=bottom])[data-force-mobile=false], [data-placement^=bottom].db-custom-select .db-custom-select-dropdown:not([data-outside-vy=bottom]):not([data-force-mobile]), [data-placement^=bottom].db-custom-select .db-custom-select-dropdown:not([data-outside-vy=bottom])[data-force-mobile=false] {
-    inset-block-start: 100%;
-    margin-block-end: var(--db-spacing-fixed-md);
-  }
-}
 .db-custom-select {
   --db-form-component-padding-inline-end: calc(
   	calc(var(--db-icon-font-size) + var(--db-spacing-fixed-sm) + var(--db-spacing-fixed-xs)) + var(--db-sizing-sm) +
@@ -989,39 +888,75 @@ input[type=radio]:checked) [id$=-placeholder] {
     content: "*"/"";
   }
 }
-.db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(.db-infotext[data-semantic=successful]) {
+.db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
+> db-infotext > .db-infotext[data-semantic=successful]) {
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
-.db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(.db-infotext[data-semantic=successful]) summary,
-.db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(.db-infotext[data-semantic=successful]) [id$=-placeholder] {
+.db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
+> db-infotext > .db-infotext[data-semantic=successful]) summary,
+.db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
+> db-infotext > .db-infotext[data-semantic=successful]) [id$=-placeholder] {
   color: var(--db-successful-on-bg-basic-emphasis-100-default);
   caret-color: var(--db-successful-on-bg-basic-emphasis-100-default);
 }
-.db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(.db-infotext[data-semantic=successful]) .db-infotext {
+.db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
+> db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
+.db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
+> db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext {
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
-.db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(.db-infotext[data-semantic=successful]) .db-infotext[data-semantic=successful] {
+.db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
+> db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful],
+.db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
+> db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful] {
   display: flex;
 }
-.db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(.db-infotext[data-semantic=successful]) .db-infotext:not([data-semantic]) {
+.db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
+> db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]),
+.db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
+> db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]) {
   display: none;
 }
-.db-custom-select:has(select[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]), .db-custom-select[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) {
+.db-custom-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
+> db-infotext > .db-infotext[data-semantic=successful]), .db-custom-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
+> db-infotext > .db-infotext[data-semantic=successful]) {
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
-.db-custom-select:has(select[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) summary,
-.db-custom-select:has(select[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) [id$=-placeholder], .db-custom-select[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) summary,
-.db-custom-select[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) [id$=-placeholder] {
+.db-custom-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
+> db-infotext > .db-infotext[data-semantic=successful]) summary,
+.db-custom-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
+> db-infotext > .db-infotext[data-semantic=successful]) [id$=-placeholder], .db-custom-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
+> db-infotext > .db-infotext[data-semantic=successful]) summary,
+.db-custom-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
+> db-infotext > .db-infotext[data-semantic=successful]) [id$=-placeholder] {
   color: var(--db-successful-on-bg-basic-emphasis-100-default);
   caret-color: var(--db-successful-on-bg-basic-emphasis-100-default);
 }
-.db-custom-select:has(select[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) .db-infotext, .db-custom-select[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) .db-infotext {
+.db-custom-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
+> db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
+.db-custom-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
+> db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext, .db-custom-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
+> db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
+.db-custom-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
+> db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext {
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
-.db-custom-select:has(select[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) .db-infotext[data-semantic=successful], .db-custom-select[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) .db-infotext[data-semantic=successful] {
+.db-custom-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
+> db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful],
+.db-custom-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
+> db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful], .db-custom-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
+> db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful],
+.db-custom-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
+> db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful] {
   display: flex;
 }
-.db-custom-select:has(select[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) .db-infotext:not([data-semantic]), .db-custom-select[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) .db-infotext:not([data-semantic]) {
+.db-custom-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
+> db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]),
+.db-custom-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
+> db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]), .db-custom-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
+> db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]),
+.db-custom-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
+> db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]) {
   display: none;
 }
 .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-invalid) {
@@ -1032,10 +967,12 @@ input[type=radio]:checked) [id$=-placeholder] {
   color: var(--db-critical-on-bg-basic-emphasis-100-default);
   caret-color: var(--db-critical-on-bg-basic-emphasis-100-default);
 }
-.db-custom-select:has(select:not([data-custom-validity]):is(:required):user-invalid) .db-infotext[data-semantic=critical] {
+.db-custom-select:has(select:not([data-custom-validity]):is(:required):user-invalid) > db-infotext > .db-infotext[data-semantic=critical],
+.db-custom-select:has(select:not([data-custom-validity]):is(:required):user-invalid) > .db-infotext[data-semantic=critical] {
   display: flex;
 }
-.db-custom-select:has(select:not([data-custom-validity]):is(:required):user-invalid) .db-infotext:not([data-semantic]) {
+.db-custom-select:has(select:not([data-custom-validity]):is(:required):user-invalid) > db-infotext > .db-infotext:not([data-semantic]),
+.db-custom-select:has(select:not([data-custom-validity]):is(:required):user-invalid) > .db-infotext:not([data-semantic]) {
   display: none;
 }
 .db-custom-select:has(select[data-custom-validity=invalid]), .db-custom-select[data-custom-validity=invalid] {
@@ -1047,10 +984,14 @@ input[type=radio]:checked) [id$=-placeholder] {
   color: var(--db-critical-on-bg-basic-emphasis-100-default);
   caret-color: var(--db-critical-on-bg-basic-emphasis-100-default);
 }
-.db-custom-select:has(select[data-custom-validity=invalid]) .db-infotext[data-semantic=critical], .db-custom-select[data-custom-validity=invalid] .db-infotext[data-semantic=critical] {
+.db-custom-select:has(select[data-custom-validity=invalid]) > db-infotext > .db-infotext[data-semantic=critical],
+.db-custom-select:has(select[data-custom-validity=invalid]) > .db-infotext[data-semantic=critical], .db-custom-select[data-custom-validity=invalid] > db-infotext > .db-infotext[data-semantic=critical],
+.db-custom-select[data-custom-validity=invalid] > .db-infotext[data-semantic=critical] {
   display: flex;
 }
-.db-custom-select:has(select[data-custom-validity=invalid]) .db-infotext:not([data-semantic]), .db-custom-select[data-custom-validity=invalid] .db-infotext:not([data-semantic]) {
+.db-custom-select:has(select[data-custom-validity=invalid]) > db-infotext > .db-infotext:not([data-semantic]),
+.db-custom-select:has(select[data-custom-validity=invalid]) > .db-infotext:not([data-semantic]), .db-custom-select[data-custom-validity=invalid] > db-infotext > .db-infotext:not([data-semantic]),
+.db-custom-select[data-custom-validity=invalid] > .db-infotext:not([data-semantic]) {
   display: none;
 }
 .db-custom-select summary::placeholder,

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

@@ -5,56 +5,8 @@
 @use "../../styles/internal/form-components";
 @use "../../styles/internal/component";
 @use "../../styles/internal/select-components";
-@use "../../styles/internal/scrollbar";
 @use "../../styles/dialog-init";
 
-%custom-select-placement-top {
-	@include screen-sizes.screen("sm") {
-		inset-block-end: 100%;
-		margin-block-start: variables.$db-spacing-fixed-md;
-	}
-}
-
-%custom-select-placement-vertical {
-	@include screen-sizes.screen("sm") {
-		&[data-placement$="end"] {
-			.db-custom-select-dropdown:not([data-outside-vx="right"]) {
-				inset-inline-end: 0;
-			}
-		}
-
-		.db-custom-select-dropdown[data-outside-vx="right"] {
-			inset-inline-end: 0;
-		}
-	}
-}
-
-%custom-select-placement {
-	&:not([data-placement]),
-	&[data-placement^="bottom"] {
-		@extend %custom-select-placement-vertical;
-
-		.db-custom-select-dropdown:not([data-outside-vy="bottom"]) {
-			@include screen-sizes.screen("sm") {
-				inset-block-start: 100%;
-				margin-block-end: variables.$db-spacing-fixed-md;
-			}
-		}
-
-		.db-custom-select-dropdown[data-outside-vy="bottom"] {
-			@extend %custom-select-placement-top;
-		}
-	}
-
-	&[data-placement^="top"] {
-		@extend %custom-select-placement-vertical;
-
-		.db-custom-select-dropdown:not([data-outside-vy="top"]) {
-			@extend %custom-select-placement-top;
-		}
-	}
-}
-
 .db-custom-select {
 	--db-form-component-padding-inline-end: calc(
 		#{select-components.$select-icon-padding} + #{variables.$db-sizing-sm} +
@@ -68,7 +20,6 @@
 
 	@extend %select-icon;
 	@extend %select-placeholder;
-	@extend %custom-select-placement;
 
 	position: relative;
 

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

@@ -202,6 +202,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+@layer variables {}
+
+@layer variables {}
+
 /**
  * @mixin screen-min-max
  * @param $data an object like (min:"sm", max:"lg") or (min: "sm")

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

@@ -55,6 +55,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+@layer variables {}
+
+@layer variables {}
+
 /**
 	Generates 3 types of placeholders, e.g:
 	- %db-component-variables-md

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

@@ -55,6 +55,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+@layer variables {}
+
+@layer variables {}
+
 /**
 	Generates 3 types of placeholders, e.g:
 	- %db-component-variables-md
@@ -119,159 +123,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
  * @mixin screen-min-max
  * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
  */
-.db-custom-select-list::-webkit-scrollbar, .db-custom-select-list::-webkit-scrollbar-corner {
-  transition: outline var(--db-transition-duration-extra-fast), border-color var(--db-transition-straight-emotional), background-color var(--db-transition-straight-emotional);
-}
-
-@keyframes show-right-to-left {
-  from {
-    transform: translateX(110%);
-  }
-  to {
-    transform: translateX(0%);
-  }
-}
-@keyframes hide-right-to-left {
-  from {
-    transform: translateX(0%);
-  }
-  to {
-    transform: translateX(110%);
-  }
-}
-@keyframes show-left-to-right {
-  from {
-    transform: translateX(-110%);
-  }
-  to {
-    transform: translateX(0%);
-  }
-}
-@keyframes hide-left-to-right {
-  from {
-    transform: translateX(0%);
-  }
-  to {
-    transform: translateX(-110%);
-  }
-}
-@keyframes show-bottom-to-top {
-  from {
-    transform: translateY(110%);
-  }
-  to {
-    transform: translateY(0%);
-  }
-}
-@keyframes hide-bottom-to-top {
-  from {
-    transform: translateY(0%);
-  }
-  to {
-    transform: translateY(110%);
-  }
-}
-@keyframes show-top-to-bottom {
-  from {
-    transform: translateY(-110%);
-  }
-  to {
-    transform: translateY(0%);
-  }
-}
-@keyframes hide-top-to-bottom {
-  from {
-    transform: translateY(0%);
-  }
-  to {
-    transform: translateY(-110%);
-  }
-}
-@keyframes popover-animation {
-  0% {
-    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% {
-    opacity: 1;
-    transform: translate(var(--db-popover-center-x, 0%), var(--db-popover-center-y, 0%));
-  }
-}
-@keyframes rotate {
-  100% {
-    transform: rotate(1turn);
-  }
-}
-.db-custom-select-list {
-  /* Buttons */
-  /* Up */
-  /* Down */
-  /* Left */
-  /* Right */
-}
-.db-custom-select-list::-webkit-scrollbar {
-  z-index: 3;
-  inline-size: 0.5rem;
-  block-size: 0.5rem;
-  background-color: var(--db-adaptive-bg-basic-level-1-default);
-  border-start-end-radius: var(--db-border-radius-xs);
-}
-.db-custom-select-list:is(:hover, :focus)::-webkit-scrollbar-track, .db-custom-select-list:is(:hover, :focus)::-webkit-scrollbar-button:single-button {
-  background-color: var(--db-adaptive-bg-basic-transparent-hovered);
-}
-.db-custom-select-list:read-only::-webkit-scrollbar-track, .db-custom-select-list:read-only::-webkit-scrollbar-button:single-button {
-  background-color: var(--db-adaptive-bg-basic-level-1-default);
-}
-.db-custom-select-list::-webkit-scrollbar-track {
-  background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
-}
-.db-custom-select-list::-webkit-scrollbar-thumb {
-  background-color: var(--db-adaptive-bg-basic-transparent-pressed);
-}
-.db-custom-select-list::-webkit-scrollbar-button:single-button {
-  background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
-  background-size: 0.5rem;
-  background-repeat: no-repeat;
-  background-position: center;
-  block-size: calc(var(--db-spacing-fixed-3xs) + var(--db-spacing-fixed-2xs) + var(--db-base-body-icon-font-size-2xs));
-}
-.db-custom-select-list::-webkit-scrollbar-button:single-button:is(:hover, :focus) {
-  background-color: var(--db-adaptive-bg-basic-transparent-hovered);
-}
-.db-custom-select-list::-webkit-scrollbar-button:single-button:active {
-  background-color: var(--db-adaptive-bg-basic-transparent-pressed);
-}
-.db-custom-select-list::-webkit-scrollbar-button:single-button:vertical:decrement {
-  border-start-end-radius: var(--db-border-radius-xs);
-  background-image: var(--db-scrollbar-button-vertical-decrement);
-}
-.db-custom-select-list::-webkit-scrollbar-button:single-button:vertical:increment {
-  background-image: var(--db-scrollbar-button-vertical-increment);
-}
-.db-custom-select-list::-webkit-scrollbar-button:single-button:horizontal:decrement {
-  background-image: var(--db-scrollbar-button-horizontal-decrement);
-}
-.db-custom-select-list::-webkit-scrollbar-button:single-button:horizontal:increment {
-  background-image: var(--db-scrollbar-button-horizontal-increment);
-}
-[data-variant=floating].db-custom-select-list::-webkit-resizer {
-  background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
-}
-[data-variant=floating].db-custom-select-list::-webkit-scrollbar-corner {
-  background-color: var(--db-adaptive-bg-basic-level-1-default);
-}
-.db-custom-select-list::-webkit-resizer {
-  background-color: var(--db-adaptive-bg-basic-transparent-full-default);
-  background-size: 0.5rem;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-image: var(--db-textarea-resizer-image);
-  border-end-end-radius: var(--db-border-radius-xs);
-}
-.db-custom-select-list::-webkit-scrollbar-corner {
-  border-end-end-radius: var(--db-border-radius-xs);
-}
-
 .db-custom-select-list {
   all: unset;
   padding: var(--db-spacing-fixed-sm);

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

@@ -1,10 +1,7 @@
 @use "@db-ux/core-foundations/build/styles/variables";
 @use "../../styles/internal/form-components";
-@use "../../styles/internal/scrollbar";
 
 .db-custom-select-list {
-	@extend %scrollbar;
-
 	all: unset;
 	padding: variables.$db-spacing-fixed-sm;
 	overflow-y: auto;

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

@@ -55,6 +55,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+@layer variables {}
+
+@layer variables {}
+
 .db-custom-select-list-item:not([data-disable-focus=true]):has(> label > input:focus-within) {
   outline: var(--db-border-width-2xs) solid var(--db-focus-outline-color, var(--db-informational-on-bg-basic-emphasis-70-default));
   outline-offset: var(--db-border-width-xs);
@@ -225,6 +229,7 @@ db-custom-select-list-item:not(:last-of-type) .db-custom-select-list-item[data-d
 }
 .db-custom-select-list-item > label {
   --db-icon-margin-start: auto;
+  --db-check-element-label-color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
   inline-size: 100%;
 }
 .db-custom-select-list-item > label:has(input:checked) {
@@ -239,7 +244,8 @@ db-custom-select-list-item:not(:last-of-type) .db-custom-select-list-item[data-d
   --db-icon-after: "check";
 }
 .db-custom-select-list-item > label > input {
-  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
+  --db-adaptive-bg-basic-transparent-hovered: var(--db-adaptive-bg-basic-transparent-full-default);
+  --db-adaptive-bg-basic-transparent-pressed: var(--db-adaptive-bg-basic-transparent-full-default);
   /* We set focus on complete list element, we remove it from checkbox with this trick */
   /* stylelint-disable-next-line a11y/no-outline-none */
 }
@@ -252,26 +258,6 @@ db-custom-select-list-item:not(:last-of-type) .db-custom-select-list-item[data-d
 .db-custom-select-list-item > label > input[type=radio] {
   all: unset;
 }
-.db-custom-select-list-item > label > input:hover:not(:disabled, [aria-disabled=true]) {
-  cursor: var(--db-overwrite-cursor, pointer);
-  background-color: var(--db-adaptive-bg-basic-transparent-full-default);
-}
-.db-custom-select-list-item > label > input:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-custom-select-list-item > label > input:hover:not(:disabled, [aria-disabled=true]):is(input) {
-  cursor: initial;
-}
-.db-custom-select-list-item > label > input:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-custom-select-list-item > label > input:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
-  cursor: pointer;
-}
-.db-custom-select-list-item > label > input:active:not(:disabled, [aria-disabled=true]) {
-  cursor: var(--db-overwrite-cursor, pointer);
-  background-color: var(--db-adaptive-bg-basic-transparent-full-default);
-}
-.db-custom-select-list-item > label > input:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-custom-select-list-item > label > input:active:not(:disabled, [aria-disabled=true]):is(input) {
-  cursor: initial;
-}
-.db-custom-select-list-item > label > input:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-custom-select-list-item > label > input:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
-  cursor: pointer;
-}
 .db-custom-select-list-item > label > input:focus-visible {
   outline: none !important;
 }

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

@@ -50,6 +50,7 @@ db-custom-select-list-item:not(:last-of-type) {
 
 	> label {
 		--db-icon-margin-start: auto;
+		--db-check-element-label-color: #{colors.$db-adaptive-on-bg-basic-emphasis-100-default};
 
 		inline-size: 100%;
 
@@ -69,6 +70,10 @@ db-custom-select-list-item:not(:last-of-type) {
 		}
 
 		> input {
+			// We revert interaction states for checkbox
+			--db-adaptive-bg-basic-transparent-hovered: #{colors.$db-adaptive-bg-basic-transparent-full-default};
+			--db-adaptive-bg-basic-transparent-pressed: #{colors.$db-adaptive-bg-basic-transparent-full-default};
+
 			&::after {
 				position: absolute;
 				content: "";
@@ -80,15 +85,6 @@ db-custom-select-list-item:not(:last-of-type) {
 				all: unset;
 			}
 
-			// We revert interaction states for checkbox
-			@include helpers.hover {
-				background-color: colors.$db-adaptive-bg-basic-transparent-full-default;
-			}
-
-			@include helpers.active {
-				background-color: colors.$db-adaptive-bg-basic-transparent-full-default;
-			}
-
 			/* We set focus on complete list element, we remove it from checkbox with this trick */
 			/* stylelint-disable-next-line a11y/no-outline-none */
 			&:focus-visible {

package/build/components/divider/divider.css

@@ -36,6 +36,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+@layer variables {}
+
+@layer variables {}
+
 .db-divider:is(:not([data-margin]), [data-margin=small]) {
   margin: var(--db-spacing-fixed-sm) 0;
 }