@db-ux/core-components 4.12.0 → 4.13.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @db-ux/core-components
 
+## 4.13.0
+
+_version bump_
+
+## 4.12.1
+
+### Patch Changes
+
+- fix(custom-select): dropdown with `dropdownWidth="auto"` now correctly sizes to content width and respects the trigger minimum width. Long option labels no longer get truncated: `auto` keeps them on a single line (dropdown grows to the longest option), while `fixed` and `full` wrap long labels onto new lines. - [see commit 68dedc3](https://github.com/db-ux-design-system/core-web/commit/68dedc33c324b48339d5bb73a85fdff3045ed059)
+
 ## 4.12.0
 
 _version bump_

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

@@ -57,15 +57,10 @@
 			gap: variables.$db-spacing-fixed-md;
 			border-radius: variables.$db-border-radius-sm;
 
-			@include helpers.not-disabled {
-				@include helpers.hover {
-					background-color: colors.$db-adaptive-bg-basic-level-1-hovered;
-				}
-
-				@include helpers.active {
-					background-color: colors.$db-adaptive-bg-basic-level-1-pressed;
-				}
-			}
+			@include helpers.interactive-bg(
+				colors.$db-adaptive-bg-basic-level-1-hovered,
+				colors.$db-adaptive-bg-basic-level-1-pressed
+			);
 
 			&::-webkit-details-marker {
 				display: none;

package/build/components/checkbox/checkbox.scss

@@ -35,6 +35,7 @@
 		@include form-components.get-state("active");
 	}
 
+	// jscpd:ignore-start
 	@include form-components.get-validity(check) {
 		&:has(.db-infotext[data-semantic="successful"]) {
 			@include form-components.get-validity-color-checkbox("valid");
@@ -45,6 +46,8 @@
 		@include form-components.get-validity-color-checkbox("invalid");
 	}
 
+	// jscpd:ignore-end
+
 	input {
 		@include helpers.display(flex);
 
@@ -54,6 +57,8 @@
 
 		&:checked {
 			--db-check-element-border-color: #{colors.$db-adaptive-on-bg-basic-emphasis-70-default};
+
+			// jscpd:ignore-start
 			--db-icon-color: var(--db-adaptive-on-bg-inverted-default);
 			--db-adaptive-bg-basic-transparent-full-default: var(
 				--db-adaptive-bg-inverted-contrast-max-default
@@ -65,6 +70,8 @@
 				--db-adaptive-bg-inverted-contrast-max-pressed
 			);
 
+			// jscpd:ignore-end
+
 			@extend %center-icon;
 
 			// Check icon

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

@@ -199,6 +199,12 @@
   /* 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=auto] {
+  inline-size: max-content;
+}
+.db-custom-select-dropdown[data-width=auto] .db-custom-select-list-item-label {
+  white-space: nowrap;
+}
 .db-custom-select-dropdown[data-width=full] {
   inline-size: 100%;
 }

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

@@ -24,6 +24,15 @@
 		);
 	}
 
+	&[data-width="auto"] {
+		inline-size: max-content;
+
+		// Auto width grows to the longest option, so labels must not wrap.
+		.db-custom-select-list-item-label {
+			white-space: nowrap;
+		}
+	}
+
 	&[data-width="full"] {
 		inline-size: 100%;
 	}

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

@@ -111,6 +111,11 @@ db-custom-select-list-item:not(:last-of-type) .db-custom-select-list-item[data-d
   --db-check-element-label-color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
   inline-size: 100%;
 }
+.db-custom-select-list-item > label .db-custom-select-list-item-label {
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+  color: inherit;
+}
 .db-custom-select-list-item > label:has(input:checked) {
   font-weight: 700;
 }

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

@@ -25,15 +25,10 @@ db-custom-select-list-item:not(:last-of-type) {
 
 	&:has(> label) {
 		&:not(:has(input[type="radio"]:checked)) {
-			@include helpers.not-disabled {
-				@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;
-				}
-			}
+			@include helpers.interactive-bg(
+				colors.$db-adaptive-bg-basic-transparent-full-hovered,
+				colors.$db-adaptive-bg-basic-transparent-full-pressed
+			);
 		}
 	}
 
@@ -57,6 +52,17 @@ db-custom-select-list-item:not(:last-of-type) {
 
 		inline-size: 100%;
 
+		.db-custom-select-list-item-label {
+			// Long labels wrap onto new lines by default (fixed/full dropdowns).
+			// The auto-width dropdown overrides this to stay single-line
+			// (see custom-select-dropdown.scss [data-width="auto"]).
+			// min-inline-size: 0 lets the label shrink inside the flex label so
+			// the text wraps instead of overflowing.
+			min-inline-size: 0;
+			overflow-wrap: anywhere;
+			color: inherit;
+		}
+
 		&:has(input:checked) {
 			font-weight: 700;
 		}

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

@@ -73,16 +73,10 @@
 	justify-content: space-between;
 
 	@include helpers.display(inline-flex);
-
-	@include helpers.not-disabled {
-		@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;
-		}
-	}
+	@include helpers.interactive-bg(
+		colors.$db-adaptive-bg-basic-transparent-full-hovered,
+		colors.$db-adaptive-bg-basic-transparent-full-pressed
+	);
 
 	&:has(~ .db-sub-navigation:is(:hover, :focus)) {
 		background-color: colors.$db-adaptive-bg-basic-transparent-full-hovered;

package/build/components/radio/radio.scss

@@ -3,6 +3,7 @@
 @use "@db-ux/core-foundations/build/styles/helpers";
 @use "../../styles/internal/form-components";
 
+// jscpd:ignore-start
 @mixin get-radio-validity-colors($variant: "successful") {
 	--db-check-element-border-color: var(
 		--db-#{$variant}-on-bg-basic-emphasis-70-default
@@ -27,6 +28,8 @@
 	);
 }
 
+// jscpd:ignore-end
+
 .db-radio {
 	@include form-components.set-default-check-element;
 

package/build/components/switch/switch.scss

@@ -47,6 +47,7 @@ $switch-inline-size: calc(2lh + #{$switch-fixed-padding});
 		}
 	}
 
+	// jscpd:ignore-start
 	@include form-components.get-validity(check) {
 		&:has(.db-infotext[data-semantic="successful"]) {
 			@include form-components.get-validity-color-checkbox("valid");
@@ -57,6 +58,8 @@ $switch-inline-size: calc(2lh + #{$switch-fixed-padding});
 		@include form-components.get-validity-color-checkbox("invalid");
 	}
 
+	// jscpd:ignore-end
+
 	input {
 		--db-icon-margin-start: 0;
 		--thumb-offset-x: #{$switch-fixed-padding};
@@ -131,6 +134,8 @@ $switch-inline-size: calc(2lh + #{$switch-fixed-padding});
 		/* positioned at the end of the track: track length - 100% (thumb width) */
 		&:checked {
 			--thumb-offset-x: calc(100% + #{$switch-fixed-padding});
+
+			// jscpd:ignore-start
 			--db-icon-color: var(--db-adaptive-on-bg-inverted-default);
 			--db-adaptive-bg-basic-transparent-full-default: var(
 				--db-adaptive-bg-inverted-contrast-max-default
@@ -142,6 +147,8 @@ $switch-inline-size: calc(2lh + #{$switch-fixed-padding});
 				--db-adaptive-bg-inverted-contrast-max-pressed
 			);
 
+			// jscpd:ignore-end
+
 			&::after {
 				--db-icon-color: #{colors.$db-adaptive-on-bg-inverted-default};
 			}

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

@@ -40,15 +40,10 @@ $with-icon-padding-calc: calc(
 			--db-overwrite-cursor: initial;
 		}
 
-		@include helpers.not-disabled {
-			@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;
-			}
-		}
+		@include helpers.interactive-bg(
+			colors.$db-adaptive-bg-basic-transparent-full-hovered,
+			colors.$db-adaptive-bg-basic-transparent-full-pressed
+		);
 
 		&:has(input:checked) {
 			font-weight: 700;

package/build/components/table-row/table-row.scss

@@ -68,6 +68,7 @@ $interactive-child: ":is(#{$interactive-row-action}:is(#{helpers.$interactive-el
 			}
 		}
 
+		// jscpd:ignore-start
 		@include table-row-interactive-state {
 			background-color: colors.$db-adaptive-bg-basic-level-2-hovered;
 		}
@@ -76,6 +77,8 @@ $interactive-child: ":is(#{$interactive-row-action}:is(#{helpers.$interactive-el
 			background-color: colors.$db-adaptive-bg-basic-level-2-pressed;
 		}
 
+		// jscpd:ignore-end
+
 		&:has(#{$interactive-child}:focus-visible) {
 			&::after {
 				@extend %focus-placeholder;