@db-ux/core-components 4.4.2 → 4.5.0

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

@@ -0,0 +1,78 @@
+@use "@db-ux/core-foundations/build/styles/variables";
+@use "@db-ux/core-foundations/build/styles/colors";
+@use "@db-ux/core-foundations/build/styles/icons";
+@use "@db-ux/core-foundations/build/styles/helpers";
+@use "../../styles/internal/button-components";
+@use "../../styles/internal/icon-passing";
+
+@mixin interactive-elements {
+	label,
+	button,
+	a {
+		@content;
+	}
+}
+
+$icon-padding-custom-button: calc(
+	#{variables.$db-spacing-fixed-sm} + #{icons.$default-icon-margin-end} +
+		var(--db-icon-font-size)
+);
+
+// generic styles can be found in _button-components.scss
+.db-custom-button {
+	position: relative;
+	max-inline-size: 100%;
+	inline-size: fit-content;
+
+	@include button-components.set-basic-button(
+		icon-passing.$interactive-button-selectors
+	);
+	@include icon-passing.icon-passing;
+	@include icon-passing.icon-passing-trailing;
+
+	&:has(:is(input, button):disabled, :is(input, button, a)[aria-disabled="true"]) {
+		opacity: variables.$db-opacity-md;
+	}
+
+	&[data-variant="brand"] {
+		label {
+			@extend %button-outlined-ghost-colors;
+		}
+
+		:is(a, button) {
+			@extend %button-brand-colors;
+		}
+	}
+
+	label:has(input:checked) {
+		color: colors.$db-adaptive-on-bg-inverted-default;
+		background-color: colors.$db-adaptive-bg-inverted-contrast-max-default;
+	}
+
+	label:has(input[type="checkbox"]:checked) {
+		@include helpers.hover {
+			background-color: colors.$db-adaptive-bg-inverted-contrast-max-hovered;
+		}
+
+		@include helpers.active {
+			background-color: colors.$db-adaptive-bg-inverted-contrast-max-pressed;
+		}
+	}
+
+	a[tabindex="-1"] {
+		cursor: default;
+		pointer-events: none;
+	}
+
+	&[data-width="full"] {
+		inline-size: 100%;
+	}
+
+	&:has(input):focus-within {
+		@extend %focus-placeholder;
+	}
+
+	input {
+		@extend %a11y-visually-hidden;
+	}
+}

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

@@ -1,13 +1,3 @@
-/* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
-/* Use fixed spacings for all kind of distances (margin, padding, ...) */
-/* The primary use-case for responsive spacings are
-paddings/gaps in an application e.g. the <main> should have a responsive padding. */
-/* Elevation */
-/* Border */
-/* Opacity */
-/* Transitions */
-/* Screen sizes */
-/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 .db-custom-select[data-hide-label=true] > label, .db-visually-hidden,
 [data-visually-hidden=true] {
@@ -521,10 +511,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-/**
- * @mixin screen-min-max
- * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
- */
 .db-custom-select:not([data-show-icon-trailing=false])::after {
   color: var(--db-icon-color, inherit);
   display: inline-block;
@@ -544,6 +530,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   text-transform: none;
   overflow: clip;
   vertical-align: var(--db-icon-vertical-align, middle);
+  /* stylelint-disable-next-line db-ux/use-sizing */
   block-size: var(--db-icon-font-size, 1.5rem);
   aspect-ratio: 1;
   flex-shrink: 0;
@@ -565,12 +552,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   }
 }
 
-/**
-	Generates 3 types of placeholders, e.g:
-	- %db-component-variables-md
-	- %db-font-size-md
-	- %db-overwrite-font-size-md
- */
 @layer variables {}
 
 @layer variables {}
@@ -673,8 +654,6 @@ input[type=radio]:checked) > label {
 
 @layer variables {}
 
-/* Use for body tags like <p> */
-/* Use for headline tags like <h1> */
 .db-custom-select summary {
   border: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-100-default);
 }
@@ -1083,14 +1062,29 @@ input[type=radio]:checked) summary:is([type=date],
   padding-inline: var(--db-form-component-padding-inline-start, var(--db-spacing-fixed-sm)) var(--db-form-component-padding-inline-end, var(--db-spacing-fixed-sm));
   /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
 }
-.db-custom-select summary:hover:not(:disabled, [aria-disabled=true]) {
+.db-custom-select summary:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) {
   cursor: var(--db-overwrite-cursor, pointer);
   background-color: var(--db-adaptive-bg-basic-transparent-semi-hovered);
 }
