@db-ux/core-components 4.0.3 → 4.1.0

package/CHANGELOG.md

@@ -1,20 +1,45 @@
 # @db-ux/core-components
 
+## 4.1.0
+
+### Minor Changes
+
+- refactor(notification): update and simplify grid layout for block link variant - [see commit cb83f96](https://github.com/db-ux-design-system/core-web/commit/cb83f966eaf29c85b4cf0079750bdd563f216d6e)
+
+- fix(DBCustomSelect): properly announce selected options - [see commit 773edeb](https://github.com/db-ux-design-system/core-web/commit/773edeb943a085eb79e1c8d59059137b2830fbf0):
+  - feat(DBCustomSelect): introduce new property `selectedPrefix`
+
+### Patch Changes
+
+- fix(DBCustomSelect): automatically handle form reset events - [see commit 6af5246](https://github.com/db-ux-design-system/core-web/commit/6af5246b3b2e6febdc6ff6342ba1a8eb10184d14):
+  - An event listener is now added for every form component (input, custom-select, etc.) when a `form` property is passed.
+  - This listener detects form resets and updates the component's internal value/checked state accordingly.
+  - > **Note**: This does not work for `ngModel` in Angular.
+
+- fix(button): Replace fixed height with min-height for buttons to allow dynamic height adjustment when text wraps - [see commit d1fd2c4](https://github.com/db-ux-design-system/core-web/commit/d1fd2c4e58a5ed6f75fab44700cd2d93c7232474)
+
+## 4.0.4
+
+### Patch Changes
+
+- fix: hide-animation for drawer - [see commit d4a73fa](https://github.com/db-ux-design-system/core-web/commit/d4a73fa9faba38b6f20fda6f7c85d5c6617793fe)
+
 ## 4.0.3
 
-_version bump_
+### Patch Changes
 
+- chore: generate Amazon Q rule file with [`@db-ux/agent-cli` node package](https://www.npmjs.com/package/@db-ux/agent-cli) - [see commit b61c8b1](https://github.com/db-ux-design-system/core-web/commit/b61c8b14992f5a5b3615c6bff74018d5682aa0cc)
 
 ## 4.0.2
 
 ### Patch Changes
 
-- chore: update instructions files for better copilot outputs - [see commit 797a114](https://github.com/db-ux-design-system/core-web/commit/797a114d7abc680667276f8ffc2f7f4482d89d3e):
+- chore: update instructions files for better copilot outputs - [see commit e4bc905](https://github.com/db-ux-design-system/core-web/commit/e4bc90508479387371d816d5776f9f568aa5fb82):
   - fix: add some missing variables
 
-- fix(card): Remove the obsolete but harmful declaration regarding wrapping button and link styles. - [see commit 797a114](https://github.com/db-ux-design-system/core-web/commit/797a114d7abc680667276f8ffc2f7f4482d89d3e)
+- fix(card): Remove the obsolete but harmful declaration regarding wrapping button and link styles. - [see commit 34c78df](https://github.com/db-ux-design-system/core-web/commit/34c78dffd4f43b0ac740574358b426a562e05cd0)
 
-- Set border of select, textarea, custom select and input to corresponding color when in/valid state is set. - [see commit 797a114](https://github.com/db-ux-design-system/core-web/commit/797a114d7abc680667276f8ffc2f7f4482d89d3e)
+- Set border of select, textarea, custom select and input to corresponding color when in/valid state is set. - [see commit 2a02263](https://github.com/db-ux-design-system/core-web/commit/2a022632f8fea7445e77fb632f109d6cd093e2d3)
 
 ## 4.0.1
 
@@ -57,18 +82,18 @@ _version bump_
 
 ### Patch Changes
 
-- 0c20c00: fix: color mode for textarea resizer control set by color-mode-switch documentation UI component
-- 0c20c00: refactor: enabling `hidden` HTML attribute in every context in which we need to set overwriting styling declarations (`display`)
+- fix: color mode for textarea resizer control set by color-mode-switch documentation UI component - [see commit 354e270](https://github.com/db-ux-design-system/core-web/commit/354e27029a4378288a97ed5e31b75c11758f0c01)
+- refactor: enabling `hidden` HTML attribute in every context in which we need to set overwriting styling declarations (`display`) - [see commit 4826455](https://github.com/db-ux-design-system/core-web/commit/4826455637590b6ae780afb93abb9effe9380342)
   - @db-ux/core-foundations@3.1.17
 
 ## 3.1.16
 
 ### Patch Changes
 
-- a28eb71: fix(custom-select): keyboard navigation for option groups in single-select mode:
+- a28eb71: fix(custom-select): keyboard navigation for option groups in single-select mode - [see commit 6d60bab](https://github.com/db-ux-design-system/core-web/commit/6d60bab2eb87f16a9ffa942085bffd658564769c):
   - Fixes a keyboard accessibility issue where users could not navigate to options in subsequent option groups using arrow keys in single-select mode.
   - Now, all options are accessible via keyboard regardless of group boundaries.
-- a28eb71: fix: JS framework core-components packages are missing `@db-ux` dependencies
+- fix: JS framework core-components packages are missing `@db-ux` dependencies - [see commit 49df866](https://github.com/db-ux-design-system/core-web/commit/49df866e753a9459f5acdca4ad1e19141b477471)
   - @db-ux/core-foundations@3.1.16
 
 ## 3.1.15

package/build/assets/fonts/generate-eu-fonts.ts

@@ -27,7 +27,7 @@ const generateFonts = async () => {
 	try {
 		const files = await glob(`${__dirname}/*.ttf`);
 
-		for (const file of files) {
+		for (const file of files.map(f=> f.replaceAll('\\', '/'))) {
 			// Security: Validate that the file is within the expected directory
 			// and has the expected extension to prevent path traversal attacks
 			if (!file.startsWith(__dirname) || !file.endsWith('.ttf')) {

package/build/assets/fonts/unicode-eu.txt

@@ -12,3 +12,4 @@ U+010C, U+010D, U+010E, U+010F, U+011A, U+011B, U+0147, U+0148, U+0158, U+0159,
 U+00E9, U+00E8, U+00EB, U+00E4, U+00FC, U+00F6, U+00EF, U+00C9, U+00C8, U+00CB, U+00C4, U+00DC, U+00D6, U+00CF # Netherlands characters
 U+0391-03A9, U+03B1-03C9 # Greek characters
 U+0410-042F, U+0430-044F # Cyrillic characters
+U+0404,U+0406-0407,U+0456-0457,U+0413-0419,U+0433-0439,U+041A-041F,U+043A-043F,U+0420-0429,U+0440-0449,U+0490-0491 # Ukrainian characters

package/build/components/badge/badge.css

@@ -131,7 +131,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 /* Use for headline tags like <h1> */
 .db-badge {
   font-weight: 700;
-  white-space: nowrap;
+  overflow-wrap: break-word;
+  white-space: pre-line;
   justify-content: center;
   text-align: center;
   align-items: center;

package/build/components/brand/brand.scss

@@ -1,11 +1,11 @@
 @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";
+@use "@db-ux/core-foundations/build/styles/helpers";
 
 .db-brand {
 	@extend %db-overwrite-font-size-md;
-	@include display.display(flex);
+	@include helpers.display(flex);
 
 	gap: variables.$db-spacing-fixed-sm;
 	align-items: center;

package/build/components/button/button.css

@@ -143,7 +143,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 .db-button {
   font-weight: 700;
-  white-space: nowrap;
+  overflow-wrap: break-word;
+  white-space: pre-line;
   justify-content: center;
   text-align: center;
   align-items: center;
@@ -154,16 +155,19 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 }
 
 .db-button {
+  max-inline-size: 100%;
   color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
-  block-size: var(--db-sizing-md);
+  min-block-size: var(--db-sizing-md);
+  block-size: max-content;
   inline-size: fit-content;
-  padding: var(--db-spacing-fixed-xs) var(--db-spacing-fixed-md);
+  padding: var(--db-spacing-fixed-2xs) var(--db-spacing-fixed-md);
   text-decoration: none;
 }
 .db-button[data-no-text=true] {
   font-size: 0 !important;
   /* stylelint-disable-next-line at-rule-empty-line-before */
   padding: 0;
+  aspect-ratio: 1;
   inline-size: var(--db-sizing-md);
 }
 .db-button[data-no-text=true]::before {
@@ -174,10 +178,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 }
 .db-button[data-size=small] {
   font-weight: 700;
-  block-size: var(--db-sizing-sm);
+  min-block-size: var(--db-sizing-sm);
 }
 .db-button[data-size=small]:not([data-no-text=true]) {
-  padding: var(--db-spacing-fixed-3xs) var(--db-spacing-fixed-sm);
+  padding: 1px var(--db-spacing-fixed-sm);
 }
 .db-button[data-size=small]:not([data-no-text=true])::before {
   margin-inline-end: var(--db-spacing-fixed-2xs);
@@ -270,6 +274,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 .db-button:has(> .db-button) {
   margin: 0;
   padding: 0;
+  block-size: var(--db-sizing-md);
 }
 .db-button:has(> .db-button)::before {
   content: none;

package/build/components/button/button.scss

@@ -7,15 +7,18 @@
 @use "../../styles/internal/component";
 @use "../../styles/internal/button-components";
 
+// generic styles can be found in _button-components.scss
 .db-button {
 	@extend %default-interactive-component;
 	@extend %default-button;
 	@extend %db-overwrite-font-size-md;
 
+	max-inline-size: 100%;
 	color: colors.$db-adaptive-on-bg-basic-emphasis-100-default;
-	block-size: variables.$db-sizing-md;
+	min-block-size: variables.$db-sizing-md;
+	block-size: max-content;
 	inline-size: fit-content;
-	padding: variables.$db-spacing-fixed-xs variables.$db-spacing-fixed-md;
+	padding: variables.$db-spacing-fixed-2xs variables.$db-spacing-fixed-md;
 
 	// disable text-decoration if someone wants to use the button for an <a> tag
 	text-decoration: none;
@@ -25,6 +28,7 @@
 		@include icons.is-icon-text-replace;
 
 		padding: 0;
+		aspect-ratio: 1;
 		inline-size: variables.$db-sizing-md;
 
 		&::before {
@@ -36,11 +40,11 @@
 		@extend %db-overwrite-font-size-sm;
 
 		font-weight: 700;
-		block-size: variables.$db-sizing-sm;
+		min-block-size: variables.$db-sizing-sm;
 
 		&:not([data-no-text="true"]) {
-			padding: variables.$db-spacing-fixed-3xs
-				variables.$db-spacing-fixed-sm;
+			// stylelint-disable-next-line db-ux/use-spacings
+			padding: 1px variables.$db-spacing-fixed-sm;
 
 			&::before {
 				margin-inline-end: variables.$db-spacing-fixed-2xs;
@@ -113,6 +117,7 @@
 	&:has(> .db-button) {
 		margin: 0;
 		padding: 0;
+		block-size: variables.$db-sizing-md;
 
 		&::before {
 			content: none;

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

@@ -869,7 +869,17 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
 [type=datetime-local],
 [type=month],
 [type=week],
-[type=time]):not(:user-valid)::-webkit-datetime-edit {
+[type=time]):not(:user-valid,
+[value*="1"],
+[value*="2"],
+[value*="3"],
+[value*="4"],
+[value*="5"],
+[value*="6"],
+[value*="7"],
+[value*="8"],
+[value*="9"],
+[value*="0"])::-webkit-datetime-edit {
   transition: none;
   opacity: 0;
 }
@@ -924,7 +934,17 @@ input[type=radio]:checked) summary:is([type=date],
 [type=datetime-local],
 [type=month],
 [type=week],
-[type=time]):not(:user-valid)::-webkit-datetime-edit {
+[type=time]):not(:user-valid,
+[value*="1"],
+[value*="2"],
+[value*="3"],
+[value*="4"],
+[value*="5"],
+[value*="6"],
+[value*="7"],
+[value*="8"],
+[value*="9"],
+[value*="0"])::-webkit-datetime-edit {
   opacity: var(--db-opacity-xl);
   font-family: var(--db-font-family-sans);
   font-style: italic;
@@ -940,7 +960,17 @@ input[type=radio]:checked) summary:is([type=date],
   [type=datetime-local],
   [type=month],
   [type=week],
-  [type=time]):not(:user-valid)::-webkit-datetime-edit {
+  [type=time]):not(:user-valid,
+  [value*="1"],
+  [value*="2"],
+  [value*="3"],
+  [value*="4"],
+  [value*="5"],
+  [value*="6"],
+  [value*="7"],
+  [value*="8"],
+  [value*="9"],
+  [value*="0"])::-webkit-datetime-edit {
     transition: opacity var(--db-transition-straight-emotional);
   }
 }
@@ -1060,7 +1090,17 @@ input[type=radio]:checked) summary:is([type=date],
 [type=datetime-local],
 [type=month],
 [type=week],
-[type=time]):not(:user-valid)::-webkit-datetime-edit {
+[type=time]):not(:user-valid,
+[value*="1"],
+[value*="2"],
+[value*="3"],
+[value*="4"],
+[value*="5"],
+[value*="6"],
+[value*="7"],
+[value*="8"],
+[value*="9"],
+[value*="0"])::-webkit-datetime-edit {
   opacity: var(--db-opacity-xl);
   font-family: var(--db-font-family-sans);
   font-style: italic;
@@ -1202,6 +1242,9 @@ summary[aria-disabled=true]) {
     opacity: var(--db-opacity-lg);
   }
 }
+.db-custom-select > details[open] > summary > span > span::after {
+  content: ": ";
+}
 .db-custom-select[data-variant=floating] .db-custom-select-form-field > span {
   /* stylelint-disable-next-line db-ux/use-spacings */
   padding-block-start: calc(var(--db-type-body-font-size-2xs) + var(--db-spacing-fixed-3xs));

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

@@ -120,6 +120,10 @@
 					opacity: variables.$db-opacity-lg;
 				}
 			}
+
+			> span > span::after {
+				content: ": ";
+			}
 		}
 	}
 

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

@@ -141,10 +141,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 }
 .db-custom-select-list > ul {
   all: unset;
-  flex-direction: column;
-}
-.db-custom-select-list > ul:not([hidden]) {
   display: flex;
+  flex-direction: column;
 }
 .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,6 +1,6 @@
 @use "@db-ux/core-foundations/build/styles/variables";
 @use "../../styles/internal/form-components";
-@use "@db-ux/core-foundations/build/styles/helpers/display";
+@use "@db-ux/core-foundations/build/styles/helpers";
 
 .db-custom-select-list {
 	all: unset;
@@ -27,9 +27,7 @@
 
 	> ul {
 		all: unset;
-
-		@include display.display(flex);
-
+		display: flex;
 		flex-direction: column;
 
 		&:has(span) {

package/build/components/drawer/drawer.css

@@ -278,6 +278,7 @@ 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%;
@@ -285,9 +286,6 @@ 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)));
@@ -308,12 +306,10 @@ 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);
 }
@@ -342,7 +338,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):not([hidden]), .db-drawer .db-drawer-container .db-drawer-header:has(:not(.db-drawer-header-text:empty)):not([hidden]) {
+.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)) {
   display: flex;
 }
 .db-drawer[data-position=absolute] {
@@ -353,7 +349,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]:not([hidden]) {
+.db-drawer[data-position=absolute][open] {
   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] {

package/build/components/drawer/drawer.scss

@@ -137,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%;
@@ -204,7 +204,8 @@ $spacings: (
 		}
 
 		.db-drawer-header {
-			@include helpers.display(none);
+			display: none;
+
 			@include helpers.divider("bottom");
 
 			.db-drawer-header-text {
@@ -223,7 +224,7 @@ $spacings: (
 
 			&:has(.button-close-drawer),
 			&:has(:not(.db-drawer-header-text:empty)) {
-				@include helpers.display(flex);
+				display: flex;
 			}
 		}
 	}
@@ -237,7 +238,7 @@ $spacings: (
 		background-color: transparent;
 
 		&[open] {
-			@include helpers.display(flex);
+			display: flex;
 		}
 
 		&:not([data-direction]),

package/build/components/icon/icon.scss

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

package/build/components/infotext/infotext.scss

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

package/build/components/input/input.css

@@ -570,7 +570,8 @@ input[type=radio]:checked) > label {
 
 .db-input input::file-selector-button {
   font-weight: 700;
-  white-space: nowrap;
+  overflow-wrap: break-word;
+  white-space: pre-line;
   justify-content: center;
   text-align: center;
   align-items: center;
@@ -642,7 +643,17 @@ input[type=radio]:checked) > label {
 [type=datetime-local],
 [type=month],
 [type=week],
-[type=time]):not(:user-valid)::-webkit-datetime-edit {
+[type=time]):not(:user-valid,
+[value*="1"],
+[value*="2"],
+[value*="3"],
+[value*="4"],
+[value*="5"],
+[value*="6"],
+[value*="7"],
+[value*="8"],
+[value*="9"],
+[value*="0"])::-webkit-datetime-edit {
   transition: none;
   opacity: 0;
 }
@@ -695,7 +706,17 @@ input[type=radio]:checked) input:is([type=date],
 [type=datetime-local],
 [type=month],
 [type=week],
-[type=time]):not(:user-valid)::-webkit-datetime-edit {
+[type=time]):not(:user-valid,
+[value*="1"],
+[value*="2"],
+[value*="3"],
+[value*="4"],
+[value*="5"],
+[value*="6"],
+[value*="7"],
+[value*="8"],
+[value*="9"],
+[value*="0"])::-webkit-datetime-edit {
   opacity: var(--db-opacity-xl);
   font-family: var(--db-font-family-sans);
   font-style: italic;
@@ -709,7 +730,17 @@ input[type=radio]:checked) input:is([type=date],
   [type=datetime-local],
   [type=month],
   [type=week],
-  [type=time]):not(:user-valid)::-webkit-datetime-edit {
+  [type=time]):not(:user-valid,
+  [value*="1"],
+  [value*="2"],
+  [value*="3"],
+  [value*="4"],
+  [value*="5"],
+  [value*="6"],
+  [value*="7"],
+  [value*="8"],
+  [value*="9"],
+  [value*="0"])::-webkit-datetime-edit {
     transition: opacity var(--db-transition-straight-emotional);
   }
 }
@@ -844,7 +875,17 @@ input[type=radio]:checked) input:is([type=date],
 [type=datetime-local],
 [type=month],
 [type=week],
-[type=time]):not(:user-valid)::-webkit-datetime-edit {
+[type=time]):not(:user-valid,
+[value*="1"],
+[value*="2"],
+[value*="3"],
+[value*="4"],
+[value*="5"],
+[value*="6"],
+[value*="7"],
+[value*="8"],
+[value*="9"],
+[value*="0"])::-webkit-datetime-edit {
   opacity: var(--db-opacity-xl);
   font-family: var(--db-font-family-sans);
   font-style: italic;

package/build/components/navigation/navigation.css

@@ -200,6 +200,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   }
 }
 .db-navigation > menu {
+  display: flex;
   flex-direction: column;
   padding: 0;
   margin: 0;
@@ -207,9 +208,6 @@ 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-navigation > menu:not([hidden]) {
-  display: flex;
-}
 @media screen and (min-width: 64em) {
   .db-navigation > menu:not([data-force-mobile]), .db-navigation > menu[data-force-mobile=false] {
     flex-direction: row;

package/build/components/navigation/navigation.scss

@@ -1,7 +1,7 @@
 @use "@db-ux/core-foundations/build/styles/variables";
 @use "@db-ux/core-foundations/build/styles/screen-sizes";
 @use "../../styles/internal/component";
-@use "@db-ux/core-foundations/build/styles/helpers/display";
+@use "@db-ux/core-foundations/build/styles/helpers";
 @use "../../styles/internal/form-components";
 @use "../../styles/internal/db-puls";
 
@@ -15,8 +15,7 @@
 	}
 
 	> menu {
-		@include display.display(flex);
-
+		display: flex;
 		flex-direction: column;
 		padding: 0;
 		margin: 0;
@@ -102,7 +101,7 @@
 	&[data-force-close="true"] {
 		> menu menu {
 			@include screen-sizes.screen("md") {
-				@include display.display(none);
+				@include helpers.display(none);
 			}
 		}
 	}