@db-ux/core-components 3.1.16 → 3.1.18

package/README.md

@@ -29,7 +29,7 @@ If you just need the styling follow this:
 
 **No!** The `@db-ux/core-components` package **automatically includes** all the foundations (`@db-ux/core-foundations`) you need. You only need to install one package:
 
-- **Use `@db-ux/core-components`** - If you want to use UI components (buttons, inputs, etc.) 
+- **Use `@db-ux/core-components`** - If you want to use UI components (buttons, inputs, etc.)
 - **Use `@db-ux/core-foundations`** - If you only need design tokens, colors, spacing, fonts, and assets without any component styles
 
 ## Install

package/agent/_instructions.md

@@ -0,0 +1,9 @@
+## Common AI mistakes
+
+### `DBButton` or `db-button`
+
+- available variants are `outline`, `brand`, `filled`, `ghost`
+- always use variant `outline` as default
+- use variant `brand` as CTA or primary action
+- if `noText`/`no-text` property is used add a `DBTooltip` or `db-tooltip` inside the Button
+- always add a `type` as property as best practise

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

@@ -304,13 +304,15 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 .db-accordion-item > details > summary {
   background-color: var(--db-adaptive-bg-basic-level-1-default);
   list-style: none;
-  display: flex;
   justify-content: space-between;
   padding: var(--db-spacing-fixed-md);
   gap: var(--db-spacing-fixed-md);
   border-radius: var(--db-border-radius-sm);
   /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
 }
+.db-accordion-item > details > summary:not([hidden]) {
+  display: flex;
+}
 .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);

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

@@ -49,7 +49,9 @@
 
 			background-color: colors.$db-adaptive-bg-basic-level-1-default;
 			list-style: none;
-			display: flex;
+
+			@include helpers.display(flex);
+
 			justify-content: space-between;
 			padding: variables.$db-spacing-fixed-md;
 			gap: variables.$db-spacing-fixed-md;

package/build/components/badge/badge.css

@@ -132,10 +132,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   white-space: nowrap;
   justify-content: center;
   text-align: center;
-  display: inline-flex;
   align-items: center;
   vertical-align: top;
 }
+.db-badge:not([hidden]) {
+  display: inline-flex;
+}
 
 /**
  * @mixin screen-min-max

package/build/components/brand/brand.css

@@ -114,11 +114,13 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 @layer variables {}
 
 .db-brand {
-  display: flex;
   gap: var(--db-spacing-fixed-sm);
   align-items: center;
   font-weight: 700;
 }
+.db-brand:not([hidden]) {
+  display: flex;
+}
 .db-brand::before {
   --db-icon-font-size: var(--db-sizing-md);
   --db-icon-margin-end: 0;

package/build/components/brand/brand.scss

@@ -1,11 +1,12 @@
 @use "@db-ux/core-foundations/build/styles/variables";
 @use "@db-ux/core-foundations/build/styles/colors";
 @use "@db-ux/core-foundations/build/styles/fonts";
+@use "@db-ux/core-foundations/build/styles/helpers/display";
 
 .db-brand {
 	@extend %db-overwrite-font-size-md;
+	@include display.display(flex);
 
-	display: flex;
 	gap: variables.$db-spacing-fixed-sm;
 	align-items: center;
 	font-weight: 700;

package/build/components/button/button.css

@@ -144,10 +144,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   white-space: nowrap;
   justify-content: center;
   text-align: center;
-  display: inline-flex;
   align-items: center;
   vertical-align: top;
 }
+.db-button:not([hidden]) {
+  display: inline-flex;
+}
 
 .db-button {
   color: var(--db-adaptive-on-bg-basic-emphasis-100-default);

package/build/components/card/card.css

@@ -94,7 +94,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-card-background-color-hovered: var(--db-adaptive-bg-basic-level-1-hovered);
   --db-card-background-color-pressed: var(--db-adaptive-bg-basic-level-1-pressed);
   /* stylelint-disable-next-line at-rule-empty-line-before */
-  display: flex;
   flex-direction: column;
   background-color: var(--db-card-background-color-default);
 }
