@db-ux/core-components 4.6.1 → 4.7.0

package/build/components/navigation/navigation.css

@@ -29,10 +29,6 @@
   }
 }
 
-.db-navigation > menu .db-navigation-item {
-  /* stylelint-disable-next-line media-query-no-invalid */
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-}
 .db-navigation > menu .db-navigation-item::after {
   block-size: 0;
   inline-size: var(--db-border-width-xs);
@@ -41,6 +37,9 @@
   background-color: var(--db-brand-on-bg-basic-emphasis-70-default);
   inset-inline-start: calc(-1 * var(--db-spacing-fixed-xs));
 }
+.db-navigation > menu .db-navigation-item {
+  /* stylelint-disable-next-line media-query-no-invalid */
+}
 @media (min-width: 64em) {
   .db-navigation > menu .db-navigation-item:not([data-force-mobile])::after, .db-navigation > menu [data-force-mobile=false].db-navigation-item::after {
     block-size: var(--db-border-width-xs);
@@ -51,11 +50,10 @@
     inset-block: auto calc(-1 * var(--db-spacing-fixed-xs));
   }
 }
-
-.db-navigation > menu .db-navigation-item:has([aria-current=page]), .db-navigation > menu .db-navigation-item:has([data-active=true]), .db-navigation > menu .db-navigation-item[aria-current=page], .db-navigation > menu .db-navigation-item[data-active=true] {
-  /* stylelint-disable-next-line media-query-no-invalid */
+.db-navigation > menu .db-navigation-item {
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
+
 .db-navigation > menu .db-navigation-item:has([aria-current=page])::after, .db-navigation > menu .db-navigation-item:has([data-active=true])::after, .db-navigation > menu .db-navigation-item[aria-current=page]::after, .db-navigation > menu .db-navigation-item[data-active=true]::after {
   block-size: 100%;
   inline-size: var(--db-border-width-xs);
@@ -65,6 +63,9 @@
     border: calc(var(--db-border-width-xs) - 1px) solid var(--db-adaptive-on-bg-basic-emphasis-100-default);
   }
 }
+.db-navigation > menu .db-navigation-item:has([aria-current=page]), .db-navigation > menu .db-navigation-item:has([data-active=true]), .db-navigation > menu .db-navigation-item[aria-current=page], .db-navigation > menu .db-navigation-item[data-active=true] {
+  /* stylelint-disable-next-line media-query-no-invalid */
+}
 @media (min-width: 64em) {
   .db-navigation > menu .db-navigation-item:not([data-force-mobile]):has([aria-current=page])::after, .db-navigation > menu .db-navigation-item:not([data-force-mobile]):has([data-active=true])::after, .db-navigation > menu .db-navigation-item[aria-current=page]:not([data-force-mobile])::after, .db-navigation > menu .db-navigation-item[data-active=true]:not([data-force-mobile])::after, .db-navigation > menu [data-force-mobile=false].db-navigation-item:has([aria-current=page])::after, .db-navigation > menu [data-force-mobile=false].db-navigation-item:has([data-active=true])::after, .db-navigation > menu [data-force-mobile=false].db-navigation-item[aria-current=page]::after, .db-navigation > menu [data-force-mobile=false].db-navigation-item[data-active=true]::after {
     block-size: var(--db-border-width-xs);
@@ -76,12 +77,14 @@
     border: calc(var(--db-border-width-xs) - 1px) solid var(--db-adaptive-on-bg-basic-emphasis-100-default);
   }
 }
+.db-navigation > menu .db-navigation-item:has([aria-current=page]), .db-navigation > menu .db-navigation-item:has([data-active=true]), .db-navigation > menu .db-navigation-item[aria-current=page], .db-navigation > menu .db-navigation-item[data-active=true] {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+}
 
 .db-navigation {
   -webkit-tap-highlight-color: transparent; /* for removing the highlight */
   inline-size: 100%;
   /* stylelint-disable-next-line media-query-no-invalid */
-  /* stylelint-disable-next-line at-rule-empty-line-before */
 }
 @media (min-width: 64em) {
   .db-navigation:not([data-force-mobile]), .db-navigation[data-force-mobile=false] {
@@ -89,6 +92,9 @@
     inline-size: auto;
   }
 }
+.db-navigation {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+}
 .db-navigation > menu {
   display: flex;
   flex-direction: column;
@@ -96,17 +102,18 @@
   margin: 0;
   gap: var(--db-spacing-fixed-sm);
   /* stylelint-disable-next-line media-query-no-invalid */
-  /* stylelint-disable-next-line at-rule-empty-line-before */
 }
 @media (min-width: 64em) {
   .db-navigation > menu:not([data-force-mobile]), .db-navigation > menu[data-force-mobile=false] {
     flex-direction: row;
   }
 }
+.db-navigation > menu {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+}
 .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button:is(button),
 .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button > button {
   /* stylelint-disable-next-line media-query-no-invalid */
-  /* stylelint-disable-next-line at-rule-empty-line-before */
 }
 @media (min-width: 64em) {
   .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button:is(button):not([data-force-mobile])::after, .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button:is(button)[data-force-mobile=false]::after,
@@ -140,10 +147,13 @@
     transform: rotate(-180deg);
   }
 }
