@db-ux/core-components 3.1.16 → 3.1.18

package/build/components/drawer/drawer.scss

@@ -26,6 +26,10 @@
 
 %full-horizontal {
 	&:not([data-width="full"]) {
+		/// Sets the maximum height of the drawer
+		/// @propertyname max-block-size
+		/// @cssprop --db-drawer-max-height
+		/// @default calc(100% - #{variables.$db-spacing-fixed-xl})
 		max-block-size: var(
 			--db-drawer-max-height,
 			calc(100% - #{variables.$db-spacing-fixed-xl})
@@ -87,6 +91,10 @@ $spacings: (
 
 	.db-drawer-header {
 		// We need this variable to overwrite it inside the header
+		/// Controls the bottom padding inside the drawer header
+		/// @propertyname padding-block-end
+		/// @cssprop --db-drawer-header-padding-block-end
+		/// @default #{map.get($spacing, "block")}
 		/* stylelint-disable-next-line db-ux/use-spacings */
 		padding-block-end: var(
 			--db-drawer-header-padding-block-end,
@@ -97,6 +105,10 @@ $spacings: (
 
 	.db-drawer-content {
 		// We need this variable to overwrite it inside the header
+		/// Controls left/right padding inside the drawer content area
+		/// @propertyname padding-inline
+		/// @cssprop --db-drawer-content-padding-inline
+		/// @default #{map.get($spacing, "inline")}
 		/* stylelint-disable-next-line db-ux/use-spacings */
 		padding-inline: var(
 			--db-drawer-content-padding-inline,
@@ -125,8 +137,8 @@ $spacings: (
 	.db-drawer-container {
 		@extend %direction-right;
 		@extend %spacing-drawer;
+		@include helpers.display(flex);
 
-		display: flex;
 		flex-direction: column;
 		background-color: colors.$db-adaptive-bg-basic-level-1-default;
 		block-size: 100%;
@@ -135,6 +147,19 @@ $spacings: (
 		box-shadow: variables.$db-elevation-md;
 
 		&:not([data-width="full"]) {
+			/// Sets the maximum width of the drawer
+			/// and some default values for the drawer
+			/// @propertyname max-inline-size
+			/// @cssprop --db-drawer-max-width
+			/// @default calc(100% - #{variables.$db-spacing-fixed-xl})
+			///
+			/// @example css - Wide drawer
+			///   .db-drawer-wide {
+			///     --db-drawer-max-width: 800px;
+			///   }
+			///   <div class="db-drawer db-drawer-wide">
+			///     <!-- wide drawer -->
+			///   </div>
 			max-inline-size: var(
 				--db-drawer-max-width,
 				calc(100% - #{variables.$db-spacing-fixed-xl})
@@ -179,8 +204,7 @@ $spacings: (
 		}
 
 		.db-drawer-header {
-			display: none;
-
+			@include helpers.display(none);
 			@include helpers.divider("bottom");
 
 			.db-drawer-header-text {
@@ -199,7 +223,7 @@ $spacings: (
 
 			&:has(.button-close-drawer),
 			&:has(:not(.db-drawer-header-text:empty)) {
-				display: flex;
+				@include helpers.display(flex);
 			}
 		}
 	}
@@ -213,7 +237,7 @@ $spacings: (
 		background-color: transparent;
 
 		&[open] {
-			display: flex;
+			@include helpers.display(flex);
 		}
 
 		&:not([data-direction]),

package/build/components/header/header.css

@@ -420,7 +420,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 .db-header {
   background-color: var(--db-adaptive-bg-basic-level-1-default);
-  display: flex;
   flex-direction: column;
   position: relative;
   min-block-size: calc(var(--db-sizing-md) + 2 * var(--db-spacing-fixed-xs));
@@ -428,6 +427,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-header:not([hidden]) {
+  display: flex;
+}
 @media screen and (min-width: 64em) {
   .db-header:not([data-force-mobile]), .db-header[data-force-mobile=false] {
     --db-drawer-max-width: 48em;
@@ -445,7 +447,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   margin-inline: auto;
   max-inline-size: 90em;
 }
-.db-header .db-link {
+.db-header .db-link:not([hidden]) {
   display: inline-block;
 }
 .db-header[data-on-forcing-mobile=true] {
@@ -458,7 +460,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 .db-header:has(.db-header-navigation:empty) .db-header-navigation-container::before, .db-header:has(.db-brand:empty) .db-header-navigation-container::before {
   display: none;
 }
-.db-header:has(.db-header-navigation:empty):has(.db-header-meta-navigation:empty):has(.db-header-secondary-action:empty) .db-header-burger-menu-container {
+.db-header:has(.db-header-navigation:empty):has(.db-header-meta-navigation:empty):has(.db-header-secondary-action:empty) .db-header-burger-menu-container:not([hidden]) {
   display: none;
 }
 .db-header:has(.db-header-navigation:empty):has(.db-header-secondary-action:empty) .db-header-action-container::before {
@@ -466,7 +468,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 }
 
 .db-header-navigation-bar {
-  display: flex;
   position: relative;
   padding: var(--db-spacing-fixed-xs) var(--db-spacing-fixed-md);
   inline-size: 100%;
@@ -474,6 +475,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-header-navigation-bar:not([hidden]) {
+  display: flex;
+}
 @media screen and (min-width: 64em) {
   .db-header-navigation-bar:not([data-force-mobile]), .db-header-navigation-bar[data-force-mobile=false] {
     padding: var(--db-spacing-fixed-md) var(--db-spacing-fixed-lg);
@@ -481,7 +485,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 }
 
 .db-header-meta-navigation {
-  display: flex;
   flex-direction: column;
   gap: var(--db-spacing-fixed-sm);
   justify-content: flex-end;
@@ -492,6 +495,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-header-meta-navigation:not([hidden]) {
+  display: flex;
+}
 .db-header-meta-navigation[data-emphasis=strong] {
   --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
 }
@@ -520,16 +526,15 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   .db-header-meta-navigation:not([data-force-mobile])::before, .db-header-meta-navigation[data-force-mobile=false]::before {
     display: none;
   }
-  .db-header-meta-navigation:not([data-force-mobile]):empty, .db-header-meta-navigation[data-force-mobile=false]:empty {
+  .db-header-meta-navigation:not([data-force-mobile]):empty:not([hidden]), .db-header-meta-navigation[data-force-mobile=false]:empty:not([hidden]) {
     display: none;
   }
 }
-.db-header-meta-navigation:empty {
+.db-header-meta-navigation:empty:not([hidden]) {
   display: none;
 }
 
 .db-header-navigation-container {
-  display: inherit;
   flex: 1 1 auto;
   inline-size: 100%;
   align-items: center;
@@ -537,6 +542,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-header-navigation-container:not([hidden]) {
+  display: inherit;
+}
 @media screen and (min-width: 64em) {
   .db-header-navigation-container:not([data-force-mobile]), .db-header-navigation-container[data-force-mobile=false] {
     --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
@@ -573,7 +581,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   margin-inline-start: auto;
 }
 
-.db-header-brand-container:not(:has(> :nth-child(1))) {
+.db-header-brand-container:not(:has(> :nth-child(1))):not([hidden]) {
   display: none;
 }
 
@@ -582,7 +590,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
 @media screen and (min-width: 64em) {
-  .db-header-action-container:has(> .db-header-secondary-action:empty):not([data-force-mobile]), .db-header-action-container:has(> .db-header-secondary-action:empty)[data-force-mobile=false] {
+  .db-header-action-container:has(> .db-header-secondary-action:empty):not([data-force-mobile]):not([hidden]), .db-header-action-container:has(> .db-header-secondary-action:empty)[data-force-mobile=false]:not([hidden]) {
     display: none;
   }
 }
@@ -630,12 +638,15 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 .db-header-action-container {
   align-items: center;
   block-size: 100%;
-  display: inherit;
   gap: inherit;
   flex: 0 1 auto;
   flex-grow: 0;
   flex-shrink: 0;
 }
+.db-header-brand-container:not([hidden]),
+.db-header-action-container:not([hidden]) {
+  display: inherit;
+}
 
 .db-header-secondary-action {
   flex: 0 1 auto;
@@ -672,13 +683,15 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 }
 
 .db-header-drawer-navigation {
-  display: flex;
   flex-direction: column;
   flex: 1 1 auto;
   block-size: 100%;
   overflow: auto;
   justify-content: space-between;
 }
+.db-header-drawer-navigation:not([hidden]) {
+  display: flex;
+}
 
 .db-header-navigation {
   padding-block: var(--db-spacing-fixed-md);
@@ -693,12 +706,15 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 .db-header-navigation,
 .db-header-secondary-action {
-  display: flex;
   gap: var(--db-spacing-fixed-sm);
   padding-inline: var(--db-spacing-fixed-md);
   /* stylelint-disable-next-line media-query-no-invalid */
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
+.db-header-navigation:not([hidden]),
+.db-header-secondary-action:not([hidden]) {
+  display: flex;
+}
 @media screen and (min-width: 64em) {
   .db-header-navigation:not([data-force-mobile]), .db-header-navigation[data-force-mobile=false],
   .db-header-secondary-action:not([data-force-mobile]),
@@ -716,32 +732,38 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   padding-block-end: 0;
 }
 .db-header-drawer .db-drawer-content {
-  display: flex;
   flex-direction: column;
   block-size: 100%;
   overflow: hidden;
 }
+.db-header-drawer .db-drawer-content:not([hidden]) {
+  display: flex;
+}
 
 /* Only for Desktop */
 .db-header-meta-navigation,
 .db-header-navigation-container > .db-header-navigation,
 .db-header-action-container > .db-header-secondary-action {
-  display: none;
   /* stylelint-disable-next-line media-query-no-invalid */
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
+.db-header-meta-navigation:not([hidden]),
+.db-header-navigation-container > .db-header-navigation:not([hidden]),
+.db-header-action-container > .db-header-secondary-action:not([hidden]) {
+  display: none;
+}
 @media screen and (min-width: 64em) {
-  .db-header-meta-navigation:not([data-force-mobile]), .db-header-meta-navigation[data-force-mobile=false],
-  .db-header-navigation-container > .db-header-navigation:not([data-force-mobile]),
-  .db-header-navigation-container > .db-header-navigation[data-force-mobile=false],
-  .db-header-action-container > .db-header-secondary-action:not([data-force-mobile]),
-  .db-header-action-container > .db-header-secondary-action[data-force-mobile=false] {
+  .db-header-meta-navigation:not([data-force-mobile]):not([hidden]), .db-header-meta-navigation[data-force-mobile=false]:not([hidden]),
+  .db-header-navigation-container > .db-header-navigation:not([data-force-mobile]):not([hidden]),
+  .db-header-navigation-container > .db-header-navigation[data-force-mobile=false]:not([hidden]),
+  .db-header-action-container > .db-header-secondary-action:not([data-force-mobile]):not([hidden]),
+  .db-header-action-container > .db-header-secondary-action[data-force-mobile=false]:not([hidden]) {
     display: inherit;
   }
 }
 
 /* Only for Mobile */
-.db-header-drawer-navigation > .db-header-meta-navigation:not(:empty) {
+.db-header-drawer-navigation > .db-header-meta-navigation:not(:empty):not([hidden]) {
   display: inherit;
 }
 
@@ -751,9 +773,9 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
 @media screen and (min-width: 64em) {
-  .db-header-drawer:not([data-force-mobile]), .db-header-drawer[data-force-mobile=false],
-  .db-header-burger-menu-container:not([data-force-mobile]),
-  .db-header-burger-menu-container[data-force-mobile=false] {
+  .db-header-drawer:not([data-force-mobile]):not([hidden]), .db-header-drawer[data-force-mobile=false]:not([hidden]),
+  .db-header-burger-menu-container:not([data-force-mobile]):not([hidden]),
+  .db-header-burger-menu-container[data-force-mobile=false]:not([hidden]) {
     display: none;
   }
 }

package/build/components/header/header.scss

@@ -7,7 +7,9 @@
 
 .db-header {
 	background-color: colors.$db-adaptive-bg-basic-level-1-default;
-	display: flex;
+
+	@include helpers.display(flex);
+
 	flex-direction: column;
 	position: relative;
 	min-block-size: component.$min-mobile-header-height;
@@ -34,7 +36,7 @@
 	}
 
 	.db-link {
-		display: inline-block;
+		@include helpers.display(inline-block);
 	}
 
 	&[data-on-forcing-mobile="true"] {
@@ -59,7 +61,7 @@
 			.db-header-meta-navigation:empty
 		):has(.db-header-secondary-action:empty) {
 		.db-header-burger-menu-container {
-			display: none;
+			@include helpers.display(none);
 		}
 	}
 
@@ -73,7 +75,8 @@
 }
 
 .db-header-navigation-bar {
-	display: flex;
+	@include helpers.display(flex);
+
 	position: relative;
 	padding: variables.$db-spacing-fixed-xs variables.$db-spacing-fixed-md;
 	inline-size: 100%;
@@ -86,8 +89,8 @@
 
 .db-header-meta-navigation {
 	@extend %db-density-functional;
+	@include helpers.display(flex);
 
-	display: flex;
 	flex-direction: column;
 	gap: variables.$db-spacing-fixed-sm;
 	justify-content: flex-end;
@@ -107,17 +110,18 @@
 		}
 
 		&:empty {
-			display: none;
+			@include helpers.display(none);
 		}
 	}
 
 	&:empty {
-		display: none;
+		@include helpers.display(none);
 	}
 }
 
 .db-header-navigation-container {
-	display: inherit;
+	@include helpers.display(inherit);
+
 	flex: 1 1 auto;
 	inline-size: 100%;
 	align-items: center;
@@ -139,12 +143,12 @@
 }
 
 .db-header-brand-container:not(:has(> :nth-child(1))) {
-	display: none;
+	@include helpers.display(none);
 }
 
 .db-header-action-container:has(> .db-header-secondary-action:empty) {
 	@include screen-sizes.screen("md") {
-		display: none;
+		@include helpers.display(none);
 	}
 }
 
@@ -172,7 +176,9 @@
 .db-header-action-container {
 	align-items: center;
 	block-size: 100%;
-	display: inherit;
+
+	@include helpers.display(inherit);
+
 	gap: inherit;
 	flex: 0 1 auto;
 	flex-grow: 0;
@@ -195,7 +201,8 @@
 }
 
 .db-header-drawer-navigation {
-	display: flex;
+	@include helpers.display(flex);
+
 	flex-direction: column;
 	flex: 1 1 auto;
 	block-size: 100%;
@@ -213,7 +220,8 @@
 
 .db-header-navigation,
 .db-header-secondary-action {
-	display: flex;
+	@include helpers.display(flex);
+
 	gap: variables.$db-spacing-fixed-sm;
 	padding-inline: variables.$db-spacing-fixed-md;
 
@@ -234,7 +242,8 @@
 	padding-block-end: 0;
 
 	.db-drawer-content {
-		display: flex;
+		@include helpers.display(flex);
+
 		flex-direction: column;
 		block-size: 100%;
 		overflow: hidden;
@@ -245,21 +254,21 @@
 .db-header-meta-navigation,
 .db-header-navigation-container > .db-header-navigation,
 .db-header-action-container > .db-header-secondary-action {
-	display: none;
+	@include helpers.display(none);
 
 	@include screen-sizes.screen("md") {
-		display: inherit;
+		@include helpers.display(inherit);
 	}
 }
 
 /* Only for Mobile */
 .db-header-drawer-navigation > .db-header-meta-navigation:not(:empty) {
-	display: inherit;
+	@include helpers.display(inherit);
 }
 
 .db-header-drawer,
 .db-header-burger-menu-container {
 	@include screen-sizes.screen("md") {
-		display: none;
+		@include helpers.display(none);
 	}
 }

package/build/components/icon/icon.css

@@ -52,7 +52,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-icon-margin-end: 0;
 }
 @supports (-webkit-hyphens: none) {
-  .db-icon {
+  .db-icon:not([hidden]) {
     display: inline-block;
   }
   .db-icon::before {

package/build/components/icon/icon.scss

@@ -1,11 +1,12 @@
 @use "@db-ux/core-foundations/build/styles/icons";
+@use "@db-ux/core-foundations/build/styles/helpers/display";
 
 .db-icon {
 	@include icons.is-icon-text-replace;
 
 	/* Safari hack */
 	@supports (-webkit-hyphens: none) {
-		display: inline-block;
+		@include display.display(inline-block);
 
 		&::before {
 			block-size: auto;

package/build/components/infotext/infotext.css

@@ -163,6 +163,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 .db-infotext {
   --db-icon-margin-end: var(--db-spacing-fixed-2xs);
+}
+.db-infotext:not([hidden]) {
   display: flex;
 }
 .db-infotext:not([data-icon]) {

package/build/components/infotext/infotext.scss

@@ -1,6 +1,7 @@
 @use "sass:map";
 @use "@db-ux/core-foundations/build/styles/fonts";
 @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";
 
@@ -8,8 +9,7 @@
 	--db-icon-margin-end: #{variables.$db-spacing-fixed-2xs};
 
 	@extend %db-overwrite-font-size-sm;
-
-	display: flex;
+	@include display.display(flex);
 
 	@include icons.has-no-icon {
 		@include icons.to-filled-icon;

package/build/components/input/input.css

@@ -559,8 +559,8 @@ input[type=radio]:checked) > label {
 .db-input > .db-infotext {
   margin-block-start: var(--db-spacing-fixed-2xs);
 }
-.db-input > db-infotext > .db-infotext:is([data-semantic=successful], [data-semantic=critical]),
-.db-input > .db-infotext:is([data-semantic=successful], [data-semantic=critical]) {
+.db-input > db-infotext > .db-infotext:is([data-semantic=successful], [data-semantic=critical]):not([hidden]),
+.db-input > .db-infotext:is([data-semantic=successful], [data-semantic=critical]):not([hidden]) {
   display: none;
 }
 
@@ -569,10 +569,12 @@ input[type=radio]:checked) > label {
   white-space: nowrap;
   justify-content: center;
   text-align: center;
-  display: inline-flex;
   align-items: center;
   vertical-align: top;
 }
+.db-input input:not([hidden])::file-selector-button {
+  display: inline-flex;
+}
 
 .db-input {
   min-inline-size: var(--db-form-component-min-inline-size, var(--db-sizing-lg));
@@ -581,9 +583,11 @@ input[type=radio]:checked) > label {
 .db-input {
   --db-form-has-before: 0;
   position: relative;
-  display: flex;
   flex-direction: column;
 }
+.db-input:not([hidden]) {
+  display: flex;
+}
 .db-input[data-variant=floating], .db-input[data-hide-label=true] {
   --db-label-visible-above: 0;
 }
@@ -677,15 +681,15 @@ input[type=radio]:checked) [id$=-placeholder] {
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
 .db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):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-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):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-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):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-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):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-input:has(input[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
@@ -713,21 +717,21 @@ input[type=radio]:checked) [id$=-placeholder] {
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
 .db-input:has(input[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-input:has(input[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
-> db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful], .db-input[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-input[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-input[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-input:has(input[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-input:has(input[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
-> db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]), .db-input[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-input[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-input[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-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-invalid) {
@@ -738,12 +742,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-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-invalid) > db-infotext > .db-infotext[data-semantic=critical],
-.db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-invalid) > .db-infotext[data-semantic=critical] {
+.db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-invalid) > db-infotext > .db-infotext[data-semantic=critical]:not([hidden]),
+.db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-invalid) > .db-infotext[data-semantic=critical]:not([hidden]) {
   display: flex;
 }
-.db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-invalid) > db-infotext > .db-infotext:not([data-semantic]),
-.db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-invalid) > .db-infotext:not([data-semantic]) {
+.db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-invalid) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
+.db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-invalid) > .db-infotext:not([data-semantic]):not([hidden]) {
   display: none;
 }
 .db-input:has(input[data-custom-validity=invalid]), .db-input[data-custom-validity=invalid] {
@@ -755,14 +759,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-input:has(input[data-custom-validity=invalid]) > db-infotext > .db-infotext[data-semantic=critical],
-.db-input:has(input[data-custom-validity=invalid]) > .db-infotext[data-semantic=critical], .db-input[data-custom-validity=invalid] > db-infotext > .db-infotext[data-semantic=critical],
-.db-input[data-custom-validity=invalid] > .db-infotext[data-semantic=critical] {
+.db-input:has(input[data-custom-validity=invalid]) > db-infotext > .db-infotext[data-semantic=critical]:not([hidden]),
+.db-input:has(input[data-custom-validity=invalid]) > .db-infotext[data-semantic=critical]:not([hidden]), .db-input[data-custom-validity=invalid] > db-infotext > .db-infotext[data-semantic=critical]:not([hidden]),
+.db-input[data-custom-validity=invalid] > .db-infotext[data-semantic=critical]:not([hidden]) {
   display: flex;
 }
-.db-input:has(input[data-custom-validity=invalid]) > db-infotext > .db-infotext:not([data-semantic]),
-.db-input:has(input[data-custom-validity=invalid]) > .db-infotext:not([data-semantic]), .db-input[data-custom-validity=invalid] > db-infotext > .db-infotext:not([data-semantic]),
-.db-input[data-custom-validity=invalid] > .db-infotext:not([data-semantic]) {
+.db-input:has(input[data-custom-validity=invalid]) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
+.db-input:has(input[data-custom-validity=invalid]) > .db-infotext:not([data-semantic]):not([hidden]), .db-input[data-custom-validity=invalid] > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
+.db-input[data-custom-validity=invalid] > .db-infotext:not([data-semantic]):not([hidden]) {
   display: none;
 }
 .db-input input::placeholder,

package/build/components/link/link.css

@@ -248,7 +248,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
  * @mixin screen-min-max
  * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
  */
-.db-link a, .db-link {
+.db-link a:not([hidden]), .db-link:not([hidden]) {
   display: inline-block;
 }
 .db-link a:not([data-wrap=true]), .db-link:not([data-wrap=true]) {
@@ -289,7 +289,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 .db-link:not([data-wrap=true], [data-variant=inline]) {
   white-space: nowrap;
 }
-[data-variant=inline].db-link {
+[data-variant=inline].db-link:not([hidden]) {
   display: inline;
 }
 .db-link:focus-visible {