@db-ux/core-components 3.1.15 → 3.1.17

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

@@ -277,7 +277,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   background-color: var(--db-adaptive-bg-basic-transparent-full-default);
   cursor: pointer;
   inline-size: 100%;
-  display: inline-flex;
   border-radius: var(--db-border-radius-sm);
   padding: var(--db-spacing-fixed-xs) var(--db-spacing-fixed-sm);
   white-space: nowrap;
@@ -286,6 +285,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   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:hover:not(:disabled, [aria-disabled=true]):is(button),
 .db-navigation-item .db-navigation-item-expand-button > button:hover:not(:disabled, [aria-disabled=true]), .db-navigation-item a:hover:not(:disabled, [aria-disabled=true]) {
   cursor: var(--db-overwrite-cursor, pointer);
@@ -323,7 +326,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 .db-navigation-item {
   --db-has-before: 0;
-  display: inline-flex;
   position: relative;
   inline-size: auto;
   /* stylelint-disable-next-line media-query-no-invalid */
@@ -345,6 +347,9 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   /* stylelint-disable-next-line db-ux/use-spacings */
   padding-inline-start: var(--db-padding-inline-start);
 }
+.db-navigation-item:not([hidden]) {
+  display: inline-flex;
+}
 .db-navigation-item[data-wrap=true] :is(a, .db-navigation-item-expand-button):first-of-type {
   white-space: normal;
   text-align: start;
@@ -441,7 +446,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 .db-sub-navigation {
   margin: 0;
-  display: flex;
   flex-direction: column;
   z-index: 70;
   inset-inline-start: 0;
@@ -453,6 +457,9 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   /* 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);
   inline-size: 100%;
@@ -470,7 +477,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   }
 }
 @media screen and (min-width: 64em) {
-  .db-sub-navigation:not([data-force-mobile]) .db-mobile-navigation-back, .db-sub-navigation[data-force-mobile=false] .db-mobile-navigation-back {
+  .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;
   }
 }
@@ -542,7 +549,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     inline-size: var(--db-spacing-fixed-xs);
   }
 }
-.db-sub-navigation:empty {
+.db-sub-navigation:empty:not([hidden]) {
   display: none;
 }
 .db-sub-navigation .db-navigation-item {
@@ -553,7 +560,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 }
 
 .db-mobile-navigation-back {
-  display: flex;
   font-weight: normal;
   background-color: var(--db-adaptive-bg-basic-level-1-default);
   padding-block-end: var(--db-spacing-fixed-md);
@@ -561,6 +567,9 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --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/navigation-item/navigation-item.scss

@@ -56,7 +56,6 @@
 	background-color: colors.$db-adaptive-bg-basic-transparent-full-default;
 	cursor: pointer;
 	inline-size: 100%;
-	display: inline-flex;
 	border-radius: variables.$db-border-radius-sm;
 	padding: variables.$db-spacing-fixed-xs variables.$db-spacing-fixed-sm;
 	white-space: nowrap; // we don't want to break
@@ -64,6 +63,8 @@
 	align-items: center; // Centering the content vertically and horizontally
 	justify-content: space-between;
 
+	@include helpers.display(inline-flex);
+
 	@include helpers.hover {
 		background-color: colors.$db-adaptive-bg-basic-transparent-full-hovered;
 	}
@@ -82,8 +83,8 @@
 
 	@extend %db-overwrite-font-size-md;
 	@include icon-passing.icon-passing;
+	@include helpers.display(inline-flex);
 
-	display: inline-flex;
 	position: relative;
 	inline-size: auto;
 
@@ -186,7 +187,9 @@
 	@extend %component-border;
 
 	margin: 0;
-	display: flex;
+
+	@include helpers.display(flex);
+
 	flex-direction: column;
 	z-index: 70;
 	inset-inline-start: 0;
@@ -199,7 +202,7 @@
 
 	@include screen-sizes.screen("md") {
 		.db-mobile-navigation-back {
-			display: none;
+			@include helpers.display(none);
 		}
 	}
 
@@ -304,7 +307,7 @@
 	}
 
 	&:empty {
-		display: none;
+		@include helpers.display(none);
 	}
 
 	.db-navigation-item {
@@ -317,7 +320,8 @@
 }
 
 .db-mobile-navigation-back {
-	display: flex;
+	@include helpers.display(flex);
+
 	font-weight: normal;
 	background-color: colors.$db-adaptive-bg-basic-level-1-default;
 	padding-block-end: variables.$db-spacing-fixed-md;

package/build/components/notification/notification-grid-non-overlay.scss

@@ -1,6 +1,8 @@
+@use "@db-ux/core-foundations/build/styles/helpers/display";
+
 %grid-layout-variant-not-overlay {
 	span {
-		display: none;
+		@include display.display(none);
 	}
 
 	// has link

package/build/components/notification/notification.css

@@ -1040,7 +1040,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     transform: rotate(1turn);
   }
 }
-.db-notification a {
+.db-notification a:not([hidden]) {
   display: inline-block;
 }
 .db-notification a:not([data-wrap=true]) {
@@ -1081,7 +1081,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 .db-notification a:not([data-wrap=true], [data-variant=inline]) {
   white-space: nowrap;
 }
-.db-notification a[data-variant=inline] {
+.db-notification a[data-variant=inline]:not([hidden]) {
   display: inline;
 }
 .db-notification a:focus-visible {
@@ -1158,7 +1158,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   grid-template-areas: "icon head timestamp close" "icon content content content";
 }
 
-.db-notification:not([data-variant=overlay]) span {
+.db-notification:not([data-variant=overlay]) span:not([hidden]) {
   display: none;
 }
 .db-notification:has(a):not([data-link-variant=inline]):not([data-variant=overlay]) {
@@ -1198,12 +1198,14 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 }
 
 .db-notification {
-  display: grid;
   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);
 }

package/build/components/notification/notification.scss

@@ -1,6 +1,7 @@
 @use "sass:map";
 @use "@db-ux/core-foundations/build/styles/density";
 @use "@db-ux/core-foundations/build/styles/variables";
+@use "@db-ux/core-foundations/build/styles/helpers/display";
 @use "@db-ux/core-foundations/build/styles/colors";
 @use "@db-ux/core-foundations/build/styles/icons";
 @use "@db-ux/core-foundations/build/styles/screen-sizes";
@@ -27,8 +28,8 @@
 	@extend %component-border;
 	@extend %grid-layout-default;
 	@extend %ugly-line-height-workarounds;
+	@include display.display(grid);
 
-	display: grid;
 	padding: variables.$db-spacing-fixed-md;
 	gap: variables.$db-spacing-fixed-xs variables.$db-spacing-fixed-md;
 	inline-size: inherit;

package/build/components/page/page.css

@@ -27,26 +27,34 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 .db-page[data-variant=fixed] {
   block-size: 100%;
   min-block-size: 100%;
-  display: flex;
   flex-direction: column;
   /* workaround for angular */
 }
 .db-page[data-variant=fixed] > :is(.db-header, .db-footer, header, footer) {
-  display: flex;
   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) {
+.db-page[data-variant=fixed] > :is(.db-header, .db-footer, header, footer):not([hidden]) {
   display: flex;
+}
+.db-page[data-variant=fixed]: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] > .db-main {
+.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] > .db-main {
   flex-direction: column;
   overflow: auto;
   flex: 1 1 auto;
   inline-size: 100%;
 }
+.db-page[data-variant=fixed] > .db-main:not([hidden]) {
+  display: flex;
+}

package/build/components/page/page.scss

@@ -1,4 +1,5 @@
 @use "@db-ux/core-foundations/build/styles/variables";
+@use "@db-ux/core-foundations/build/styles/helpers/display";
 
 .db-page-document {
 	block-size: 100%;
@@ -7,7 +8,8 @@
 
 @mixin header-footer-style {
 	> :is(.db-header, .db-footer, header, footer) {
-		display: flex;
+		@include display.display(flex);
+
 		flex: 0 1 auto;
 		flex-grow: 0;
 		flex-shrink: 0;
@@ -33,7 +35,9 @@
 
 		block-size: 100%;
 		min-block-size: 100%;
-		display: flex;
+
+		@include display.display(flex);
+
 		flex-direction: column;
 
 		/* workaround for angular */
@@ -42,7 +46,8 @@
 		}
 
 		> .db-main {
-			display: flex;
+			@include display.display(flex);
+
 			flex-direction: column;
 			overflow: auto;
 			flex: 1 1 auto;

package/build/components/popover/popover.css

@@ -350,10 +350,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 .db-popover {
   position: relative;
-  display: flex;
   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 */
 }

package/build/components/popover/popover.scss

@@ -1,10 +1,13 @@
 @use "@db-ux/core-foundations/build/styles/variables";
+@use "@db-ux/core-foundations/build/styles/helpers/display";
 @use "../../styles/internal/popover-component";
 @use "../../styles/internal/component";
 
 .db-popover {
 	position: relative;
-	display: flex;
+
+	@include display.display(flex);
+
 	block-size: fit-content;
 	inline-size: fit-content;
 

package/build/components/radio/radio.css

@@ -169,11 +169,14 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 }
 .db-radio:is(label),
 .db-radio > 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-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;

package/build/components/select/select.css

@@ -559,8 +559,8 @@ input[type=radio]:checked) > label {
 .db-select > .db-infotext {
   margin-block-start: var(--db-spacing-fixed-2xs);
 }
-.db-select > db-infotext > .db-infotext:is([data-semantic=successful], [data-semantic=critical]),
-.db-select > .db-infotext:is([data-semantic=successful], [data-semantic=critical]) {
+.db-select > db-infotext > .db-infotext:is([data-semantic=successful], [data-semantic=critical]):not([hidden]),
+.db-select > .db-infotext:is([data-semantic=successful], [data-semantic=critical]):not([hidden]) {
   display: none;
 }
 
@@ -603,9 +603,11 @@ input[type=radio]:checked) > label {
 .db-select {
   --db-form-has-before: 0;
   position: relative;
-  display: flex;
   flex-direction: column;
 }
+.db-select:not([hidden]) {
+  display: flex;
+}
 .db-select[data-variant=floating], .db-select[data-hide-label=true] {
   --db-label-visible-above: 0;
 }
@@ -701,15 +703,15 @@ input[type=radio]:checked) [id$=-placeholder] {
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
 .db-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-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-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-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-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
@@ -737,21 +739,21 @@ input[type=radio]:checked) [id$=-placeholder] {
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
 .db-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-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-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-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-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-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-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-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-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-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-select:has(select:not([data-custom-validity]):is(:required):user-invalid) {
@@ -762,12 +764,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-select:has(select:not([data-custom-validity]):is(:required):user-invalid) > db-infotext > .db-infotext[data-semantic=critical],
-.db-select:has(select:not([data-custom-validity]):is(:required):user-invalid) > .db-infotext[data-semantic=critical] {
+.db-select:has(select:not([data-custom-validity]):is(:required):user-invalid) > db-infotext > .db-infotext[data-semantic=critical]:not([hidden]),
+.db-select:has(select:not([data-custom-validity]):is(:required):user-invalid) > .db-infotext[data-semantic=critical]:not([hidden]) {
   display: flex;
 }
-.db-select:has(select:not([data-custom-validity]):is(:required):user-invalid) > db-infotext > .db-infotext:not([data-semantic]),
-.db-select:has(select:not([data-custom-validity]):is(:required):user-invalid) > .db-infotext:not([data-semantic]) {
+.db-select:has(select:not([data-custom-validity]):is(:required):user-invalid) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
+.db-select:has(select:not([data-custom-validity]):is(:required):user-invalid) > .db-infotext:not([data-semantic]):not([hidden]) {
   display: none;
 }
 .db-select:has(select[data-custom-validity=invalid]), .db-select[data-custom-validity=invalid] {
@@ -779,14 +781,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-select:has(select[data-custom-validity=invalid]) > db-infotext > .db-infotext[data-semantic=critical],
-.db-select:has(select[data-custom-validity=invalid]) > .db-infotext[data-semantic=critical], .db-select[data-custom-validity=invalid] > db-infotext > .db-infotext[data-semantic=critical],
-.db-select[data-custom-validity=invalid] > .db-infotext[data-semantic=critical] {
+.db-select:has(select[data-custom-validity=invalid]) > db-infotext > .db-infotext[data-semantic=critical]:not([hidden]),
+.db-select:has(select[data-custom-validity=invalid]) > .db-infotext[data-semantic=critical]:not([hidden]), .db-select[data-custom-validity=invalid] > db-infotext > .db-infotext[data-semantic=critical]:not([hidden]),
+.db-select[data-custom-validity=invalid] > .db-infotext[data-semantic=critical]:not([hidden]) {
   display: flex;
 }
-.db-select:has(select[data-custom-validity=invalid]) > db-infotext > .db-infotext:not([data-semantic]),
-.db-select:has(select[data-custom-validity=invalid]) > .db-infotext:not([data-semantic]), .db-select[data-custom-validity=invalid] > db-infotext > .db-infotext:not([data-semantic]),
-.db-select[data-custom-validity=invalid] > .db-infotext:not([data-semantic]) {
+.db-select:has(select[data-custom-validity=invalid]) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
+.db-select:has(select[data-custom-validity=invalid]) > .db-infotext:not([data-semantic]):not([hidden]), .db-select[data-custom-validity=invalid] > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
+.db-select[data-custom-validity=invalid] > .db-infotext:not([data-semantic]):not([hidden]) {
   display: none;
 }
 .db-select select::placeholder,
@@ -874,6 +876,6 @@ 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)) [id$=-placeholder]:not([hidden]) {
   display: none;
 }

package/build/components/select/select.scss

@@ -6,6 +6,7 @@
 @use "../../styles/internal/form-components";
 @use "../../styles/internal/component";
 @use "../../styles/internal/select-components";
+@use "@db-ux/core-foundations/build/styles/helpers/display";
 
 .db-select-placeholder {
 	@extend %select-absolute-placeholder;
@@ -46,7 +47,7 @@
 
 	&:has(> select option:checked:not(.placeholder)) {
 		[id$="-placeholder"] {
-			display: none;
+			@include display.display(none);
 		}
 	}
 }

package/build/components/stack/stack-web-component.css

@@ -44,13 +44,15 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 @layer variables {}
 
 .db-stack {
-  display: flex;
   gap: var(--db-spacing-fixed-sm);
   justify-content: flex-start;
   block-size: 100%;
   inline-size: 100%;
   overflow: auto;
 }
+.db-stack:not([hidden]) {
+  display: flex;
+}
 .db-stack:is([data-direction=column], :not([data-direction])) {
   flex-direction: column;
 }

package/build/components/stack/stack.css

@@ -44,13 +44,15 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 @layer variables {}
 
 .db-stack {
-  display: flex;
   gap: var(--db-spacing-fixed-sm);
   justify-content: flex-start;
   block-size: 100%;
   inline-size: 100%;
   overflow: auto;
 }
+.db-stack:not([hidden]) {
+  display: flex;
+}
 .db-stack:is([data-direction=column], :not([data-direction])) {
   flex-direction: column;
 }

package/build/components/switch/switch.css

@@ -532,11 +532,14 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 }
 .db-switch:is(label),
 .db-switch > 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-switch:is(label):not([hidden]),
+.db-switch > label:not([hidden]) {
+  display: flex;
+}
 .db-switch input {
   background-color: var(--db-adaptive-bg-basic-transparent-full-default);
   place-content: center center;
@@ -591,13 +594,15 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   inline-size: calc(var(--db-icon-font-size) * 2 + 0.125rem);
   block-size: var(--db-icon-font-size);
   box-sizing: content-box;
-  display: flex;
   align-items: center;
   /* stylelint-disable-next-line db-ux/use-spacings */
   gap: 0.125rem;
   border-radius: var(--db-border-radius-full);
   /* positioned at the end of the track: track length - 100% (thumb width) */
 }
+.db-switch > input:not([hidden]) {
+  display: flex;
+}
 .db-switch > input:not([data-show-icon-trailing=false])::after {
   --db-icon-trailing: "cross";
   margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));

package/build/components/switch/switch.scss

@@ -57,7 +57,9 @@ $checked-active-transition-size: calc(
 		);
 		block-size: form-components.$font-size-height;
 		box-sizing: content-box;
-		display: flex;
+
+		@include helpers.display(flex);
+
 		align-items: center;
 		/* stylelint-disable-next-line db-ux/use-spacings */
 		gap: $switch-fixed-padding;

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

@@ -142,10 +142,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 .db-tab-item {
   position: relative;
-  display: inline-flex;
   list-style-type: "";
   border-radius: var(--db-border-radius-sm);
 }
+.db-tab-item:not([hidden]) {
+  display: inline-flex;
+}
 .db-tab-item:has(input:disabled) {
   opacity: var(--db-opacity-md);
 }
@@ -153,7 +155,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   background-color: var(--db-adaptive-bg-basic-transparent-full-default);
   padding: var(--db-spacing-fixed-xs);
   align-items: center;
-  display: inline-block;
   white-space: nowrap;
   border: 0;
   border-radius: var(--db-border-radius-sm);
@@ -162,6 +163,9 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
   /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
 }
+.db-tab-item label:not([hidden]) {
+  display: inline-block;
+}
 .db-tab-item label:hover:not(:disabled, [aria-disabled=true]) {
   cursor: var(--db-overwrite-cursor, pointer);
 }

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

@@ -13,7 +13,9 @@ $with-icon-padding-calc: calc(
 
 .db-tab-item {
 	position: relative;
-	display: inline-flex;
+
+	@include helpers.display(inline-flex);
+
 	list-style-type: "";
 	border-radius: variables.$db-border-radius-sm;
 
@@ -25,7 +27,9 @@ $with-icon-padding-calc: calc(
 		background-color: colors.$db-adaptive-bg-basic-transparent-full-default;
 		padding: variables.$db-spacing-fixed-xs;
 		align-items: center;
-		display: inline-block;
+
+		@include helpers.display(inline-block);
+
 		white-space: nowrap;
 		border: 0;
 		border-radius: variables.$db-border-radius-sm;

package/build/components/tab-list/tab-list.css

@@ -299,9 +299,11 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   position: relative;
 }
 .db-tab-list > ul {
-  display: flex;
   gap: var(--db-spacing-fixed-sm);
   scroll-behavior: smooth;
   padding: 0;
   margin: 0;
 }
+.db-tab-list > ul:not([hidden]) {
+  display: flex;
+}

package/build/components/tab-list/tab-list.scss

@@ -1,4 +1,5 @@
 @use "@db-ux/core-foundations/build/styles/variables";
+@use "@db-ux/core-foundations/build/styles/helpers/display";
 @use "../../styles/internal/scrollbar";
 
 .db-tab-list {
@@ -8,8 +9,8 @@
 
 	> ul {
 		@extend %scrollbar;
+		@include display.display(flex);
 
-		display: flex;
 		gap: variables.$db-spacing-fixed-sm;
 		scroll-behavior: smooth;
 		padding: 0;

package/build/components/tab-panel/tab-panel.css

@@ -8,6 +8,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 /* Transitions */
 /* Screen sizes */
 /* Container sizes */
-.db-tab-panel {
+.db-tab-panel:not([hidden]) {
   display: none;
 }