+.db-navigation > menu .db-navigation-item .db-navigation-item-expand-button:is(button),
+.db-navigation > menu .db-navigation-item .db-navigation-item-expand-button > button {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+}
 .db-navigation > menu .db-navigation-item > menu .db-navigation-item-expand-button:is(button),
 .db-navigation > menu .db-navigation-item > menu .db-navigation-item-expand-button > button {
   /* stylelint-disable-next-line media-query-no-invalid */
-  /* stylelint-disable-next-line at-rule-empty-line-before */
 }
 @media (min-width: 64em) {
   .db-navigation > menu .db-navigation-item > menu .db-navigation-item-expand-button:is(button):not([data-force-mobile])::after, .db-navigation > menu .db-navigation-item > menu .db-navigation-item-expand-button:is(button)[data-force-mobile=false]::after,
@@ -170,15 +180,21 @@
     transform: none;
   }
 }
+.db-navigation > menu .db-navigation-item > menu .db-navigation-item-expand-button:is(button),
+.db-navigation > menu .db-navigation-item > menu .db-navigation-item-expand-button > button {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+}
 .db-navigation > menu .db-navigation-item .db-navigation-item::after {
   display: none;
 }
 .db-navigation[data-force-close=true] > menu menu {
   /* stylelint-disable-next-line media-query-no-invalid */
-  /* stylelint-disable-next-line at-rule-empty-line-before */
 }
 @media (min-width: 64em) {
   .db-navigation[data-force-close=true] > menu menu:not([data-force-mobile]):not([hidden]), .db-navigation[data-force-close=true] > menu menu[data-force-mobile=false]:not([hidden]) {
     display: none;
   }
 }
+.db-navigation[data-force-close=true] > menu menu {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+}

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

@@ -91,7 +91,6 @@
 .db-navigation-item .db-navigation-item-expand-button:is(button),
 .db-navigation-item .db-navigation-item-expand-button > button {
   /* stylelint-disable-next-line media-query-no-invalid */
-  /* stylelint-disable-next-line at-rule-empty-line-before */
 }
 @media (min-width: 64em) {
   .db-navigation-item .db-navigation-item-expand-button:not([data-force-mobile]):is(:hover, :focus-visible):is(button) ~ .db-sub-navigation,
@@ -100,6 +99,10 @@
     visibility: visible;
   }
 }
+.db-navigation-item .db-navigation-item-expand-button:is(button),
+.db-navigation-item .db-navigation-item-expand-button > button {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+}
 
 .db-navigation-item .db-navigation-item-expand-button:is(button),
 .db-navigation-item .db-navigation-item-expand-button > button, .db-navigation-item a {
@@ -112,12 +115,15 @@
   text-align: center;
   align-items: center;
   justify-content: space-between;
-  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
 }
 .db-navigation-item .db-navigation-item-expand-button:not([hidden]):is(button),
 .db-navigation-item .db-navigation-item-expand-button > button:not([hidden]), .db-navigation-item a:not([hidden]) {
   display: inline-flex;
 }