@@ -113,6 +112,9 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 .db-card[data-spacing=none] {
   padding: 0;
 }
+.db-card:not([hidden]) {
+  display: flex;
+}
 .db-card[data-behavior=interactive] {
   /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
 }

package/build/components/card/card.scss

@@ -30,8 +30,8 @@
 
 	@extend %default-card;
 	@include component.get-data-spacing;
+	@include helpers.display(flex);
 
-	display: flex;
 	flex-direction: column;
 	background-color: var(--db-card-background-color-default);
 

package/build/components/checkbox/checkbox.css

@@ -188,8 +188,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 .db-checkbox > .db-infotext {
   margin-block-start: var(--db-spacing-fixed-2xs);
 }
-.db-checkbox > db-infotext > .db-infotext:is([data-semantic=successful], [data-semantic=critical]),
-.db-checkbox > .db-infotext:is([data-semantic=successful], [data-semantic=critical]) {
+.db-checkbox > db-infotext > .db-infotext:is([data-semantic=successful], [data-semantic=critical]):not([hidden]),
+.db-checkbox > .db-infotext:is([data-semantic=successful], [data-semantic=critical]):not([hidden]) {
   display: none;
 }
 
@@ -225,11 +225,14 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 }
 .db-checkbox:is(label),
 .db-checkbox > label {
-  display: flex;
   align-items: flex-start;
   position: relative;
   color: var(--db-check-element-label-color, var(--db-adaptive-on-bg-basic-emphasis-100-default));
 }
+.db-checkbox:is(label):not([hidden]),
+.db-checkbox > label:not([hidden]) {
+  display: flex;
+}
 .db-checkbox input {
   background-color: var(--db-adaptive-bg-basic-transparent-full-default);
   place-content: center center;
@@ -295,12 +298,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 .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 > .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] {
+.db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful]:not([hidden]),
+.db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful]:not([hidden]) {
   display: flex;
 }
-.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]) {
+.db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
+.db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]):not([hidden]) {
   display: none;
 }
 .db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) input:not(:checked) {
@@ -345,14 +348,14 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 .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 > .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] {
+.db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful]:not([hidden]),
+.db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful]:not([hidden]), .db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful]:not([hidden]),
+.db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful]:not([hidden]) {
   display: flex;
 }
-.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]) {
+.db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
+.db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]):not([hidden]), .db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
+.db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]):not([hidden]) {
   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) {
@@ -392,12 +395,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 > .db-infotext[data-semantic=critical],
-.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]:not([hidden]),
+.db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) > .db-infotext[data-semantic=critical]:not([hidden]) {
   display: flex;
 }
-.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]) {
+.db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
+.db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) > .db-infotext:not([data-semantic]):not([hidden]) {
   display: none;
 }
 .db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) input:not(:checked) {
@@ -437,14 +440,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 > .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] {
+.db-checkbox:has(input[data-custom-validity=invalid]) > db-infotext > .db-infotext[data-semantic=critical]:not([hidden]),
+.db-checkbox:has(input[data-custom-validity=invalid]) > .db-infotext[data-semantic=critical]:not([hidden]), .db-checkbox[data-custom-validity=invalid] > db-infotext > .db-infotext[data-semantic=critical]:not([hidden]),
+.db-checkbox[data-custom-validity=invalid] > .db-infotext[data-semantic=critical]:not([hidden]) {
   display: flex;
 }
-.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]) {
+.db-checkbox:has(input[data-custom-validity=invalid]) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
+.db-checkbox:has(input[data-custom-validity=invalid]) > .db-infotext:not([data-semantic]):not([hidden]), .db-checkbox[data-custom-validity=invalid] > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
+.db-checkbox[data-custom-validity=invalid] > .db-infotext:not([data-semantic]):not([hidden]) {
   display: none;
 }
 .db-checkbox:has(input[data-custom-validity=invalid]) input:not(:checked), .db-checkbox[data-custom-validity=invalid] input:not(:checked) {
@@ -471,11 +474,13 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   );
 }
 .db-checkbox input {
-  display: flex;
   border-radius: var(--db-border-radius-2xs);
   align-items: center;
   justify-content: center;
 }
