refactor: extract shared select dropdown/list styles into central SCSS placeholders

packages/components/src/components/custom-select-dropdown/custom-select-dropdown.scss

@@ -4,15 +4,12 @@
 @use "@db-ux/core-foundations/build/styles/helpers";
 @use "@db-ux/core-foundations/build/styles/animation";
 @use "../../styles/internal/form-components";
+@use "../../styles/internal/select-dropdown-components";
 
 .db-custom-select-dropdown {
 	@extend %db-neutral-variables;
+	@extend %select-dropdown-container;
 
-	position: absolute;
-	z-index: 32;
-	box-shadow: variables.$db-elevation-md;
-	min-inline-size: variables.$db-sizing-xl;
-	max-inline-size: calc(100vw - 2 * #{variables.$db-spacing-fixed-sm});
 	max-block-size: calc(100vh - 2 * #{variables.$db-spacing-fixed-sm});
 
 	&:not([data-width]),

packages/components/src/components/custom-select-list-item/custom-select-list-item.scss

@@ -5,6 +5,7 @@
 @use "@db-ux/core-foundations/build/styles/icons";
 @use "@db-ux/core-foundations/build/styles/screen-sizes";
 @use "../../styles/internal/form-components";
+@use "../../styles/internal/select-dropdown-components";
 
 // web-component workaround
 db-custom-select-list-item:not(:last-of-type) {
@@ -15,23 +16,13 @@ db-custom-select-list-item:not(:last-of-type) {
 
 .db-custom-select-list-item {
 	@include helpers.display(flex);
+	@extend %select-list-item;
 
 	block-size: 100%;
-	position: relative;
-	padding: variables.$db-spacing-fixed-sm;
-	background-color: colors.$db-adaptive-bg-basic-transparent-full-default;
-	border-radius: variables.$db-border-radius-xs;
-	box-sizing: border-box;
 
 	&:has(> label) {
 		&:not(:has(input[type="radio"]:checked)) {
-			@include helpers.hover {
-				background-color: colors.$db-adaptive-bg-basic-transparent-full-hovered;
-			}
-
-			@include helpers.active {
-				background-color: colors.$db-adaptive-bg-basic-transparent-full-pressed;
-			}
+			@extend %select-list-item-interaction;
 		}
 	}
 

packages/components/src/components/custom-select-list/custom-select-list.scss

@@ -1,30 +1,19 @@
 @use "@db-ux/core-foundations/build/styles/variables";
 @use "../../styles/internal/form-components";
 @use "@db-ux/core-foundations/build/styles/helpers";
+@use "../../styles/internal/select-dropdown-components";
 
 .db-custom-select-list {
 	all: unset;
+
+	@extend %select-list-container;
+
 	padding: variables.$db-spacing-fixed-sm;
-	overflow-y: auto;
-	overflow-block: auto;
 
 	&::-webkit-scrollbar-button:single-button:vertical:decrement {
 		border-start-end-radius: 0;
 	}
 
-	/* (checkbox height + list-item padding) * 6 items + list padding */
-	max-block-size: calc(
-		5.5 *
-			(
-				(
-						#{form-components.$font-size-height} - 2 *
-							#{variables.$db-border-width-3xs}
-					) +
-					2 * #{variables.$db-spacing-fixed-sm}
-			) +
-			(#{variables.$db-spacing-fixed-sm} * 2)
-	);
-
 	> ul {
 		all: unset;
 		display: flex;

packages/components/src/components/select/select.scss

@@ -7,6 +7,7 @@
 @use "../../styles/internal/form-components";
 @use "../../styles/internal/component";
 @use "../../styles/internal/select-components";
+@use "../../styles/internal/select-dropdown-components";
 
 .db-select-placeholder {
 	@extend %select-absolute-placeholder;
@@ -67,45 +68,13 @@
 
 		/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
 		:is(::picker(select)) {
-			@extend %default-card;
-
-			// Adapted from .db-custom-select-dropdown
-			position: absolute;
-			z-index: 32;
-			box-shadow: variables.$db-elevation-md;
-			min-inline-size: variables.$db-sizing-xl;
-			max-inline-size: calc(
-				100vw - 2 * #{variables.$db-spacing-fixed-sm}
-			);
-
-			// Adapted from .db-card
-			background-color: colors.$db-adaptive-bg-basic-level-1-default;
-			padding: variables.$db-spacing-fixed-sm;
-
-			// Adapted from .db-custom-select-list
-			overflow-block: auto;
-
-			/* (option height + padding) * 5.5 items (showing partial item to indicate more content) + list padding */
-			max-block-size: calc(
-				5.5 *
-					(
-						(
-								#{form-components.$font-size-height} - 2 *
-									#{variables.$db-border-width-3xs}
-							) +
-							2 * #{variables.$db-spacing-fixed-sm}
-					) +
-					(#{variables.$db-spacing-fixed-sm} * 2)
-			);
+			@extend %select-dropdown-container;
+			@extend %select-list-container;
 		}
 
 		option {
-			// Adapted from .db-custom-select-list-item
-			position: relative;
-			padding: variables.$db-spacing-fixed-sm;
-			background-color: colors.$db-adaptive-bg-basic-transparent-full-default;
-			border-radius: variables.$db-border-radius-xs;
-			box-sizing: border-box;
+			@extend %select-list-item;
+
 			justify-content: space-between;
 
 			// change order of the included text and pseudo-element within this flexbox item, to make sure the icon is always on the right
@@ -115,15 +84,8 @@
 				font-weight: 700;
 			}
 
-			// Hover states adapted from .db-custom-select-list-item
 			&:not(:checked) {
-				@include helpers.hover {
-					background-color: colors.$db-adaptive-bg-basic-transparent-full-hovered;
-				}
-
-				@include helpers.active {
-					background-color: colors.$db-adaptive-bg-basic-transparent-full-pressed;
-				}
+				@extend %select-list-item-interaction;
 			}
 
 			/* stylelint-disable-next-line selector-pseudo-element-no-unknown */

packages/components/src/styles/internal/_select-dropdown-components.scss

@@ -0,0 +1,58 @@
+@use "@db-ux/core-foundations/build/styles/variables";
+@use "@db-ux/core-foundations/build/styles/colors";
+@use "@db-ux/core-foundations/build/styles/helpers";
+@use "./form-components";
+@use "./component";
+
+// Shared styles for dropdown container (used by both CustomSelect and native select ::picker)
+%select-dropdown-container {
+	@extend %default-card;
+
+	position: absolute;
+	z-index: 32;
+	box-shadow: variables.$db-elevation-md;
+	min-inline-size: variables.$db-sizing-xl;
+	max-inline-size: calc(100vw - 2 * #{variables.$db-spacing-fixed-sm});
+
+	// Adapted from .db-card
+	background-color: colors.$db-adaptive-bg-basic-level-1-default;
+	padding: variables.$db-spacing-fixed-sm;
+}
+
+// Shared styles for list container (used by both CustomSelect list and native select ::picker)
+%select-list-container {
+	overflow-block: auto;
+
+	/* (option height + padding) * 5.5 items (showing partial item to indicate more content) + list padding */
+	max-block-size: calc(
+		5.5 *
+			(
+				(
+						#{form-components.$font-size-height} - 2 *
+							#{variables.$db-border-width-3xs}
+					) +
+					2 * #{variables.$db-spacing-fixed-sm}
+			) +
+			(#{variables.$db-spacing-fixed-sm} * 2)
+	);
+}
+
+// Shared styles for list items (used by both CustomSelect list items and native select options)
+%select-list-item {
+	position: relative;
+	padding: variables.$db-spacing-fixed-sm;
+	background-color: colors.$db-adaptive-bg-basic-transparent-full-default;
+	border-radius: variables.$db-border-radius-xs;
+	box-sizing: border-box;
+}
+
+// Shared hover/active states for list items
+%select-list-item-interaction {
+	@include helpers.hover {
+		background-color: colors.$db-adaptive-bg-basic-transparent-full-hovered;
+	}
+
+	@include helpers.active {
+		background-color: colors.$db-adaptive-bg-basic-transparent-full-pressed;
+	}
+}

showcases/patternhub/tests/default.spec.ts

@@ -24,8 +24,8 @@ for (const group of Components) {
 				`docs`,
 				`.${group.path}/${component.name}/docs/Angular`,
 				async (page) => {
-					const firstHeading = page.locator('h1, h2').first();
-					await expect(firstHeading).toBeVisible();
+					const firstHeadline = page.locator('h1, h2').first();
+					await expect(firstHeadline).toBeVisible();
 				}
 			);
 		});
@@ -35,8 +35,8 @@ for (const group of Components) {
 				`overview`,
 				`.${group.path}/${component.name}/overview?fullscreen=true`,
 				async (page) => {
-					const firstH2 = page.locator('h1').first();
-					await expect(firstH2).toBeVisible();
+					const firstHeadline = page.locator('h1, h2').first();
+					await expect(firstHeadline).toBeVisible();
 				}
 			);
 		});