+.db-navigation-item .db-navigation-item-expand-button:is(button),
+.db-navigation-item .db-navigation-item-expand-button > button, .db-navigation-item a {
+  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
+}
 .db-navigation-item .db-navigation-item-expand-button:hover:not(:disabled,
 [aria-disabled=true],
 [tabindex="-1"],
@@ -245,9 +251,6 @@
 
 .db-navigation-item {
   --db-has-before: 0;
-  position: relative;
-  inline-size: auto;
-  /* stylelint-disable-next-line media-query-no-invalid */
 }
 .db-navigation-item[data-icon-leading]:not([data-show-icon-leading=false])::before, .db-navigation-item[data-icon]:not([data-show-icon=false])::before {
   position: absolute;
@@ -266,6 +269,10 @@
 .db-navigation-item:not([hidden]) {
   display: inline-flex;
 }
+.db-navigation-item {
+  position: relative;
+  inline-size: auto;
+}
 .db-navigation-item[data-wrap=true] :is(a, .db-navigation-item-expand-button):first-of-type {
   white-space: normal;
   text-align: start;
@@ -276,6 +283,9 @@
 .db-navigation-item[data-force-mobile=true]:not([data-width=full]) .db-navigation-item-expand-button::after {
   --db-icon-margin-start: auto;
 }
+.db-navigation-item {
+  /* stylelint-disable-next-line media-query-no-invalid */
+}
 @media (max-width: 63.9375em) {
   .db-navigation-item:not([data-width=full]) {
     inline-size: 100%;
@@ -290,9 +300,6 @@
 .db-navigation-item a:focus-visible {
   z-index: 1;
 }
-.db-navigation-item .db-navigation-item-expand-button {
-  /* stylelint-disable-next-line media-query-no-invalid */
-}
 .db-navigation-item .db-navigation-item-expand-button[data-force-mobile=true][aria-expanded=true] ~ .db-sub-navigation {
   visibility: visible;
   transform: translateX(0%);
@@ -315,6 +322,9 @@
     transition: visibility 0ms linear 410ms, transform var(--db-transition-duration-slow) var(--db-transition-timing-emotional);
   }
 }
+.db-navigation-item .db-navigation-item-expand-button {
+  /* stylelint-disable-next-line media-query-no-invalid */
+}
 @media (max-width: 63.9375em) {
   .db-navigation-item .db-navigation-item-expand-button[aria-expanded=true] ~ .db-sub-navigation {
     visibility: visible;
@@ -376,19 +386,16 @@
 
 .db-sub-navigation {
   margin: 0;
+}
+.db-sub-navigation:not([hidden]) {
+  display: flex;
+}
+.db-sub-navigation {
   flex-direction: column;
   z-index: 70;
   inset-inline-start: 0;
   background-color: var(--db-adaptive-bg-basic-level-1-default);
   visibility: hidden;
-  /* stylelint-disable-next-line media-query-no-invalid */
-  /* stylelint-disable-next-line media-query-no-invalid */
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-  /* stylelint-disable-next-line media-query-no-invalid */
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-}
-.db-sub-navigation:not([hidden]) {
-  display: flex;
 }
 .db-sub-navigation[data-force-mobile=true] {
   padding: var(--db-spacing-fixed-md);
@@ -398,6 +405,9 @@
   inset-inline-start: var(--db-spacing-fixed-xl);
   inset-block: calc(calc(var(--db-sizing-md) + 2 * var(--db-spacing-fixed-xs))) calc(var(--db-sizing-md) + var(--db-spacing-fixed-xs) * 2);
 }
+.db-sub-navigation {
+  /* stylelint-disable-next-line media-query-no-invalid */
+}
 @media (max-width: 63.9375em) {
   .db-sub-navigation {
     padding: var(--db-spacing-fixed-md);
@@ -408,11 +418,18 @@
     inset-block: calc(calc(var(--db-sizing-md) + 2 * var(--db-spacing-fixed-xs))) calc(var(--db-sizing-md) + var(--db-spacing-fixed-xs) * 2);
   }
 }
+.db-sub-navigation {
+  /* stylelint-disable-next-line media-query-no-invalid */
+}
 @media (min-width: 64em) {
   .db-sub-navigation:not([data-force-mobile]) .db-mobile-navigation-back:not([hidden]), .db-sub-navigation[data-force-mobile=false] .db-mobile-navigation-back:not([hidden]) {
     display: none;
   }
 }
+.db-sub-navigation {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* stylelint-disable-next-line media-query-no-invalid */
+}
 @media (min-width: 64em) {
   .db-sub-navigation:not([data-force-mobile]), .db-sub-navigation[data-force-mobile=false] {
     border-radius: var(--db-border-radius-sm);
@@ -482,6 +499,9 @@
     inline-size: var(--db-spacing-fixed-xs);
   }
 }
+.db-sub-navigation {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+}
 .db-sub-navigation:empty:not([hidden]) {
   display: none;
 }
@@ -492,6 +512,9 @@
   margin-inline-start: auto;
 }
 
+.db-mobile-navigation-back:not([hidden]) {
+  display: flex;
+}
 .db-mobile-navigation-back {
   font-weight: normal;
   background-color: var(--db-adaptive-bg-basic-level-1-default);
@@ -500,9 +523,6 @@
   --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
   position: var(--db-tooltip-parent-position, relative);
 }
-.db-mobile-navigation-back:not([hidden]) {
-  display: flex;
-}
 .db-mobile-navigation-back[data-emphasis=strong] {
   --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
 }

package/build/components/notification/notification.css

@@ -749,7 +749,7 @@
   );
 }
 
-.db-notification a[data-size=small], .db-notification p, .db-notification[data-link-variant=inline] a {
+.db-notification a[data-size=small], .db-notification > [data-area=content], .db-notification[data-link-variant=inline] a {
   font: var(--db-type-body-md);
   /* Those variables are only for components to calculate heights and change icons */
   --db-icon-font-weight: var(--db-base-body-icon-weight-md);
@@ -1136,15 +1136,15 @@
   margin-block-start: -2px;
 }
 
+.db-notification:not([hidden]) {
+  display: grid;
+}
 .db-notification {
   padding: var(--db-spacing-fixed-md);
   gap: var(--db-spacing-fixed-xs) var(--db-spacing-fixed-md);
   inline-size: inherit;
   background-color: var(--db-adaptive-bg-basic-level-2-default);
 }
-.db-notification:not([hidden]) {
-  display: grid;
-}
 .db-notification::before {
   --db-icon-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
 }
@@ -1182,7 +1182,7 @@
   --db-icon-font-size: var(--db-base-body-icon-font-size-md);
   --db-icon-font-weight: var(--db-base-body-icon-weight-md);
 }
-.db-notification p {
+.db-notification > [data-area=content] {
   grid-area: content;
   margin: 0;
 }

package/build/components/notification/notification.scss

@@ -82,7 +82,7 @@
 	}
 
 	// content
-	p {
+	& > [data-area="content"] {
 		@extend %db-overwrite-font-size-md;
 
 		grid-area: content;

package/build/components/page/page.css

@@ -20,29 +20,34 @@
   .db-page:not([data-fonts-loaded]), .db-page[data-fonts-loaded=true] {
     opacity: 1;
   }
-  .db-page[data-variant=fixed] {
-    block-size: 100%;
-    min-block-size: 100%;
-    flex-direction: column;
-    /* workaround for angular */
+  .db-page[data-variant=fixed] > :is(.db-header, .db-footer, header, footer):not([hidden]) {
+    display: flex;
   }
   .db-page[data-variant=fixed] > :is(.db-header, .db-footer, header, footer) {
     flex: 0 1 auto;
     flex-grow: 0;
     flex-shrink: 0;
   }
-  .db-page[data-variant=fixed] > :is(.db-header, .db-footer, header, footer):not([hidden]) {
-    display: flex;
+  .db-page[data-variant=fixed] {
+    block-size: 100%;
+    min-block-size: 100%;
   }
   .db-page[data-variant=fixed]:not([hidden]) {
     display: flex;
   }
+  .db-page[data-variant=fixed] {
+    flex-direction: column;
+    /* workaround for angular */
+  }
+  .db-page[data-variant=fixed] > :is(db-header, dbheader, dbfooter, db-footer) > :is(.db-header, .db-footer, header, footer):not([hidden]) {
+    display: flex;
+  }
   .db-page[data-variant=fixed] > :is(db-header, dbheader, dbfooter, db-footer) > :is(.db-header, .db-footer, header, footer) {
     flex: 0 1 auto;
     flex-grow: 0;
     flex-shrink: 0;
   }
-  .db-page[data-variant=fixed] > :is(db-header, dbheader, dbfooter, db-footer) > :is(.db-header, .db-footer, header, footer):not([hidden]) {
+  .db-page[data-variant=fixed] > .db-main:not([hidden]) {
     display: flex;
   }
   .db-page[data-variant=fixed] > .db-main {
@@ -51,7 +56,4 @@
     flex: 1 1 auto;
     inline-size: 100%;
   }
-  .db-page[data-variant=fixed] > .db-main:not([hidden]) {
-    display: flex;
-  }
 }

package/build/components/popover/popover.css

@@ -38,7 +38,6 @@
 
 .db-popover > article {
   --db-popover-distance: var(--db-spacing-fixed-2xs);
-  /* This is for pure html css without using JS */
 }
 .db-popover > article::before {
   content: "";
@@ -71,6 +70,9 @@
 .db-popover > article:is(.db-tooltip) {
   --db-popover-distance: var(--db-spacing-fixed-sm);
 }
+.db-popover > article {
+  /* This is for pure html css without using JS */
+}
 .db-popover > article:not([data-corrected-placement])[data-placement^=bottom][data-placement$=end], .db-popover > article:not([data-corrected-placement])[data-placement^=top][data-placement$=end] {
   inset-inline-end: 0;
 }
@@ -139,8 +141,6 @@
 @media (prefers-reduced-motion: no-preference) {
   .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article:not([data-placement], [data-corrected-placement])[data-animation=true]:not([data-open=false]), .db-popover > article[data-open=true]:not([data-placement], [data-corrected-placement])[data-animation=true], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=bottom]:not([data-corrected-placement])[data-animation=true]:not([data-open=false]), .db-popover > article[data-placement^=bottom][data-open=true]:not([data-corrected-placement])[data-animation=true], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-corrected-placement^=bottom][data-animation=true]:not([data-open=false]), .db-popover > article[data-corrected-placement^=bottom][data-animation=true][data-open=true] {
     animation: popover-animation var(--db-transition-straight-emotional) normal both;
-    /* stylelint-disable-next-line media-query-no-invalid */
-    /* stylelint-disable-next-line at-rule-empty-line-before */
   }
   .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article:not([data-placement], [data-corrected-placement])[data-animation=true][data-delay=slow]:not([data-open=false]), .db-popover > article[data-open=true]:not([data-placement], [data-corrected-placement])[data-animation=true][data-delay=slow], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=bottom]:not([data-corrected-placement])[data-animation=true][data-delay=slow]:not([data-open=false]), .db-popover > article[data-placement^=bottom][data-open=true]:not([data-corrected-placement])[data-animation=true][data-delay=slow], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-corrected-placement^=bottom][data-animation=true][data-delay=slow]:not([data-open=false]), .db-popover > article[data-corrected-placement^=bottom][data-animation=true][data-delay=slow][data-open=true] {
     animation-delay: var(--db-transition-duration-extra-slow);
@@ -148,6 +148,10 @@
   .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article:not([data-placement], [data-corrected-placement])[data-animation=true][data-delay=fast]:not([data-open=false]), .db-popover > article[data-open=true]:not([data-placement], [data-corrected-placement])[data-animation=true][data-delay=fast], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=bottom]:not([data-corrected-placement])[data-animation=true][data-delay=fast]:not([data-open=false]), .db-popover > article[data-placement^=bottom][data-open=true]:not([data-corrected-placement])[data-animation=true][data-delay=fast], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-corrected-placement^=bottom][data-animation=true][data-delay=fast]:not([data-open=false]), .db-popover > article[data-corrected-placement^=bottom][data-animation=true][data-delay=fast][data-open=true] {
     animation-delay: var(--db-transition-duration-medium);
   }
+  .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article:not([data-placement], [data-corrected-placement])[data-animation=true]:not([data-open=false]), .db-popover > article[data-open=true]:not([data-placement], [data-corrected-placement])[data-animation=true], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=bottom]:not([data-corrected-placement])[data-animation=true]:not([data-open=false]), .db-popover > article[data-placement^=bottom][data-open=true]:not([data-corrected-placement])[data-animation=true], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-corrected-placement^=bottom][data-animation=true]:not([data-open=false]), .db-popover > article[data-corrected-placement^=bottom][data-animation=true][data-open=true] {
+    /* stylelint-disable-next-line media-query-no-invalid */
+    /* stylelint-disable-next-line at-rule-empty-line-before */
+  }
 }
 @media (prefers-reduced-motion: no-preference) and (width <= 64em) {
   .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article:not([data-placement], [data-corrected-placement])[data-animation=true]:not([data-delay]):not([data-open=false]), .db-popover > article[data-open=true]:not([data-placement], [data-corrected-placement])[data-animation=true]:not([data-delay]), .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=bottom]:not([data-corrected-placement])[data-animation=true]:not([data-delay]):not([data-open=false]), .db-popover > article[data-placement^=bottom][data-open=true]:not([data-corrected-placement])[data-animation=true]:not([data-delay]), .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-corrected-placement^=bottom][data-animation=true]:not([data-delay]):not([data-open=false]), .db-popover > article[data-corrected-placement^=bottom][data-animation=true][data-open=true]:not([data-delay]) {
@@ -170,8 +174,6 @@
 @media (prefers-reduced-motion: no-preference) {
   .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=top]:not([data-corrected-placement])[data-animation=true]:not([data-open=false]), .db-popover > article[data-placement^=top][data-open=true]:not([data-corrected-placement])[data-animation=true], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-corrected-placement^=top][data-animation=true]:not([data-open=false]), .db-popover > article[data-corrected-placement^=top][data-animation=true][data-open=true] {
     animation: popover-animation var(--db-transition-straight-emotional) normal both;
-    /* stylelint-disable-next-line media-query-no-invalid */
-    /* stylelint-disable-next-line at-rule-empty-line-before */
   }
   .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=top]:not([data-corrected-placement])[data-animation=true][data-delay=slow]:not([data-open=false]), .db-popover > article[data-placement^=top][data-open=true]:not([data-corrected-placement])[data-animation=true][data-delay=slow], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-corrected-placement^=top][data-animation=true][data-delay=slow]:not([data-open=false]), .db-popover > article[data-corrected-placement^=top][data-animation=true][data-delay=slow][data-open=true] {
     animation-delay: var(--db-transition-duration-extra-slow);
@@ -179,6 +181,10 @@
   .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=top]:not([data-corrected-placement])[data-animation=true][data-delay=fast]:not([data-open=false]), .db-popover > article[data-placement^=top][data-open=true]:not([data-corrected-placement])[data-animation=true][data-delay=fast], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-corrected-placement^=top][data-animation=true][data-delay=fast]:not([data-open=false]), .db-popover > article[data-corrected-placement^=top][data-animation=true][data-delay=fast][data-open=true] {
     animation-delay: var(--db-transition-duration-medium);
   }
