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

package/build/components/accordion/accordion.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 {}
+
 /**
  * @mixin screen-min-max
  * @param $data an object like (min:"sm", max:"lg") or (min: "sm")

package/build/components/accordion-item/accordion-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 {}
+
 @keyframes show-right-to-left {
   from {
     transform: translateX(110%);
@@ -134,7 +138,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     transform: rotate(1turn);
   }
 }
-.db-accordion-item summary:not([data-hide-icon-after=true])::after {
+.db-accordion-item > details > summary:not([data-hide-icon-after=true])::after {
   color: var(--db-icon-color, inherit);
   display: inline-block;
   /*** icon - placeholder ***/
@@ -157,17 +161,17 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   content: var(--db-icon, attr(data-icon));
 }
 @supports (content: ""/"") {
-  .db-accordion-item summary:not([data-hide-icon-after=true])::after {
+  .db-accordion-item > details > summary:not([data-hide-icon-after=true])::after {
     content: var(--db-icon, attr(data-icon))/"";
   }
 }
 @media aural {
-  .db-accordion-item summary:not([data-hide-icon-after=true])::after {
+  .db-accordion-item > details > summary:not([data-hide-icon-after=true])::after {
     content: none;
   }
 }
 @media speech {
-  .db-accordion-item summary:not([data-hide-icon-after=true])::after {
+  .db-accordion-item > details > summary:not([data-hide-icon-after=true])::after {
     content: none;
   }
 }
@@ -204,12 +208,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-.db-accordion-item summary {
+.db-accordion-item > details > summary {
   font: var(--db-type-body-md);
   /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
 }
 @layer variables {
-  .db-accordion-item summary {
+  .db-accordion-item > details > summary {
     /* Those variables are only for components to calculate heights and change icons */
     --db-icon-font-weight: var(--db-base-body-icon-weight-md);
     --db-icon-font-size: var(--db-base-body-icon-font-size-md);
@@ -246,21 +250,21 @@ 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-accordion-item summary:not([data-hide-icon-after=true])::after {
+.db-accordion-item > details > summary:not([data-hide-icon-after=true])::after {
   --db-icon-after: "chevron_down";
   margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
   content: var(--db-icon-after, attr(data-icon-after));
 }
 @supports (content: ""/"") {
-  .db-accordion-item summary:not([data-hide-icon-after=true])::after {
+  .db-accordion-item > details > summary:not([data-hide-icon-after=true])::after {
     content: var(--db-icon-after, attr(data-icon-after))/"";
   }
 }
-.db-accordion-item summary::after {
+.db-accordion-item > details > summary::after {
   pointer-events: none;
 }
 @media screen and (prefers-reduced-motion: no-preference) {
-  .db-accordion-item summary::after {
+  .db-accordion-item > details > summary::after {
     transition: transform var(--db-transition-straight-emotional);
   }
 }
@@ -271,35 +275,30 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   border-radius: var(--db-border-radius-sm);
   list-style-type: "";
 }
-.db-accordion-item > details[open] summary + div {
+.db-accordion-item > details[open] > summary + div {
   block-size: auto;
   /* stylelint-disable-next-line declaration-property-value-no-unknown */
   block-size: calc-size(auto, size);
 }
-.db-accordion-item > details[open] summary::after {
+.db-accordion-item > details[open] > summary::after {
   transform: rotate(-180deg);
 }
 .db-accordion-item > details[aria-disabled=true] {
   pointer-events: none;
   opacity: 0.4;
 }
-@media screen and (prefers-reduced-motion: reduce) {
-  .db-accordion-item summary + div {
-    block-size: 0;
-    overflow: hidden;
-    transition: none;
-    padding: var(--db-spacing-fixed-md);
-    padding-block-end: var(--db-spacing-fixed-lg);
+@media screen and (prefers-reduced-motion: no-preference) {
+  .db-accordion-item > details > summary + div {
+    transition: block-size var(--db-transition-straight-emotional);
   }
 }
-.db-accordion-item summary + div {
+.db-accordion-item > details > summary + div {
   block-size: 0;
   overflow: hidden;
-  transition: block-size var(--db-transition-straight-emotional);
   padding: var(--db-spacing-fixed-md);
   padding-block-end: var(--db-spacing-fixed-lg);
 }
-.db-accordion-item summary {
+.db-accordion-item > details > summary {
   background-color: var(--db-adaptive-bg-basic-level-1-default);
   list-style: none;
   display: flex;
@@ -309,32 +308,32 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   border-radius: var(--db-border-radius-sm);
   /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
 }
-.db-accordion-item summary:hover:not(:disabled, [aria-disabled=true]) {
+.db-accordion-item > details > summary:hover:not(:disabled, [aria-disabled=true]) {
   cursor: var(--db-overwrite-cursor, pointer);
   background-color: var(--db-adaptive-bg-basic-level-1-hovered);
 }
-.db-accordion-item summary:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-accordion-item summary:hover:not(:disabled, [aria-disabled=true]):is(input) {
+.db-accordion-item > details > summary:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-accordion-item > details > summary:hover:not(:disabled, [aria-disabled=true]):is(input) {
   cursor: initial;
 }
-.db-accordion-item summary:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-accordion-item summary:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-accordion-item > details > summary:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-accordion-item > details > summary:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
-.db-accordion-item summary:active:not(:disabled, [aria-disabled=true]) {
+.db-accordion-item > details > summary:active:not(:disabled, [aria-disabled=true]) {
   cursor: var(--db-overwrite-cursor, pointer);
   background-color: var(--db-adaptive-bg-basic-level-1-pressed);
 }
-.db-accordion-item summary:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-accordion-item summary:active:not(:disabled, [aria-disabled=true]):is(input) {
+.db-accordion-item > details > summary:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-accordion-item > details > summary:active:not(:disabled, [aria-disabled=true]):is(input) {
   cursor: initial;
 }
-.db-accordion-item summary:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-accordion-item summary:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-accordion-item > details > summary:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-accordion-item > details > summary:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
-.db-accordion-item summary::-webkit-details-marker {
+.db-accordion-item > details > summary::-webkit-details-marker {
   display: none;
 }
-.db-accordion-item summary::after {
+.db-accordion-item > details > summary::after {
   inset-inline-end: var(--db-spacing-fixed-sm);
 }
-.db-accordion-item summary:focus-visible {
+.db-accordion-item > details > summary:focus-visible {
   border-radius: var(--db-border-radius-xs);
 }

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

@@ -13,13 +13,13 @@
 
 	> details {
 		&[open] {
-			summary + div {
+			> summary + div {
 				block-size: auto;
 				/* stylelint-disable-next-line declaration-property-value-no-unknown */
 				block-size: calc-size(auto, size);
 			}
 
-			summary::after {
+			> summary::after {
 				transform: form-components.$dropdown-icon-transform;
 			}
 		}
@@ -28,56 +28,52 @@
 			pointer-events: none;
 			opacity: component.$default-disabled;
 		}
-	}
 
-	@media screen and (prefers-reduced-motion: reduce) {
-		summary + div {
+		@media screen and (prefers-reduced-motion: no-preference) {
+			> summary + div {
+				transition: block-size
+					#{variables.$db-transition-straight-emotional};
+			}
+		}
+
+		> summary + div {
 			block-size: 0;
 			overflow: hidden;
-			transition: none;
 			padding: variables.$db-spacing-fixed-md;
 			padding-block-end: variables.$db-spacing-fixed-lg;
 		}
-	}
 
-	summary + div {
-		block-size: 0;
-		overflow: hidden;
-		transition: block-size #{variables.$db-transition-straight-emotional};
-		padding: variables.$db-spacing-fixed-md;
-		padding-block-end: variables.$db-spacing-fixed-lg;
-	}
-
-	summary {
-		@extend %dropdown-icon;
-		@extend %db-overwrite-font-size-md;
+		> summary {
+			@extend %dropdown-icon;
+			@extend %db-overwrite-font-size-md;
 
-		background-color: colors.$db-adaptive-bg-basic-level-1-default;
-		list-style: none;
-		display: flex;
-		justify-content: space-between;
-		padding: variables.$db-spacing-fixed-md;
-		gap: variables.$db-spacing-fixed-md;
-		border-radius: variables.$db-border-radius-sm;
+			background-color: colors.$db-adaptive-bg-basic-level-1-default;
+			list-style: none;
+			display: flex;
+			justify-content: space-between;
+			padding: variables.$db-spacing-fixed-md;
+			gap: variables.$db-spacing-fixed-md;
+			border-radius: variables.$db-border-radius-sm;
 
-		@include helpers.hover {
-			background-color: colors.$db-adaptive-bg-basic-level-1-hovered;
-		}
+			@include helpers.hover {
+				background-color: colors.$db-adaptive-bg-basic-level-1-hovered;
+			}
 
-		@include helpers.active {
-			background-color: colors.$db-adaptive-bg-basic-level-1-pressed;
-		}
+			@include helpers.active {
+				background-color: colors.$db-adaptive-bg-basic-level-1-pressed;
+			}
 
-		&::-webkit-details-marker {
-			display: none;
-		}
+			&::-webkit-details-marker {
+				display: none;
+			}
 
-		&::after {
-			inset-inline-end: variables.$db-spacing-fixed-sm;
-		}
+			&::after {
+				inset-inline-end: variables.$db-spacing-fixed-sm;
+			}
 
-		&:focus-visible {
-			border-radius: variables.$db-border-radius-xs;
+			&:focus-visible {
+				border-radius: variables.$db-border-radius-xs;
+			}
 		}
 	}
 }

package/build/components/badge/badge.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 {}
+
 /**
 	Generates 3 types of placeholders, e.g:
 	- %db-component-variables-md

package/build/components/brand/brand.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 {}
+
 /**
 	Generates 3 types of placeholders, e.g:
 	- %db-component-variables-md

package/build/components/button/button.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 {}
+
 /**
 	Generates 3 types of placeholders, e.g:
 	- %db-component-variables-md

package/build/components/card/card.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 {}
+
 /**
  * @mixin screen-min-max
  * @param $data an object like (min:"sm", max:"lg") or (min: "sm")

package/build/components/checkbox/checkbox.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-checkbox input:checked:not([data-hide-icon-before=true])::before, .db-checkbox input:indeterminate:not([data-hide-icon-before=true])::before {
   color: var(--db-icon-color, inherit);
   display: inline-block;
@@ -177,10 +181,12 @@ 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-checkbox .db-infotext {
+.db-checkbox > db-infotext > .db-infotext,
+.db-checkbox > .db-infotext {
   margin-block-start: var(--db-spacing-fixed-2xs);
 }
-.db-checkbox .db-infotext:is([data-semantic=successful], [data-semantic=critical]) {
+.db-checkbox > db-infotext > .db-infotext:is([data-semantic=successful], [data-semantic=critical]),
+.db-checkbox > .db-infotext:is([data-semantic=successful], [data-semantic=critical]) {
   display: none;
 }
 
@@ -282,13 +288,16 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   	--db-successful-on-bg-basic-emphasis-80-pressed
   );
 }
-.db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) .db-infotext {
+.db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
+.db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) > .db-infotext {
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
-.db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) .db-infotext[data-semantic=successful] {
+.db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful],
+.db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful] {
   display: flex;
 }
-.db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) .db-infotext:not([data-semantic]) {
+.db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]),
+.db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]) {
   display: none;
 }
 .db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) input:not(:checked) {
@@ -328,13 +337,19 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   	--db-successful-on-bg-basic-emphasis-80-pressed
   );
 }
-.db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) .db-infotext, .db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) .db-infotext {
+.db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
+.db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) > .db-infotext, .db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
+.db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) > .db-infotext {
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
-.db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) .db-infotext[data-semantic=successful], .db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) .db-infotext[data-semantic=successful] {
+.db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful],
+.db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful], .db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful],
+.db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful] {
   display: flex;
 }
-.db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) .db-infotext:not([data-semantic]), .db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) .db-infotext:not([data-semantic]) {
+.db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]),
+.db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]), .db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]),
+.db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]) {
   display: none;
 }
 .db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) input:not(:checked), .db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) input:not(:checked) {
@@ -374,10 +389,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   	--db-critical-on-bg-basic-emphasis-80-pressed
   );
 }
-.db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) .db-infotext[data-semantic=critical] {
+.db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) > db-infotext > .db-infotext[data-semantic=critical],
+.db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) > .db-infotext[data-semantic=critical] {
   display: flex;
 }
-.db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) .db-infotext:not([data-semantic]) {
+.db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) > db-infotext > .db-infotext:not([data-semantic]),
+.db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) > .db-infotext:not([data-semantic]) {
   display: none;
 }
 .db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) input:not(:checked) {
@@ -417,10 +434,14 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   	--db-critical-on-bg-basic-emphasis-80-pressed
   );
 }
-.db-checkbox:has(input[data-custom-validity=invalid]) .db-infotext[data-semantic=critical], .db-checkbox[data-custom-validity=invalid] .db-infotext[data-semantic=critical] {
+.db-checkbox:has(input[data-custom-validity=invalid]) > db-infotext > .db-infotext[data-semantic=critical],
+.db-checkbox:has(input[data-custom-validity=invalid]) > .db-infotext[data-semantic=critical], .db-checkbox[data-custom-validity=invalid] > db-infotext > .db-infotext[data-semantic=critical],
+.db-checkbox[data-custom-validity=invalid] > .db-infotext[data-semantic=critical] {
   display: flex;
 }
-.db-checkbox:has(input[data-custom-validity=invalid]) .db-infotext:not([data-semantic]), .db-checkbox[data-custom-validity=invalid] .db-infotext:not([data-semantic]) {
+.db-checkbox:has(input[data-custom-validity=invalid]) > db-infotext > .db-infotext:not([data-semantic]),
+.db-checkbox:has(input[data-custom-validity=invalid]) > .db-infotext:not([data-semantic]), .db-checkbox[data-custom-validity=invalid] > db-infotext > .db-infotext:not([data-semantic]),
+.db-checkbox[data-custom-validity=invalid] > .db-infotext:not([data-semantic]) {
   display: none;
 }
 .db-checkbox:has(input[data-custom-validity=invalid]) input:not(:checked), .db-checkbox[data-custom-validity=invalid] input:not(:checked) {