+.db-checkbox input:not([hidden]) {
+  display: flex;
+}
 .db-checkbox input:checked {
   --db-check-element-border-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
   --db-icon-color: var(--db-adaptive-on-bg-inverted-default);

package/build/components/checkbox/checkbox.scss

@@ -94,7 +94,8 @@
 	}
 
 	input {
-		display: flex;
+		@include helpers.display(flex);
+
 		border-radius: variables.$db-border-radius-2xs;
 		align-items: center;
 		justify-content: center;

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

@@ -712,8 +712,8 @@ input[type=radio]:checked) > label {
 .db-custom-select > .db-infotext {
   margin-block-start: var(--db-spacing-fixed-2xs);
 }
-.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]) {
+.db-custom-select > db-infotext > .db-infotext:is([data-semantic=successful], [data-semantic=critical]):not([hidden]),
+.db-custom-select > .db-infotext:is([data-semantic=successful], [data-semantic=critical]):not([hidden]) {
   display: none;
 }
 
@@ -725,6 +725,12 @@ input[type=radio]:checked) > label {
   position: absolute;
   inset-block-start: 0;
   inset-inline-start: 0;
+  opacity: 0;
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .db-custom-select-placeholder {
+    transition: opacity var(--db-transition-straight-emotional), outline var(--db-transition-duration-extra-fast), border-color var(--db-transition-straight-emotional), background-color var(--db-transition-straight-emotional);
+  }
 }
 
 .db-custom-select [id$=-placeholder] {
@@ -804,9 +810,11 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
 .db-custom-select {
   --db-form-has-before: 0;
   position: relative;
-  display: flex;
   flex-direction: column;
 }
+.db-custom-select:not([hidden]) {
+  display: flex;
+}
 .db-custom-select[data-variant=floating], .db-custom-select[data-hide-label=true] {
   --db-label-visible-above: 0;
 }
@@ -902,15 +910,15 @@ input[type=radio]:checked) [id$=-placeholder] {
   /* 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 > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful],
+> db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful]:not([hidden]),
 .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] {
+> db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful]:not([hidden]) {
   display: flex;
 }
 .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-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
 .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]) {
+> db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]):not([hidden]) {
   display: none;
 }
 .db-custom-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
@@ -938,21 +946,21 @@ input[type=radio]:checked) [id$=-placeholder] {
   /* 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 > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful],
+> db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful]:not([hidden]),
 .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-infotext > .db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful]:not([hidden]), .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]:not([hidden]),
 .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] {
+> db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful]:not([hidden]) {
   display: flex;
 }
 .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-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
 .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-infotext > .db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]):not([hidden]), .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]):not([hidden]),
 .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]) {
+> db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]):not([hidden]) {
   display: none;
 }
 .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-invalid) {
@@ -963,12 +971,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 > .db-infotext[data-semantic=critical],
-.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]:not([hidden]),
+.db-custom-select:has(select:not([data-custom-validity]):is(:required):user-invalid) > .db-infotext[data-semantic=critical]:not([hidden]) {
   display: flex;
 }
-.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]) {
+.db-custom-select:has(select:not([data-custom-validity]):is(:required):user-invalid) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
+.db-custom-select:has(select:not([data-custom-validity]):is(:required):user-invalid) > .db-infotext:not([data-semantic]):not([hidden]) {
   display: none;
 }
 .db-custom-select:has(select[data-custom-validity=invalid]), .db-custom-select[data-custom-validity=invalid] {
@@ -980,14 +988,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 > .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] {
+.db-custom-select:has(select[data-custom-validity=invalid]) > db-infotext > .db-infotext[data-semantic=critical]:not([hidden]),
+.db-custom-select:has(select[data-custom-validity=invalid]) > .db-infotext[data-semantic=critical]:not([hidden]), .db-custom-select[data-custom-validity=invalid] > db-infotext > .db-infotext[data-semantic=critical]:not([hidden]),
+.db-custom-select[data-custom-validity=invalid] > .db-infotext[data-semantic=critical]:not([hidden]) {
   display: flex;
 }
-.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]) {
+.db-custom-select:has(select[data-custom-validity=invalid]) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
+.db-custom-select:has(select[data-custom-validity=invalid]) > .db-infotext:not([data-semantic]):not([hidden]), .db-custom-select[data-custom-validity=invalid] > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
+.db-custom-select[data-custom-validity=invalid] > .db-infotext:not([data-semantic]):not([hidden]) {
   display: none;
 }
 .db-custom-select summary::placeholder,
@@ -1062,7 +1070,7 @@ summary[aria-disabled=true]) {
   --db-form-component-padding-inline-end: calc(var(--db-icon-font-size) + var(--db-spacing-fixed-sm) + var(--db-spacing-fixed-xs));
   margin-inline-end: calc(var(--db-icon-font-size) + var(--db-spacing-fixed-sm));
 }
-.db-custom-select:has(summary span) [id$=-placeholder] {
+.db-custom-select:has(summary span) [id$=-placeholder]:not([hidden]) {
   display: none;
 }
 .db-custom-select > db-button > .db-button[data-icon=cross][data-variant=ghost],

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

@@ -57,7 +57,7 @@
 
 	&:has(summary span) {
 		[id$="-placeholder"] {
-			display: none;
+			@include helpers.display(none);
 		}
 	}
 

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

@@ -483,9 +483,9 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   }
 }
 @media screen and (min-width: 48em) {
-  .db-custom-select-dropdown > db-custom-select-list > div:not([class~=db-custom-select-list]):has(.db-button):not([data-force-mobile]), .db-custom-select-dropdown > db-custom-select-list > div:not([class~=db-custom-select-list]):has(.db-button)[data-force-mobile=false],
-  .db-custom-select-dropdown > div:not([class~=db-custom-select-list]):has(.db-button):not([data-force-mobile]),
-  .db-custom-select-dropdown > div:not([class~=db-custom-select-list]):has(.db-button)[data-force-mobile=false] {
+  .db-custom-select-dropdown > db-custom-select-list > div:not([class~=db-custom-select-list]):has(.db-button):not([data-force-mobile]):not([hidden]), .db-custom-select-dropdown > db-custom-select-list > div:not([class~=db-custom-select-list]):has(.db-button)[data-force-mobile=false]:not([hidden]),
+  .db-custom-select-dropdown > div:not([class~=db-custom-select-list]):has(.db-button):not([data-force-mobile]):not([hidden]),
+  .db-custom-select-dropdown > div:not([class~=db-custom-select-list]):has(.db-button)[data-force-mobile=false]:not([hidden]) {
     display: none;
   }
 }

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

@@ -64,7 +64,7 @@
 			@include helpers.divider("top", "after");
 
 			@include screen-sizes.screen("sm") {
-				display: none;
+				@include helpers.display(none);
 			}
 		}
 	}

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

@@ -128,17 +128,21 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
  */
 .db-custom-select-form-field:is(summary) {
   list-style: none;
-  display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--db-spacing-fixed-sm);
 }