+  .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=top]:not([data-corrected-placement])[data-animation=true]:not([data-open=false]), .db-popover > article[data-placement^=top][data-open=true]:not([data-corrected-placement])[data-animation=true], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-corrected-placement^=top][data-animation=true]:not([data-open=false]), .db-popover > article[data-corrected-placement^=top][data-animation=true][data-open=true] {
+    /* stylelint-disable-next-line media-query-no-invalid */
+    /* stylelint-disable-next-line at-rule-empty-line-before */
+  }
 }
 @media (prefers-reduced-motion: no-preference) and (width <= 64em) {
   .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=top]:not([data-corrected-placement])[data-animation=true]:not([data-delay]):not([data-open=false]), .db-popover > article[data-placement^=top][data-open=true]:not([data-corrected-placement])[data-animation=true]:not([data-delay]), .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-corrected-placement^=top][data-animation=true]:not([data-delay]):not([data-open=false]), .db-popover > article[data-corrected-placement^=top][data-animation=true][data-open=true]:not([data-delay]) {
@@ -201,8 +207,6 @@
 @media (prefers-reduced-motion: no-preference) {
   .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=right]:not([data-corrected-placement])[data-animation=true]:not([data-open=false]), .db-popover > article[data-placement^=right][data-open=true]:not([data-corrected-placement])[data-animation=true], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-corrected-placement^=right][data-animation=true]:not([data-open=false]), .db-popover > article[data-corrected-placement^=right][data-animation=true][data-open=true] {
     animation: popover-animation var(--db-transition-straight-emotional) normal both;
-    /* stylelint-disable-next-line media-query-no-invalid */
-    /* stylelint-disable-next-line at-rule-empty-line-before */
   }
   .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=right]:not([data-corrected-placement])[data-animation=true][data-delay=slow]:not([data-open=false]), .db-popover > article[data-placement^=right][data-open=true]:not([data-corrected-placement])[data-animation=true][data-delay=slow], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-corrected-placement^=right][data-animation=true][data-delay=slow]:not([data-open=false]), .db-popover > article[data-corrected-placement^=right][data-animation=true][data-delay=slow][data-open=true] {
     animation-delay: var(--db-transition-duration-extra-slow);
@@ -210,6 +214,10 @@
   .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=right]:not([data-corrected-placement])[data-animation=true][data-delay=fast]:not([data-open=false]), .db-popover > article[data-placement^=right][data-open=true]:not([data-corrected-placement])[data-animation=true][data-delay=fast], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-corrected-placement^=right][data-animation=true][data-delay=fast]:not([data-open=false]), .db-popover > article[data-corrected-placement^=right][data-animation=true][data-delay=fast][data-open=true] {
     animation-delay: var(--db-transition-duration-medium);
   }