-.db-custom-select summary:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-custom-select summary:hover:not(:disabled, [aria-disabled=true]):is(input) {
+.db-custom-select summary:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-custom-select summary:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
   cursor: initial;
 }
-.db-custom-select summary:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-custom-select summary:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-custom-select summary:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-custom-select summary:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
 .db-custom-select > label {

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

@@ -1,13 +1,3 @@
-/* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
-/* Use fixed spacings for all kind of distances (margin, padding, ...) */
-/* The primary use-case for responsive spacings are
-paddings/gaps in an application e.g. the <main> should have a responsive padding. */
-/* Elevation */
-/* Border */
-/* Opacity */
-/* Transitions */
-/* Screen sizes */
-/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 .db-visually-hidden,
 [data-visually-hidden=true] {
@@ -215,10 +205,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-/**
- * @mixin screen-min-max
- * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
- */
 @keyframes popover-animation {
   0% {
     opacity: 0;
@@ -234,12 +220,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     transform: rotate(1turn);
   }
 }
-/**
-	Generates 3 types of placeholders, e.g:
-	- %db-component-variables-md
-	- %db-font-size-md
-	- %db-overwrite-font-size-md
- */
 @layer variables {}
 
 @layer variables {}
@@ -294,8 +274,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-/* Use for body tags like <p> */
-/* Use for headline tags like <h1> */
 .db-custom-select-dropdown {
   position: absolute;
   z-index: 32;
@@ -306,6 +284,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   /* stylelint-disable-next-line media-query-no-invalid */
 }
 .db-custom-select-dropdown:not([data-width]), .db-custom-select-dropdown[data-width=fixed] {
+  /* stylelint-disable-next-line db-ux/use-sizing */
   inline-size: var(--db-custom-select-dropdown-fixed-inline-size, var(--db-sizing-3xl));
 }
 .db-custom-select-dropdown[data-width=full] {

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

@@ -17,6 +17,7 @@
 
 	&:not([data-width]),
 	&[data-width="fixed"] {
+		/* stylelint-disable-next-line db-ux/use-sizing */
 		inline-size: var(
 			--db-custom-select-dropdown-fixed-inline-size,
 			#{variables.$db-sizing-3xl}

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

@@ -1,13 +1,3 @@
-/* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
-/* Use fixed spacings for all kind of distances (margin, padding, ...) */
-/* The primary use-case for responsive spacings are
-paddings/gaps in an application e.g. the <main> should have a responsive padding. */
-/* Elevation */
-/* Border */
-/* Opacity */
-/* Transitions */
-/* Screen sizes */
-/* Container sizes */
 .db-visually-hidden,
 [data-visually-hidden=true] {
   clip: rect(0, 0, 0, 0) !important;
@@ -62,12 +52,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-/**
-	Generates 3 types of placeholders, e.g:
-	- %db-component-variables-md
-	- %db-font-size-md
-	- %db-overwrite-font-size-md
- */
 @layer variables {}
 
 @layer variables {}
@@ -122,12 +106,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-/* Use for body tags like <p> */
-/* Use for headline tags like <h1> */
-/**
- * @mixin screen-min-max
- * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
- */
 .db-custom-select-form-field:is(summary) {
   list-style: none;
   align-items: center;

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

@@ -1,13 +1,3 @@
-/* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
-/* Use fixed spacings for all kind of distances (margin, padding, ...) */
-/* The primary use-case for responsive spacings are
-paddings/gaps in an application e.g. the <main> should have a responsive padding. */
-/* Elevation */
-/* Border */
-/* Opacity */
-/* Transitions */
-/* Screen sizes */
-/* Container sizes */
 .db-custom-select-list > legend, .db-visually-hidden,
 [data-visually-hidden=true] {
   clip: rect(0, 0, 0, 0) !important;
@@ -62,12 +52,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-/**
-	Generates 3 types of placeholders, e.g:
-	- %db-component-variables-md
-	- %db-font-size-md
-	- %db-overwrite-font-size-md
- */
 @layer variables {}
 
 @layer variables {}
@@ -122,12 +106,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-/* Use for body tags like <p> */
-/* Use for headline tags like <h1> */
-/**
- * @mixin screen-min-max
- * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
- */
 .db-custom-select-list {
   all: unset;
   padding: var(--db-spacing-fixed-sm);

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

@@ -1,13 +1,3 @@
-/* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
-/* Use fixed spacings for all kind of distances (margin, padding, ...) */
-/* The primary use-case for responsive spacings are
-paddings/gaps in an application e.g. the <main> should have a responsive padding. */
-/* Elevation */
-/* Border */
-/* Opacity */
-/* Transitions */
-/* Screen sizes */
-/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 .db-visually-hidden,
 [data-visually-hidden=true] {
@@ -76,12 +66,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   border-radius: var(--db-border-radius-xs);
 }
 
-/**
-	Generates 3 types of placeholders, e.g:
-	- %db-component-variables-md
-	- %db-font-size-md
-	- %db-overwrite-font-size-md
- */
 @layer variables {}
 
 @layer variables {}
@@ -146,12 +130,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-/* Use for body tags like <p> */
-/* Use for headline tags like <h1> */
-/**
- * @mixin screen-min-max
- * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
- */
 db-custom-select-list-item:not(:last-of-type) .db-custom-select-list-item[data-divider=true] {
   --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
   position: var(--db-tooltip-parent-position, relative);
@@ -189,24 +167,54 @@ db-custom-select-list-item:not(:last-of-type) .db-custom-select-list-item[data-d
 .db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)) {
   /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
 }
-.db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):hover:not(:disabled, [aria-disabled=true]) {
+.db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) {
   cursor: var(--db-overwrite-cursor, pointer);
   background-color: var(--db-adaptive-bg-basic-transparent-full-hovered);
 }
-.db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):hover:not(:disabled, [aria-disabled=true]):is(input) {
+.db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
   cursor: initial;
 }
-.db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
-.db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):active:not(:disabled, [aria-disabled=true]) {
+.db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) {
   cursor: var(--db-overwrite-cursor, pointer);
   background-color: var(--db-adaptive-bg-basic-transparent-full-pressed);
 }
-.db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):active:not(:disabled, [aria-disabled=true]):is(textarea), .db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):active:not(:disabled, [aria-disabled=true]):is(input) {
+.db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
   cursor: initial;
 }
-.db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
 .db-custom-select-list-item span {

package/build/components/divider/divider.css

@@ -1,13 +1,3 @@
-/* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
-/* Use fixed spacings for all kind of distances (margin, padding, ...) */
-/* The primary use-case for responsive spacings are
-paddings/gaps in an application e.g. the <main> should have a responsive padding. */
-/* Elevation */
-/* Border */
-/* Opacity */
-/* Transitions */
-/* Screen sizes */
-/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 

package/build/components/drawer/drawer.css

@@ -1,13 +1,3 @@
-/* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
-/* Use fixed spacings for all kind of distances (margin, padding, ...) */
-/* The primary use-case for responsive spacings are
-paddings/gaps in an application e.g. the <main> should have a responsive padding. */
-/* Elevation */
-/* Border */
-/* Opacity */
-/* Transitions */
-/* Screen sizes */
-/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 
@@ -58,10 +48,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     transform: rotate(1turn);
   }
 }
-/**
- * @mixin screen-min-max
- * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
- */
 dialog {
   padding: 0;
   margin: 0;
@@ -108,7 +94,9 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
 }
 
 .db-drawer .db-drawer-container[data-direction=down]:not([data-width=full]), .db-drawer .db-drawer-container[data-direction=up]:not([data-width=full]) {
+  /* stylelint-disable-next-line db-ux/use-sizing */
   max-block-size: var(--db-drawer-max-height, calc(100% - var(--db-spacing-fixed-xl)));
+  /* stylelint-disable-next-line db-ux/use-sizing */
   min-block-size: var(--db-drawer-min-height, calc(100% - var(--db-spacing-fixed-xl)));
   max-inline-size: none;
 }
@@ -227,7 +215,9 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
   box-shadow: var(--db-elevation-md);
 }
 .db-drawer .db-drawer-container:not([data-width=full]) {
+  /* stylelint-disable-next-line db-ux/use-sizing */
   max-inline-size: var(--db-drawer-max-width, calc(100% - var(--db-spacing-fixed-xl)));
+  /* stylelint-disable-next-line db-ux/use-sizing */
   min-inline-size: var(--db-drawer-min-width, calc(100% - var(--db-spacing-fixed-xl)));
 }
 .db-drawer .db-drawer-container:not([data-width=full]):not([data-direction]), .db-drawer .db-drawer-container:not([data-width=full])[data-direction=right] {

package/build/components/drawer/drawer.scss

@@ -32,10 +32,12 @@
 		/// @propertyname max-block-size
 		/// @cssprop --db-drawer-max-height
 		/// @default calc(100% - #{variables.$db-spacing-fixed-xl})
+		/* stylelint-disable-next-line db-ux/use-sizing */
 		max-block-size: var(
 			--db-drawer-max-height,
 			calc(100% - #{variables.$db-spacing-fixed-xl})
 		);
+		/* stylelint-disable-next-line db-ux/use-sizing */
 		min-block-size: var(
 			--db-drawer-min-height,
 			calc(100% - #{variables.$db-spacing-fixed-xl})
@@ -163,10 +165,12 @@ $spacings: (
 			///   <div class="db-drawer db-drawer-wide">
 			///     <!-- wide drawer -->
 			///   </div>
+			/* stylelint-disable-next-line db-ux/use-sizing */
 			max-inline-size: var(
 				--db-drawer-max-width,
 				calc(100% - #{variables.$db-spacing-fixed-xl})
 			);
+			/* stylelint-disable-next-line db-ux/use-sizing */
 			min-inline-size: var(
 				--db-drawer-min-width,
 				calc(100% - #{variables.$db-spacing-fixed-xl})

package/build/components/header/header.css

@@ -1,13 +1,3 @@
-/* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
-/* Use fixed spacings for all kind of distances (margin, padding, ...) */
-/* The primary use-case for responsive spacings are
-paddings/gaps in an application e.g. the <main> should have a responsive padding. */
-/* Elevation */
-/* Border */
-/* Opacity */
-/* Transitions */
-/* Screen sizes */
-/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 
@@ -43,16 +33,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-/**
- * @mixin screen-min-max
- * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
- */
-/**
-	Generates 3 types of placeholders, e.g:
-	- %db-component-variables-md
-	- %db-font-size-md
-	- %db-overwrite-font-size-md
- */
 @layer variables {}
 
 @layer variables {}
@@ -117,8 +97,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-/* Use for body tags like <p> */
-/* Use for headline tags like <h1> */
 @layer variables {}
 
 @layer variables {}

package/build/components/icon/icon.css

@@ -1,13 +1,3 @@
-/* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
-/* Use fixed spacings for all kind of distances (margin, padding, ...) */
-/* The primary use-case for responsive spacings are
-paddings/gaps in an application e.g. the <main> should have a responsive padding. */
-/* Elevation */
-/* Border */
-/* Opacity */
-/* Transitions */
-/* Screen sizes */
-/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 

package/build/components/infotext/infotext.css

@@ -1,13 +1,3 @@
-/* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
-/* Use fixed spacings for all kind of distances (margin, padding, ...) */
-/* The primary use-case for responsive spacings are
-paddings/gaps in an application e.g. the <main> should have a responsive padding. */
-/* Elevation */
-/* Border */
-/* Opacity */
-/* Transitions */
-/* Screen sizes */
-/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 
@@ -43,12 +33,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-/**
-	Generates 3 types of placeholders, e.g:
-	- %db-component-variables-md
-	- %db-font-size-md
-	- %db-overwrite-font-size-md
- */
 @layer variables {}
 
 @layer variables {}
@@ -123,8 +107,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-/* Use for body tags like <p> */
-/* Use for headline tags like <h1> */
 .db-infotext:not([data-icon]):not([data-show-icon-leading=false])::before {
   color: var(--db-icon-color, inherit);
   display: inline-block;
@@ -144,6 +126,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   text-transform: none;
   overflow: clip;
   vertical-align: var(--db-icon-vertical-align, middle);
+  /* stylelint-disable-next-line db-ux/use-sizing */
   block-size: var(--db-icon-font-size, 1.5rem);
   aspect-ratio: 1;
   flex-shrink: 0;
@@ -188,6 +171,9 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 .db-infotext[data-semantic=adaptive]::before, .db-infotext:not([data-semantic])::before {
   --db-icon-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
 }
+.db-infotext[data-wrap=false] {
+  white-space: nowrap;
+}
 .db-infotext[data-semantic=neutral] {
   color: var(--db-neutral-on-bg-basic-emphasis-80-default);
 }

package/build/components/infotext/infotext.scss

@@ -29,6 +29,10 @@
 		}
 	}
 
+	&[data-wrap="false"] {
+		white-space: nowrap;
+	}
+
 	@each $name, $colors in colors.$variant-colors {
 		&[data-semantic="#{$name}"] {
 			@include icons.variant-icons($name);