+.db-custom-select-form-field:is(summary):not([hidden]) {
+  display: flex;
+}
 .db-custom-select-form-field:is(summary) span {
   text-overflow: ellipsis;
   overflow: hidden;
   text-wrap: nowrap;
 }
 .db-custom-select-form-field:is(summary) > div {
-  display: flex;
   gap: var(--db-spacing-fixed-sm);
 }
+.db-custom-select-form-field:is(summary) > div:not([hidden]) {
+  display: flex;
+}

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

@@ -5,7 +5,9 @@
 .db-custom-select-form-field {
 	&:is(summary) {
 		list-style: none;
-		display: flex;
+
+		@include helpers.display(flex);
+
 		align-items: center;
 		justify-content: space-between;
 		gap: variables.$db-spacing-fixed-sm;
@@ -17,7 +19,8 @@
 		}
 
 		> div {
-			display: flex;
+			@include helpers.display(flex);
+
 			gap: variables.$db-spacing-fixed-sm;
 		}
 	}

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

@@ -139,9 +139,11 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 }
 .db-custom-select-list > ul {
   all: unset;
-  display: flex;
   flex-direction: column;
 }
+.db-custom-select-list > ul:not([hidden]) {
+  display: flex;
+}
 .db-custom-select-list > ul:has(span) {
   --db-custom-select-list-item-group-padding: 1;
 }

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