+  .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=right]:not([data-corrected-placement])[data-animation=true]:not([data-open=false]), .db-popover > article[data-placement^=right][data-open=true]:not([data-corrected-placement])[data-animation=true], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-corrected-placement^=right][data-animation=true]:not([data-open=false]), .db-popover > article[data-corrected-placement^=right][data-animation=true][data-open=true] {
+    /* stylelint-disable-next-line media-query-no-invalid */
+    /* stylelint-disable-next-line at-rule-empty-line-before */
+  }
 }
 @media (prefers-reduced-motion: no-preference) and (width <= 64em) {
   .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=right]:not([data-corrected-placement])[data-animation=true]:not([data-delay]):not([data-open=false]), .db-popover > article[data-placement^=right][data-open=true]:not([data-corrected-placement])[data-animation=true]:not([data-delay]), .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-corrected-placement^=right][data-animation=true]:not([data-delay]):not([data-open=false]), .db-popover > article[data-corrected-placement^=right][data-animation=true][data-open=true]:not([data-delay]) {
@@ -232,8 +240,6 @@
 @media (prefers-reduced-motion: no-preference) {
   .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=left]:not([data-corrected-placement])[data-animation=true]:not([data-open=false]), .db-popover > article[data-placement^=left][data-open=true]:not([data-corrected-placement])[data-animation=true], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-corrected-placement^=left][data-animation=true]:not([data-open=false]), .db-popover > article[data-corrected-placement^=left][data-animation=true][data-open=true] {
     animation: popover-animation var(--db-transition-straight-emotional) normal both;
-    /* stylelint-disable-next-line media-query-no-invalid */
-    /* stylelint-disable-next-line at-rule-empty-line-before */
   }
   .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=left]:not([data-corrected-placement])[data-animation=true][data-delay=slow]:not([data-open=false]), .db-popover > article[data-placement^=left][data-open=true]:not([data-corrected-placement])[data-animation=true][data-delay=slow], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-corrected-placement^=left][data-animation=true][data-delay=slow]:not([data-open=false]), .db-popover > article[data-corrected-placement^=left][data-animation=true][data-delay=slow][data-open=true] {
     animation-delay: var(--db-transition-duration-extra-slow);
@@ -241,6 +247,10 @@
   .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=left]:not([data-corrected-placement])[data-animation=true][data-delay=fast]:not([data-open=false]), .db-popover > article[data-placement^=left][data-open=true]:not([data-corrected-placement])[data-animation=true][data-delay=fast], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-corrected-placement^=left][data-animation=true][data-delay=fast]:not([data-open=false]), .db-popover > article[data-corrected-placement^=left][data-animation=true][data-delay=fast][data-open=true] {
     animation-delay: var(--db-transition-duration-medium);
   }
+  .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=left]:not([data-corrected-placement])[data-animation=true]:not([data-open=false]), .db-popover > article[data-placement^=left][data-open=true]:not([data-corrected-placement])[data-animation=true], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-corrected-placement^=left][data-animation=true]:not([data-open=false]), .db-popover > article[data-corrected-placement^=left][data-animation=true][data-open=true] {
+    /* stylelint-disable-next-line media-query-no-invalid */
+    /* stylelint-disable-next-line at-rule-empty-line-before */
+  }
 }
 @media (prefers-reduced-motion: no-preference) and (width <= 64em) {
   .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=left]:not([data-corrected-placement])[data-animation=true]:not([data-delay]):not([data-open=false]), .db-popover > article[data-placement^=left][data-open=true]:not([data-corrected-placement])[data-animation=true]:not([data-delay]), .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-corrected-placement^=left][data-animation=true]:not([data-delay]):not([data-open=false]), .db-popover > article[data-corrected-placement^=left][data-animation=true][data-open=true]:not([data-delay]) {
@@ -266,18 +276,20 @@
 
 .db-popover {
   position: relative;
-  block-size: fit-content;
-  inline-size: fit-content;
 }
 .db-popover:not([hidden]) {
   display: flex;
 }
-.db-popover > article {
-  /* stylelint-disable-next-line at-rule-empty-line-before */
+.db-popover {
+  block-size: fit-content;
+  inline-size: fit-content;
 }
 .db-popover > article:not([data-spacing]) {
   padding: var(--db-spacing-fixed-sm);
 }
+.db-popover > article {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+}
 .db-popover > article[data-spacing=large] {
   padding: var(--db-spacing-fixed-lg);
 }

package/build/components/radio/radio.css

@@ -32,10 +32,6 @@
   --db-icon-font-size: var(--db-base-body-icon-font-size-sm);
 }
 
-.db-radio {
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-}
 .db-radio:not([data-hide-asterisk=true]):has(input:required):is(label)::after,
 .db-radio:not([data-hide-asterisk=true]):has(input:required) > label::after, .db-radio:not([data-hide-asterisk=true])[data-required=true]:is(label)::after,
 .db-radio:not([data-hide-asterisk=true])[data-required=true] > label::after {
@@ -53,16 +49,16 @@
 .db-radio:has(input:disabled) {
   opacity: var(--db-opacity-md);
 }
+.db-radio:is(label):not([hidden]),
+.db-radio > label:not([hidden]) {
+  display: flex;
+}
 .db-radio:is(label),
 .db-radio > label {
   align-items: flex-start;
   position: relative;
   color: var(--db-check-element-label-color, var(--db-adaptive-on-bg-basic-emphasis-100-default));
 }
-.db-radio:is(label):not([hidden]),
-.db-radio > label:not([hidden]) {
-  display: flex;
-}
 .db-radio input {
   background-color: var(--db-adaptive-bg-basic-transparent-full-default);
   place-content: center center;
@@ -133,6 +129,9 @@
   	--db-successful-bg-basic-transparent-full-pressed
   );
 }
+.db-radio {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+}
 .db-radio:has(input[data-custom-validity=valid]), .db-radio[data-custom-validity=valid] {
   --db-check-element-border-color: var(
   	--db-successful-on-bg-basic-emphasis-70-default
@@ -179,6 +178,9 @@
   	--db-critical-bg-basic-transparent-full-pressed
   );
 }
+.db-radio {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+}
 .db-radio:has(input[data-custom-validity=invalid]), .db-radio[data-custom-validity=invalid] {
   --db-check-element-border-color: var(
   	--db-critical-on-bg-basic-emphasis-70-default

package/build/components/section/section.css

@@ -1,7 +1,4 @@
 /* Variants for adaptive components like input, select, notification, ... */
-.db-section {
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-}
 .db-section:not([data-width]), .db-section[data-width=full] {
   padding-inline: var(--db-spacing-fixed-md);
 }
@@ -17,6 +14,9 @@
 .db-section:not([data-spacing]) {
   padding-block: var(--db-spacing-responsive-md);
 }
+.db-section {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+}
 .db-section[data-spacing=large] {
   padding-block: var(--db-spacing-responsive-lg);
 }

package/build/components/select/select.css

@@ -644,14 +644,14 @@ input[type=radio]:checked) select:is([type=date],
   color: var(--db-successful-on-bg-basic-emphasis-100-default);
   caret-color: var(--db-successful-on-bg-basic-emphasis-100-default);
 }
-.db-select:has(select:not([data-custom-validity]):is(:required):user-valid) > db-infotext > .db-infotext,
-.db-select:has(select:not([data-custom-validity]):is(:required):user-valid) > .db-infotext {
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-}
 .db-select:has(select:not([data-custom-validity]):is(:required):user-valid) > db-infotext > .db-infotext[data-semantic=successful]:not([hidden]),
 .db-select:has(select:not([data-custom-validity]):is(:required):user-valid) > .db-infotext[data-semantic=successful]:not([hidden]) {
   display: flex;
 }
+.db-select:has(select:not([data-custom-validity]):is(:required):user-valid) > db-infotext > .db-infotext,
+.db-select:has(select:not([data-custom-validity]):is(:required):user-valid) > .db-infotext {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+}
 .db-select:has(select:not([data-custom-validity]):is(:required):user-valid) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
 .db-select:has(select:not([data-custom-validity]):is(:required):user-valid) > .db-infotext:not([data-semantic]):not([hidden]) {
   display: none;
@@ -665,16 +665,16 @@ input[type=radio]:checked) select:is([type=date],
   color: var(--db-successful-on-bg-basic-emphasis-100-default);
   caret-color: var(--db-successful-on-bg-basic-emphasis-100-default);
 }
-.db-select:has(select[data-custom-validity=valid]) > db-infotext > .db-infotext,
-.db-select:has(select[data-custom-validity=valid]) > .db-infotext, .db-select[data-custom-validity=valid] > db-infotext > .db-infotext,
-.db-select[data-custom-validity=valid] > .db-infotext {
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-}
 .db-select:has(select[data-custom-validity=valid]) > db-infotext > .db-infotext[data-semantic=successful]:not([hidden]),
 .db-select:has(select[data-custom-validity=valid]) > .db-infotext[data-semantic=successful]:not([hidden]), .db-select[data-custom-validity=valid] > db-infotext > .db-infotext[data-semantic=successful]:not([hidden]),
 .db-select[data-custom-validity=valid] > .db-infotext[data-semantic=successful]:not([hidden]) {
   display: flex;
 }
+.db-select:has(select[data-custom-validity=valid]) > db-infotext > .db-infotext,
+.db-select:has(select[data-custom-validity=valid]) > .db-infotext, .db-select[data-custom-validity=valid] > db-infotext > .db-infotext,
+.db-select[data-custom-validity=valid] > .db-infotext {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+}
 .db-select:has(select[data-custom-validity=valid]) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
 .db-select:has(select[data-custom-validity=valid]) > .db-infotext:not([data-semantic]):not([hidden]), .db-select[data-custom-validity=valid] > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
 .db-select[data-custom-validity=valid] > .db-infotext:not([data-semantic]):not([hidden]) {
@@ -834,7 +834,7 @@ select[aria-disabled=true]) {
 .db-select optgroup {
   background-color: var(--db-adaptive-bg-basic-level-3-default);
 }
-.db-select:has(> select option:checked:not(.placeholder)) [id$=-placeholder],
-.db-select:has(> select option:checked:not(.placeholder)) option[data-show-empty-option=false] {
+.db-select select:is(:has(option:checked:not(.placeholder)), :open) ~ [id$=-placeholder],
+.db-select select:is(:has(option:checked:not(.placeholder)), :open) option[data-show-empty-option=false] {
   display: none;
 }

package/build/components/select/select.scss

@@ -44,10 +44,10 @@
 		background-color: colors.$db-adaptive-bg-basic-level-3-default;
 	}
 
-	&:has(> select option:checked:not(.placeholder)) {
-		[id$="-placeholder"],
-		// Hide placeholder option in dropdown for required selects after a selection has been made
-		// This prevents users from selecting an invalid empty option when the field is required
+	select:is(:has(option:checked:not(.placeholder)), :open) {
+		& ~ [id$="-placeholder"],
+		// Hide the placeholder and an inserted empty `option` with
+		// `data-show-empty-option="false"` once a non-placeholder option is selected or the `select` is open
 		option[data-show-empty-option="false"] {
 			display: none;
 		}