@@ -1,5 +1,6 @@
 @use "@db-ux/core-foundations/build/styles/variables";
 @use "../../styles/internal/form-components";
+@use "@db-ux/core-foundations/build/styles/helpers/display";
 
 .db-custom-select-list {
 	all: unset;
@@ -26,7 +27,9 @@
 
 	> ul {
 		all: unset;
-		display: flex;
+
+		@include display.display(flex);
+
 		flex-direction: column;
 
 		&:has(span) {

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

@@ -174,7 +174,6 @@ db-custom-select-list-item:not(:last-of-type) .db-custom-select-list-item[data-d
 }
 
 .db-custom-select-list-item {
-  display: flex;
   block-size: 100%;
   position: relative;
   padding: var(--db-spacing-fixed-sm);
@@ -182,6 +181,9 @@ db-custom-select-list-item:not(:last-of-type) .db-custom-select-list-item[data-d
   border-radius: var(--db-border-radius-xs);
   box-sizing: border-box;
 }
+.db-custom-select-list-item:not([hidden]) {
+  display: flex;
+}
 .db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)) {
   /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
 }

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

@@ -14,7 +14,8 @@ db-custom-select-list-item:not(:last-of-type) {
 }
 
 .db-custom-select-list-item {
-	display: flex;
+	@include helpers.display(flex);
+
 	block-size: 100%;
 	position: relative;
 	padding: variables.$db-spacing-fixed-sm;

package/build/components/drawer/drawer.css

@@ -278,7 +278,6 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
 }
 
 .db-drawer .db-drawer-container {
-  display: flex;
   flex-direction: column;
   background-color: var(--db-adaptive-bg-basic-level-1-default);
   block-size: 100%;
@@ -286,6 +285,9 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
   position: fixed;
   box-shadow: var(--db-elevation-md);
 }
+.db-drawer .db-drawer-container:not([hidden]) {
+  display: flex;
+}
 .db-drawer .db-drawer-container:not([data-width=full]) {
   max-inline-size: var(--db-drawer-max-width, calc(100% - var(--db-spacing-fixed-xl)));
   min-inline-size: var(--db-drawer-min-width, calc(100% - var(--db-spacing-fixed-xl)));
@@ -306,10 +308,12 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
   box-shadow: var(--db-elevation-md);
 }
 .db-drawer .db-drawer-container .db-drawer-header {
-  display: none;
   --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
   position: var(--db-tooltip-parent-position, relative);
 }
+.db-drawer .db-drawer-container .db-drawer-header:not([hidden]) {
+  display: none;
+}
 .db-drawer .db-drawer-container .db-drawer-header[data-emphasis=strong] {
   --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
 }
@@ -338,7 +342,7 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
 .db-drawer .db-drawer-container .db-drawer-header .button-close-drawer button {
   margin-inline-start: auto;
 }
-.db-drawer .db-drawer-container .db-drawer-header:has(.button-close-drawer), .db-drawer .db-drawer-container .db-drawer-header:has(:not(.db-drawer-header-text:empty)) {
+.db-drawer .db-drawer-container .db-drawer-header:has(.button-close-drawer):not([hidden]), .db-drawer .db-drawer-container .db-drawer-header:has(:not(.db-drawer-header-text:empty)):not([hidden]) {
   display: flex;
 }
 .db-drawer[data-position=absolute] {
@@ -349,7 +353,7 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
   inline-size: 100%;
   background-color: transparent;
 }
-.db-drawer[data-position=absolute][open] {
+.db-drawer[data-position=absolute][open]:not([hidden]) {
   display: flex;
 }
 .db-drawer[data-position=absolute]:not([data-direction]), .db-drawer[data-position=absolute][data-direction=right], .db-drawer[data-position=absolute][data-direction=left] {